MATIN MOLKARA
SERIES: JavaScript — PART 30 OF 108

30- آموزش جاوااسکریپت | پروژه عملی: ساخت اپلیکیشن لیست وظایف (Task List)

در این آموزش، با استفاده از جاوااسکریپت خالص (Vanilla JS) یک اپلیکیشن لیست وظایف (Task List) کاربردی می‌سازیم. این پروژه شامل پیاده‌سازی رابط کاربری، افزودن و حذف وظایف، قابلیت فیلتر کردن لیست و در نهایت حفظ دائمی داده‌ها با استفاده از LocalStorage است.

در این بخش قصد داریم پروژه‌ای بسازیم که تمامی مباحث آموخته شده در بخش‌های قبل (مانند DOM، رویدادها و LocalStorage) را در قالب یک اپلیکیشن واقعی به کار بگیریم.

۱. راه‌اندازی ساختار HTML

ابتدا ساختار فایل index.html را آماده می‌کنیم. برای استایل‌دهی سریع، از کتابخانه Materialize CSS استفاده می‌کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <title>Task List</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col s12">
                <div id="main" class="card">
                    <div class="card-content">
                        <span class="card-title">Task List</span>
                        <div class="row">
                            <form id="task-form">
                                <div class="input-field col s12">
                                    <input type="text" name="task" id="task">
                                    <label for="task">New Task</label>
                                </div>
                                <input type="submit" value="Add Task" class="btn">
                            </form>
                        </div>
                    </div>
                    <div class="card-action">
                        <input type="text" id="filter" placeholder="Filter Tasks...">
                        <ul class="collection"></ul>
                        <a href="#" class="clear-tasks btn black">Clear Tasks</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

۲. انتخاب متغیرهای UI

در فایل app.js، ابتدا به عناصر مورد نیاز دسترسی پیدا می‌کنیم:

const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');

۳. افزودن وظیفه (Task) به لیست

برای افزودن وظیفه جدید، ابتدا رفتار پیش‌فرض فرم (ارسال) را متوقف کرده و سپس یک عنصر li به صورت پویا ایجاد می‌کنیم:

form.addEventListener('submit', function(e) {
    if(taskInput.value === '') {
        alert('Add a task');
        return;
    }

    // ایجاد li
    const li = document.createElement('li');
    li.className = 'collection-item';
    li.appendChild(document.createTextNode(taskInput.value));

    // ایجاد لینک حذف
    const link = document.createElement('a');
    link.className = 'delete-item secondary-content';
    link.innerHTML = '<i class="fa fa-remove"></i>';
    
    li.appendChild(link);
    taskList.appendChild(li);

    // ذخیره در LocalStorage (بعداً پیاده‌سازی می‌شود)
    storeTaskInLocalStorage(taskInput.value);

    taskInput.value = '';
    e.preventDefault();
});

۴. حذف و فیلتر کردن وظایف

از Event Delegation برای حذف آیتم‌ها استفاده می‌کنیم، زیرا آیتم‌ها به صورت داینامیک اضافه می‌شوند.

// حذف وظیفه
taskList.addEventListener('click', function(e) {
    if(e.target.parentElement.classList.contains('delete-item')) {
        if(confirm('Are you sure?')) {
            e.target.parentElement.parentElement.remove();
        }
    }
});

// فیلتر کردن وظایف
filter.addEventListener('keyup', function(e) {
    const text = e.target.value.toLowerCase();
    document.querySelectorAll('.collection-item').forEach(function(task) {
        const item = task.firstChild.textContent;
        if(item.toLowerCase().indexOf(text) != -1) {
            task.style.display = 'block';
        } else {
            task.style.display = 'none';
        }
    });
});

۵. ذخیره‌سازی دائمی (LocalStorage)

برای اینکه با رفرش صفحه اطلاعات از بین نرود، از LocalStorage استفاده می‌کنیم.

// ذخیره وظیفه در LocalStorage
function storeTaskInLocalStorage(task) {
    let tasks;
    if(localStorage.getItem('tasks') === null) {
        tasks = [];
    } else {
        tasks = JSON.parse(localStorage.getItem('tasks'));
    }
    tasks.push(task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// بارگذاری وظایف هنگام باز شدن صفحه
document.addEventListener('DOMContentLoaded', function() {
    let tasks;
    if(localStorage.getItem('tasks') !== null) {
        tasks = JSON.parse(localStorage.getItem('tasks'));
        tasks.forEach(function(task) {
            // کدهای ایجاد li (مشابه بخش ۳) را اینجا تکرار کنید
        });
    }
});

6. پاک سازی دائمی آیتم حذف شده از (LocalStorage)

برای اینکه با رفرش صفحه اطلاعات پاک شده از LocalStorage برنگردد ، میتوانیم در هنگام حذف المنت از UI این سه خط کد را به ادامه اضافه کنیم

//روش دیگری برای پیدا کردن المنتی که قرار است حذف شود
const taskItem = e.target.closest('.task-item');
//گرفتن متن درون آیتم مورد نظر
 const taskText = taskItem.textContent.trim();
//بازیابی لوکال استوریج

const taskStorage = JSON.parse(localStorage.getItem('tasks')) || [];
//ذخیره دوباره لوکال استوریج بدون آیتم مورد نظر به کمک متد فیلتر

 const updatedTasks = taskStorage.filter(task => task !== taskText);

//ذخیره لیست جدید تسک ها در لوکال استوریج
localStorage.setItem('tasks', JSON.stringify(updatedTasks));

با این ساختار، شما یک اپلیکیشن کامل دارید که عملیات CRUD (ایجاد، خواندن، حذف) را به طور کامل مدیریت می‌کند.

// 0 comments
#جاوااسکریپت#اپلیکیشن TaskList#پروژه جاوااسکریپت#Vanilla JS#LocalStorage#برنامه نویسی فرانت اند#DOM

نظرات (0)

نظر خود را بنویسید