پروژه: ساخت Todo List کامل

معرفی پروژه

در این پروژه، همه آموخته‌های این دوره را در یک اپلیکیشن واقعی لیست کارها (Todo List) به کار می‌بندیم. این پروژه شامل:

• افزودن، حذف و ویرایش کارها
• علامت‌گذاری کارهای انجام‌شده
• فیلتر (همه / در انتظار / انجام‌شده)
• ذخیره در localStorage (ماندگاری داده)
• شمارنده کارهای باقی‌مانده

ساختار HTML

<div class="todo-app">
    <h1>📋 لیست کارهای من</h1>

    <!-- فرم افزودن -->
    <form id="todoForm">
        <input id="todoInput" placeholder="کار جدید...">
        <button type="submit">افزودن</button>
    </form>

    <!-- فیلترها -->
    <div class="filters">
        <button data-filter="all" class="active">همه</button>
        <button data-filter="pending">در انتظار</button>
        <button data-filter="done">انجام‌شده</button>
    </div>

    <!-- لیست -->
    <ul id="todoList"></ul>

    <p id="todoCount"></p>
</div>

مرحله ۱: مدل داده

// هر کار (todo) این ساختار را دارد:
// { id: عدد یکتا, text: متن کار, done: true/false }

var todos = [];

// بارگذاری از localStorage
function loadTodos() {
    var saved = localStorage.getItem("todos");
    todos = saved ? JSON.parse(saved) : [];
}

// ذخیره در localStorage
function saveTodos() {
    localStorage.setItem("todos", JSON.stringify(todos));
}

مرحله ۲: رندر لیست

function renderTodos() {
    var $list = $("#todoList");
    var filter = $(".filters .active").data("filter");
    var html = "";

    $.each(todos, function(i, todo) {
        // اعمال فیلتر
        if (filter === "pending" && todo.done) return;
        if (filter === "done" && !todo.done) return;

        html += '<li data-id="' + todo.id + '" class="' +
                (todo.done ? "completed" : "") + '">' +
                '<span class="text">' + todo.text + '</span>' +
                '<button class="toggle">' + (todo.done ? "↩" : "✓") + '</button>' +
                '<button class="delete">✕</button>' +
                '</li>';
    });

    $list.html(html);  // رندر دسته‌ای (بهینه)
    updateCount();
}

مرحله ۳: افزودن کار

$("#todoForm").submit(function(e) {
    e.preventDefault();

    var text = $("#todoInput").val().trim();
    if (!text) return;

    todos.push({
        id: Date.now(),      // شناسه یکتا
        text: text,
        done: false
    });

    saveTodos();
    renderTodos();
    $("#todoInput").val("").focus();
});

مرحله ۴: تفویض رویداد برای toggle و حذف

// چون liها داینامیک ساخته می‌شوند، تفویض رویداد لازم است
$("#todoList").on("click", ".toggle", function() {
    var id = $(this).closest("li").data("id");

    // پیدا کردن و تغییر وضعیت کار
    $.each(todos, function(i, todo) {
        if (todo.id === id) todo.done = !todo.done;
    });

    saveTodos();
    renderTodos();
});

$("#todoList").on("click", ".delete", function() {
    var id = $(this).closest("li").data("id");
    var $li = $(this).closest("li");

    // حذف نرم با انیمیشن
    $li.fadeOut(300, function() {
        todos = todos.filter(function(todo) {
            return todo.id !== id;
        });
        saveTodos();
        renderTodos();
    });
});

مرحله ۵: فیلترها

$(".filters button").click(function() {
    $(this).addClass("active").siblings().removeClass("active");
    renderTodos();
});

مرحله ۶: شمارنده

function updateCount() {
    var remaining = todos.filter(function(t) { return !t.done; }).length;
    $("#todoCount").text(remaining + " کار باقی مانده");
}

مفاهیم به‌کاررفته از دوره

جمع‌بندی دوره

تبریک! 🎉 شما حالا jQuery را از صفر تا پروژه واقعی یاد گرفتید. مسیر پیشنهادی ادامه:

• جاوااسکریپت پیشرفته: ES6+، async/await، ماژول‌ها
• fetch API: جایگزین مدرن برای AJAX
• فریمورک‌ها: Vue.js یا React برای اپلیکیشن‌های بزرگ