كيفية بناء أول تطبيق ويب باستخدام JavaScript وحفظ المهام في ملف JSON

Amine

11/09/2024

في هذا الدليل، سنتعلم كيفية بناء تطبيق ويب بسيط لإدارة قائمة المهام (To-Do List) باستخدام HTML وCSS وJavaScript. كما سنضيف ميزة لحفظ المهام في ملف JSON، مما يسمح لك بحفظ المهام واستعادتها لاحقًا.

الخطوة 1: إنشاء هيكل HTML الأساسي

نبدأ بإنشاء ملف 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"> 
</head>
<body>
    <h1>قائمة المهام</h1>
    <input type="text" id="taskInput" placeholder="أدخل المهمة">
    <button onclick="addTask()">إضافة مهمة</button>
    <ul id="taskList"></ul>
    <button onclick="saveTasks()">حفظ المهام</button>
    <button onclick="loadTasks()">تحميل المهام</button>
    <script src="app.js"></script>
</body>
</html>

الخطوة 2: إضافة CSS لتنسيق التطبيق

نحتاج إلى تنسيق العناصر بشكل بسيط ومرتب لجعل واجهة التطبيق جذابة وسهلة الاستخدام. إليك الكود الخاص بملف CSS:

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
h1 {
    color: #333;
}
input {
    padding: 8px;
    width: 200px;
    margin-right: 10px;
}
button {
    padding: 8px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #218838;
}
ul {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}
li {
    margin: 10px 0;
    padding: 10px;
    background-color: #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
li button {
    background-color: #dc3545;
}
li button:hover {
    background-color: #c82333;
}

الخطوة 3: كتابة كود JavaScript للتفاعل

نحتاج الآن إلى إضافة بعض التفاعلات باستخدام JavaScript، مثل إضافة المهام، حذفها، وحفظها في ملف JSON. إليك الكود الخاص بـ JavaScript:

// app.js
// إنشاء مصفوفة لحفظ المهام
let tasks = [];
// دالة لإضافة مهمة جديدة
function addTask() {
    let taskInput = document.getElementById("taskInput");
    let task = taskInput.value;
    if (task !== "") {
        tasks.push(task); // إضافة المهمة إلى المصفوفة
        updateTaskList(); // تحديث قائمة المهام
        taskInput.value = ""; // مسح الحقل
    }
}
// دالة لتحديث قائمة المهام في واجهة المستخدم
function updateTaskList() {
    let taskList = document.getElementById("taskList");
    taskList.innerHTML = ""; // مسح القائمة القديمة
    tasks.forEach((task, index) => {
        let li = document.createElement("li");
        li.textContent = task;
        // زر لحذف المهمة
        let deleteButton = document.createElement("button");
        deleteButton.textContent = "حذف";
        deleteButton.onclick = function() {
            removeTask(index);
        };
        li.appendChild(deleteButton); // إضافة زر الحذف
        taskList.appendChild(li); // إضافة المهمة إلى القائمة
    });
}
// دالة لحذف المهمة من المصفوفة
function removeTask(index) {
    tasks.splice(index, 1); // حذف المهمة
    updateTaskList(); // تحديث القائمة
}
// دالة لحفظ المهام في ملف JSON
function saveTasks() {
    let jsonTasks = JSON.stringify(tasks); // تحويل المصفوفة إلى JSON
    let blob = new Blob([jsonTasks], { type: "application/json" });
    let link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "tasks.json"; // اسم الملف
    link.click(); // تنزيل الملف
}
// دالة لتحميل المهام من ملف JSON
function loadTasks() {
    let input = document.createElement("input");
    input.type = "file";
    input.accept = ".json";
    input.onchange = function(event) {
        let file = event.target.files[0];
        let reader = new FileReader();
        reader.onload = function(e) {
            tasks = JSON.parse(e.target.result); // تحميل المهام
            updateTaskList(); // تحديث القائمة
        };
        reader.readAsText(file);
    };
    input.click(); // فتح نافذة تحميل الملف
}

Download from Github

شرح الكود

الآن سنشرح كل جزء من الكود:

مصفوفة المهام: هي مصفوفة tasks التي نستخدمها لتخزين جميع المهام التي يتم إدخالها.
دالة addTask(): هذه الدالة تقوم بإضافة مهمة جديدة إلى المصفوفة وتحديث واجهة المستخدم لعرض المهمة الجديدة.
دالة updateTaskList(): تقوم هذه الدالة بتحديث واجهة المستخدم عن طريق مسح القائمة القديمة ثم إنشاء عناصر <li> جديدة لكل مهمة.
دالة removeTask(index): تحذف المهمة من المصفوفة باستخدام فهرسها وتحديث القائمة.
دالة saveTasks(): تقوم بتحويل المصفوفة إلى سلسلة JSON ثم إنشاء ملف Blob وتنزيله كملف tasks.json.
دالة loadTasks(): تتيح للمستخدم تحميل ملف JSON واستعادة المهام المحفوظة.

النتيجة

الخلاصة

تهانينا! لقد قمت ببناء تطبيق ويب بسيط باستخدام JavaScript لحفظ المهام في ملف JSON وتحميلها. يمكنك تحسين هذا التطبيق بإضافة المزيد من الميزات مثل التعديل على المهام أو تنظيمها.

#HTML وCSS وجافا سكريبت #بناء تطبيق ويب #تطبيق ويب باستخدام JavaScript #تطوير تطبيق ويب بسيط #تعلم JavaScript للمبتدئين #تعليم البرمجة #حفظ المهام JSON #قائمة المهام JavaScript

شارك المقال:

القائمة

التصنيفات