Project 11: A Notes App with localStorage

<style>
  .notes { font-family: system-ui, sans-serif; max-width: 340px; }
  textarea { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; min-height: 60px; }
  button { font: inherit; padding: 6px 12px; cursor: pointer; }
  .note { border: 1px solid #ddd; border-radius: 8px; padding: 8px; margin: 8px 0; }
  .note small { color: #666; display: block; margin-bottom: 4px; }
  .note p { margin: 0 0 6px; white-space: pre-wrap; }
</style>

<div class="notes">
  <label for="text">New note</label>
  <textarea id="text"></textarea>
  <button id="save">Save note</button>
  <p id="msg" role="status"></p>
  <div id="list"></div>
</div>

<script>
  const KEY = "notes-app:v1";

  function loadNotes() {
    try {
      const data = JSON.parse(localStorage.getItem(KEY));
      return Array.isArray(data) ? data : [];           // ignore anything that is not an array
    } catch {
      return [];
    }
  }

  function saveNotes(notes) {
    try {
      localStorage.setItem(KEY, JSON.stringify(notes));
      return true;
    } catch {
      return false;                                      // storage full or unavailable
    }
  }

  let notes = loadNotes();
  let editingId = null;

  const list = document.querySelector("#list");
  const text = document.querySelector("#text");
  const msg = document.querySelector("#msg");

  function render() {
    list.replaceChildren(...notes.map(note => {
      const wrap = document.createElement("div");
      wrap.className = "note";
      wrap.dataset.id = note.id;

      const when = document.createElement("small");
      when.textContent = new Date(note.updated).toLocaleString();

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

      const edit = document.createElement("button");
      edit.textContent = "Edit";
      edit.dataset.action = "edit";
      const del = document.createElement("button");
      del.textContent = "Delete";
      del.dataset.action = "delete";

      wrap.append(when, body, edit, " ", del);
      return wrap;
    }));
  }

  document.querySelector("#save").addEventListener("click", () => {
    const value = text.value.trim();
    if (!value) { msg.textContent = "Write something first."; return; }

    if (editingId === null) {
      notes = [{ id: Date.now(), text: value, updated: Date.now() }, ...notes];
    } else {
      notes = notes.map(n => (n.id === editingId ? { ...n, text: value, updated: Date.now() } : n));
      editingId = null;
    }

    msg.textContent = saveNotes(notes) ? "Saved." : "Could not save to this browser.";
    text.value = "";
    render();
  });

  list.addEventListener("click", event => {
    const button = event.target.closest("button[data-action]");
    if (!button) return;
    const id = Number(button.closest(".note").dataset.id);

    if (button.dataset.action === "delete") {
      notes = notes.filter(n => n.id !== id);
      saveNotes(notes);
      render();
    } else {
      editingId = id;
      text.value = notes.find(n => n.id === id).text;
      text.focus();
      msg.textContent = "Editing a note. Press Save to update it.";
    }
  });

  render();
</script>