مشروع: قائمة مهام حية

المشروع الختامي — قائمة مهام كاملة. HTML:

<input id="t" placeholder="مهمة جديدة">
<button id="add">أضف</button>
<ul id="list"></ul>

وجافاسكربت:

const tasks = [];

document.querySelector("#add").addEventListener("click", () => {
  const txt = document.querySelector("#t").value.trim();
  if (!txt) return;            // الحقل فاضي؟ تجاهل
  tasks.push(txt);
  document.querySelector("#t").value = "";
  render();
});

function render() {
  const ul = document.querySelector("#list");
  ul.innerHTML = "";
  tasks.forEach((task, i) => {
    const li = document.createElement("li");
    li.textContent = task;
    const del = document.createElement("button");
    del.textContent = "حذف";
    del.addEventListener("click", () => {
      tasks.splice(i, 1);
      render();
    });
    li.appendChild(del);
    ul.appendChild(li);
  });
}

جربها: أضف، احذف، وكل شي يتحدث فوراً. جمعت المسار كله: مصفوفة بيانات، أحداث، DOM، وrender يعيد الرسم. بهذا المستوى أنت رسمياً مطوّر ويب مبتدئ — وعندك أساس قوي لاي دورة متقدمة.