JavaScript Notes App

Table of Contents

Live Demo
Technologies used -
HTML
CSS
JavaScript
Description

The JavaScript Notes App is a simple and intuitive tool for taking, editing, and storing notes directly in your browser. With a clean and user-friendly interface, this app allows users to create notes with a single click, making it easy to jot down ideas, to-dos, or any other information that needs quick recording. Notes are editable and deletable, allowing for flexibility and real-time updates as your thoughts and needs change.

One of the key features of this notes app is the use of browser-based local storage, which saves notes even after the page is refreshed. This ensures that all notes remain accessible and are not lost when the app is closed, making it ideal for users who want a lightweight, dependable note-taking solution without the need for external accounts or cloud services.

Highlighted Source Code
				
					const notesContainer = document.querySelector(".notes-container");
const createBtn = document.querySelector(".btn");

function showNotes() {
    notesContainer.innerHTML = localStorage.getItem("notes") || "";
}
showNotes();

function updateStorage() {
    localStorage.setItem("notes", notesContainer.innerHTML);
}

createBtn.addEventListener("click", () => {
    let inputBox = document.createElement("p");
    let img = document.createElement("img");
    inputBox.className = "input-box";
    inputBox.setAttribute("contenteditable", "true");
    img.src = "images/delete.png";
    notesContainer.appendChild(inputBox).appendChild(img);
    updateStorage();
});

notesContainer.addEventListener("click", function(e) {
    if (e.target.tagName === "IMG") {
        e.target.parentElement.remove();
        updateStorage();
    }
});

Recent Projects

Follow me

Github Linkedin Instagram

Related Projects
Fun Project

Tic Tac Toe Game

The Interactive Tic Tac Toe Game is a classic two-player game implemented using HTML, CSS, and JavaScript. This engaging application

Read More »
Type to search