كيفيه عمل To Do List بإستخدام html,css,js

طريقة إنشاء تطبيق To-Do List باستخدام HTML وCSS وJavaScript خطوة بخطوة

إذا كنت تبحث عن مشروع عملي لتعلم HTML وCSS وJavaScript، فإن تطبيق To-Do List هو الخيار المثالي. في هذا الدليل التفصيلي، سنقوم ببناء تطبيق ويب بسيط لإدارة المهام اليومية، باستخدام تقنيات الويب الأساسية، دون الحاجة إلى مكتبات أو أطر عمل خارجية.

ما هو تطبيق To-Do List؟ ولماذا ننفذه؟

تطبيق "To-Do List" أو "قائمة المهام" هو أداة تساعد المستخدم على كتابة المهام التي يريد إنجازها وحذفها بعد الانتهاء. يُعد من أبسط التطبيقات التي يمكن تنفيذها باستخدام JavaScript، لكنه مليء بالفوائد التعليمية، خصوصًا للمبتدئين الذين يريدون فهم كيفية التفاعل مع صفحة الويب ومعالجة البيانات.

فوائد هذا المشروع للمبتدئين

• تطبيق عملي لتعلم JavaScript بطريقة ممتعة.
• استخدام Local Storage لحفظ البيانات.
• التعامل مع عناصر الصفحة (DOM).
• تحسين مهارات تصميم الواجهة باستخدام CSS.
• مشروع بسيط يمكنك مشاركته على مدونتك أو ملفك الشخصي.

الجزء الأول: بناء هيكل HTML

<div class="todo-container">
  <h2>تطبيق قائمة المهام</h2>
  <div class="input-area">
    <input type="text" id="taskInput" placeholder="أضف مهمة جديدة...">
    <button onclick="addTask()">أضف</button>
  </div>
  <ul id="taskList" class="todo-list"></ul>
</div>

الجزء الثاني: تصميم الواجهة باستخدام CSS

<style>
.todo-container {
  background-color: #f3f3f3;
  max-width: 400px;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}
.input-area {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.input-area input {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.input-area button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
ul.todo-list {
  list-style: none;
  padding: 0;
}
ul.todo-list li {
  padding: 10px;
  margin-bottom: 5px;
  background: #eee;
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
}
ul.todo-list li button {
  background: red;
  border: none;
  color: white;
  border-radius: 3px;
  cursor: pointer;
  padding: 5px 10px;
}
</style>

الجزء الثالث: البرمجة باستخدام JavaScript

<script>
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

function saveTasks() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function renderTasks() {
  const taskList = document.getElementById("taskList");
  taskList.innerHTML = "";
  tasks.forEach((task, index) => {
    const li = document.createElement("li");
    li.innerHTML = `
      ${task}
      <button onclick="deleteTask(${index})">حذف</button>
    `;
    taskList.appendChild(li);
  });
}

function addTask() {
  const input = document.getElementById("taskInput");
  const task = input.value.trim();
  if (task) {
    tasks.push(task);
    saveTasks();
    renderTasks();
    input.value = "";
  }
}

function deleteTask(index) {
  tasks.splice(index, 1);
  saveTasks();
  renderTasks();
}

renderTasks();
</script>

لمشاهده وإستخدام التطبيق العملى مباشره إضغط هنا

الخاتمة

إنشاء تطبيق To-Do List باستخدام HTML وCSS وJavaScript يعتبر من أفضل المشاريع التعليمية التي تساعدك على فهم مفاهيم البرمجة الأساسية. إذا كنت مبتدئًا، فهذا المشروع سيمنحك تجربة عملية لبناء تطبيق ويب بسيط وفعّال يمكنك تطويره مستقبلاً كما تشاء.

شارك التطبيق مع زملائك أو انشره على مدونتك لجذب المهتمين بتعلم تطوير الويب!