مشروع ختامي — تطبيق ملاحظات يفتكر كل شي

نجمع كل وحدة المحاضن الثلاثة بتطبيق حقيقي: ملاحظات تظل محفوظة حتى بعد سكر المتصفح. الهيكل:

<input id="txt" placeholder="اكتب ملاحظتك">
<button id="add">أضف</button>
<ul id="list"></ul>

والجافاسكربت الكامل:

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

function render() {
  const list = document.querySelector("#list");
  list.innerHTML = "";
  notes.forEach(function (note, i) {
    const li = document.createElement("li");
    li.textContent = note;
    const x = document.createElement("button");
    x.textContent = "حذف";
    x.onclick = function () {
      notes.splice(i, 1);
      save();
    };
    li.appendChild(x);
    list.appendChild(li);
  });
}

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

document.querySelector("#add").onclick = function () {
  const t = document.querySelector("#txt").value.trim();
  if (!t) return;
  notes.push(t);
  save();
};

render();

لاحظ النمط الكامل: التخزين عبر JSON مع localStorage، والواجهة تت rebuild من نفس البيانات بكل تغيير — البيانات هي الحقيقة الوحيدة، والشاشة مجرد انعكاس لها. هذي نفس فلسفة أكبر التطبيقات بالعالم.