إنشاء تطبيق قائمة المهام (To-Do List) باستخدام HTML, CSS, و JavaScript

 

ما هو تطبيق قائمة المهام؟

تطبيق قائمة المهام (To-Do List) هو أداة تساعد المستخدمين على تنظيم مهامهم اليومية بطريقة سهلة وتفاعلية. يتيح لك هذا التطبيق:
✅ إضافة مهام جديدة بسهولة.
✅ حذف المهام بعد الانتهاء منها.
✅ إدخال المهام بالضغط على زر “Enter” لتسهيل الاستخدام.

 

 لماذا نتعلم هذا المشروع؟

هذا المشروع بسيط ولكنه يغطي أساسيات تطوير الويب باستخدام:
📌 HTML لإنشاء هيكل الصفحة.
📌 CSS لتحسين المظهر والتصميم.
📌 JavaScript لإضافة التفاعل مع المستخدم.

💡 بعد هذا الدرس، ستتمكن من فهم كيفية إنشاء تطبيقات ويب تفاعلية وإضافة ميزات متقدمة لها! 🚀

ماذا سنتعلم في هذا الدرس؟

1️⃣ بناء الهيكل الأساسي للصفحة باستخدام HTML.
2️⃣ تنسيق التصميم باستخدام CSS لجعل التطبيق جذابًا.
3️⃣ إضافة وظائف JavaScript مثل إضافة المهام وحذفها والتفاعل مع المستخدم.
4️⃣ تحسين تجربة المستخدم من خلال دعم الإدخال عبر لوحة المفاتيح.

🎯 في نهاية هذا الدرس، سيكون لديك تطبيق يعمل بكفاءة ويمكنك التعديل عليه وتطويره كما تريد! 😃

هيا بنا نبدأ! ⬇️

 سنقوم بتقسيم الكود إلى ثلاثة ملفات منفصلة:

  1. ملف HTML (للهيكل الأساسي)

  2. ملف CSS (للتنسيق)

  3. ملف JavaScript (للتحكم في الوظائف)

وسأشرح كل قسم على حدة بالتفصيل. ✅

🎯 1. ملف HTML – index.html

📌 هذا الملف يحتوي على الهيكل الأساسي لصفحة “قائمة المهام”.

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قائمة المهام</title>
    <link rel="stylesheet" href="style.css"> <!-- ربط ملف CSS -->
</head>
<body>

    <h1>قائمة المهام</h1>
    <div class="container">
        <input type="text" id="taskInput" placeholder="أضف مهمة جديدة">
        <button id="addTaskBtn">إضافة</button>
        <ul id="taskList"></ul>
    </div>

    <script src="script.js"></script> <!-- ربط ملف JavaScript -->
</body>
</html>

🔍 شرح ملف HTML

  • <head>: يحتوي على العنوان <title> وربط ملف الـCSS باستخدام <link>.
  • <body>: يحتوي على عناصر الصفحة الرئيسية:
  • عنوان <h1> لعرض اسم التطبيق.
  • <div class="container"> لحفظ عناصر الإدخال.
  • <input> لإدخال المهام.
  • <button> لإضافة المهام (مع id لربطه بـJavaScript).
  • <ul> لعرض قائمة المهام.
  • <script>: في النهاية نربط ملف JavaScript باستخدام <script src="script.js">.

🎨 2. ملف CSS – style.css

📌 يحدد تنسيق الصفحة وتحسين المظهر.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    margin: 50px;
}

h1 {
    color: #333;
}

.container {
    max-width: 400px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background: #eee;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.delete {
    background-color: red;
    border: none;
    padding: 5px;
    color: white;
    cursor: pointer;
    border-radius: 3px;
}

.delete:hover {
    background-color: darkred;
}

🔍 شرح ملف CSS

  1. تنسيق الصفحة بالكامل (body)
    • تعيين نوع الخط والخلفية ومحاذاة النص.
  2. تصميم الحاوية (.container)
    • تحديد العرض، الألوان، وتنسيق الظل لإضفاء مظهر جذاب.
  3. تنسيق حقل الإدخال (input)
    • ضبط العرض والحدود لتنسيقه بشكل جيد.
  4. تصميم الأزرار (button)
    • إضافة تأثير عند التمرير (hover).
  5. تصميم قائمة المهام (ul و li)
    • جعل كل عنصر يأخذ شكلاً جذابًا مع تباعد مناسب.
  6. تصميم زر الحذف (.delete)
    • إعطاء لون أحمر مع تأثير عند التمرير.

🎮 3. ملف JavaScript – script.js

📌 يحتوي على وظائف التفاعل مثل إضافة وحذف المهام.

document.addEventListener("DOMContentLoaded", function() {
    let taskInput = document.getElementById("taskInput");
    let addTaskBtn = document.getElementById("addTaskBtn");
    let taskList = document.getElementById("taskList");

    // دالة لإضافة مهمة جديدة
    function addTask() {
        let taskText = taskInput.value.trim();
        if (taskText === "") {
            alert("الرجاء إدخال مهمة صحيحة!");
            return;
        }

        let li = document.createElement("li");
        li.innerHTML = `${taskText} <button class="delete">حذف</button>`;

        taskList.appendChild(li);
        taskInput.value = ""; // مسح الحقل بعد الإضافة

        // إضافة حدث زر الحذف
        li.querySelector(".delete").addEventListener("click", function() {
            li.remove();
        });
    }

    // تنفيذ دالة الإضافة عند الضغط على الزر
    addTaskBtn.addEventListener("click", addTask);

    // تنفيذ دالة الإضافة عند الضغط على زر "Enter"
    taskInput.addEventListener("keypress", function(event) {
        if (event.key === "Enter") {
            addTask();
        }
    });
});

🔍 شرح ملف JavaScript

عند الضغط على زر “حذف”، يتم إزالة المهمة من القائمة.

جلب العناصر من HTML باستخدام getElementById

taskInput: حقل الإدخال.

addTaskBtn: زر إضافة المهام.

taskList: قائمة المهام.

دالة addTask() لإضافة المهام

تقرأ قيمة الإدخال (taskInput).

تتحقق إذا كان الإدخال فارغًا.

تنشئ عنصر <li> جديد يحتوي على المهمة وزر الحذف.

تضيفه إلى القائمة (taskList).

تمسح حقل الإدخال بعد الإضافة.

إضافة حدث للزر (addTaskBtn)

عند الضغط عليه، يتم استدعاء addTask().

إضافة حدث keypress لحقل الإدخال

عند الضغط على Enter يتم تنفيذ addTask() تلقائيًا.

إضافة وظيفة حذف المهام

بعد تشغيل الملفات الثلاثة معًا، ستحصل على تطبيق To-Do List تفاعلي يسمح لك بـ:

  • إضافة مهام جديدة.
  • حذف المهام بسهولة.
  • إدخال المهام عبر الضغط على زر “Enter”.

💡 ماذا يمكن أن نضيف بعد ذلك؟

حفظ المهام في LocalStorage حتى لا تضيع بعد تحديث الصفحة.

إضافة زر “إنهاء المهمة” لتحديد المهام المكتملة.

دعم الوضع الليلي (Dark Mode) لتحسين تجربة المستخدم