سنبدأ في هذا الدرس بعمل مشروع صغير لتطبيق ما تعلمته في سلسلة JavaScript. المشروع سيكون: "قائمة مهام To-Do List" ، و هو مشروع بسيط وعملي يستخدم HTML, CSS, وJavaScript.
وصف المشروع:
موقع بسيط يسمح للمستخدم بإضافة مهام، حذفها، والتعليم عليها كمكتملة. سيتم حفظ المهام باستخدام localStorage.
الملفات المطلوبة:
index.htmlstyle.cssscript.js
أولاً: ملف 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" />
</head>
<body>
<div class="container">
<h1>قائمة المهام</h1>
<div class="input-group">
<input type="text" id="taskInput" placeholder="أدخل مهمة جديدة..." />
<button id="addTaskBtn">إضافة</button>
</div>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
ثانيًا: ملف CSS - style.css
body {
font-family: 'Arial', sans-serif;
background: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: #fff;
padding: 20px 30px;
border-radius: 10px;
width: 90%;
max-width: 400px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.input-group {
display: flex;
gap: 10px;
}
input {
flex: 1;
padding: 10px;
border: 1px solid #aaa;
border-radius: 5px;
}
button {
padding: 10px 15px;
border: none;
background: #2a9d8f;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #21867a;
}
ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
li {
background: #f8f9fa;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
text-decoration: line-through;
color: #999;
}
ثالثًا: ملف JavaScript - script.js
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskList = document.getElementById("taskList");
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
function renderTasks() {
taskList.innerHTML = "";
tasks.forEach((task, index) => {
const li = document.createElement("li");
li.textContent = task.text;
if (task.completed) li.classList.add("completed");
li.addEventListener("click", () => {
tasks[index].completed = !tasks[index].completed;
saveTasks();
});
const delBtn = document.createElement("button");
delBtn.textContent = "حذف";
delBtn.style.background = "#e76f51";
delBtn.style.color = "#fff";
delBtn.style.border = "none";
delBtn.style.padding = "5px 10px";
delBtn.style.borderRadius = "5px";
delBtn.style.cursor = "pointer";
delBtn.addEventListener("click", (e) => {
e.stopPropagation();
tasks.splice(index, 1);
saveTasks();
});
li.appendChild(delBtn);
taskList.appendChild(li);
});
}
function saveTasks() {
localStorage.setItem("tasks", JSON.stringify(tasks));
renderTasks();
}
addTaskBtn.addEventListener("click", () => {
const taskText = taskInput.value.trim();
if (taskText) {
tasks.push({ text: taskText, completed: false });
taskInput.value = "";
saveTasks();
}
});
renderTasks();
شرح طريقة التشغيل:
- أنشئ مجلد مثلًا باسم
todo-app. - بداخله أنشئ ثلاث ملفات:
index.htmlstyle.cssscript.js
- افتح
index.htmlفي المتصفح وسترى تطبيقك يعمل. - يمكنك كتابة مهام، حذفها، أو تعليمها كمكتملة. وكل شيء محفوظ في
localStorage.
