📝 JavaScript Notes App

Build a simple and persistent Notes App using plain JavaScript and localStorage. Users can add, delete, and save notes — and they persist even after refreshing the page.

📄 HTML Structure

<div id="app">
  <textarea id="note-input" placeholder="Write your note here..." class="w-full p-2 border rounded"></textarea>
  <button id="add-note" class="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Add Note</button>
  <div id="notes-container" class="mt-6 space-y-4"></div>
</div>

⚙️ JavaScript Logic

const noteInput = document.getElementById("note-input");
const addBtn = document.getElementById("add-note");
const notesContainer = document.getElementById("notes-container");

let notes = JSON.parse(localStorage.getItem("notes")) || [];

function saveNotes() {
  localStorage.setItem("notes", JSON.stringify(notes));
}

function renderNotes() {
  notesContainer.innerHTML = "";
  notes.forEach((note, index) => {
    const noteDiv = document.createElement("div");
    noteDiv.className = "bg-yellow-100 p-3 rounded shadow";

    const content = document.createElement("p");
    content.textContent = note;

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.className = "text-red-600 text-sm mt-2";
    deleteBtn.onclick = () => {
      notes.splice(index, 1);
      saveNotes();
      renderNotes();
    };

    noteDiv.appendChild(content);
    noteDiv.appendChild(deleteBtn);
    notesContainer.appendChild(noteDiv);
  });
}

addBtn.onclick = () => {
  const newNote = noteInput.value.trim();
  if (newNote) {
    notes.unshift(newNote);
    saveNotes();
    renderNotes();
    noteInput.value = "";
  }
};

renderNotes();

✨ Extra Ideas

• Allow editing existing notes
• Tag or categorize notes
• Add a search filter
• Enable dark mode
• Export/import notes as JSON file