فصل ۱۸: پروژه پایانی — ساخت TODO List با جاوااسکریپت

اموزش رایگان جاوا اسکریپت از مقدماتی تا متوسط

مقدمه

تو این فصل، قراره یک پروژه واقعی با جاوااسکریپت بسازیم:
یک TODO List‌‌ ساده و کاربردی که کاربر می‌تواند کارهایش را وارد کند، حذف کند و وضعیت انجام شدن آنها را علامت بزند.

ــ نکته: همه کدها را به صورت قدم‌به‌قدم همراه با توضیح می‌نویسیم، پس نگران نباش!

۱. طراحی اولیه (HTML پایه)

ابتدا یک فایل HTML ساده بساز (مثلاً با نام todo.html) و این ساختار را داخلش بذار:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>TODO List من</title>
</head>
<body>
  <h1>TODO List من 📝</h1>
  <input id="todo-input" type="text" placeholder="یک کار وارد کن...">
  <button id="add-btn">افزودن</button>
  <ul id="todo-list"></ul>

  <script src="todo.js"></script>
</body>
</html>

توضیح:
ـ یک input برای وارد کردن کار
ـ یک دکمه برای افزودن
ـ یک ul برای نمایش لیست کارها

۲. آماده‌سازی فایل جاوااسکریپت

در کنار فایل HTML، یک فایل به نام todo.js درست کن و آماده باش تا کدها رو اونجا بنویسیم.

۳. دریافت عناصر از DOM

در اولین قدم کدهای زیر رو در فایل جاوااسکریپتت بنویس:

const input = document.getElementById("todo-input");
const addBtn = document.getElementById("add-btn");
const todoList = document.getElementById("todo-list");

۴. افزودن کار جدید به لیست

حالا تابعی بنویس که وقتی دکمه “افزودن” را زدی، متن input وارد لیست شود:

addBtn.addEventListener("click", function() {
  const task = input.value.trim();

  if (task) {
    const li = document.createElement("li");
    li.textContent = task;
    todoList.appendChild(li);
    input.value = "";      // پاک کردن input
    input.focus();         // تمرکز دوباره روی input
  }
});

نکته:
این کد، جلوی افزودن آیتم خالی را می‌گیرد و پس از افزودن، input را پاک می‌کند.

۵. حذف کارها با دابل‌کلیک

برای حذف هر کار، کافی‌ست روی آن دابل‌کلیک کنیم:

todoList.addEventListener("dblclick", function(event) {
  if (event.target.tagName === "LI") {
    event.target.remove();
  }
});

۶. علامت زدن کارهای انجام شده

کد زیر را هم اضافه کن تا با یک کلیک روی هر کار، وضعیت “انجام شد” تغییر کند:

todoList.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("done");
  }
});

و این رو هم به فایل HTMLت تو بخش <head> اضافه کن تا ظاهر کارهای انجام‌شده تغییر کنه:

<style>
  .done {
    text-decoration: line-through;
    color: gray;
  }
</style>

۷. مرحله تمرین و تکمیل

تا همین جا یک TODO List کامل داریم! می‌تونی امتحان کنی:

  • کار اضافه کن
  • کار رو انجام‌شده کن
  • با دابل‌کلیک حذفش کن

۸. ایده برای گسترش (اختیاری)

  • ذخیره TODOها در localStorage
  • فیلتر کردن کارهای انجام‌شده یا انجام‌نشده
  • افزودن دکمه حذف کنار هر آیتم
    و هر ایده‌ای که دوست داری!
محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *