آموزش جامع ساخت لیست کارها با جاوااسکریپت

const features = [
  "اضافه کردن کار جدید",
  "علامت زدن کارهای انجام شده",
  "حذف کارها",
  "ذخیره خودکار در localStorage",
  "فیلتر کردن کارها (انجام شده/نشده)"
];

<!-- ساختار اصلی برنامه -->
<div class="todo-container">
  <h1>لیست کارهای من</h1>
  <div class="input-section">
    <input type="text" id="todo-input" placeholder="کار جدید را وارد کنید...">
    <button id="add-btn">اضافه کردن</button>
  </div>
  <div class="filters">
    <button class="filter-btn active" data-filter="all">همه</button>
    <button class="filter-btn" data-filter="completed">انجام شده</button>
    <button class="filter-btn" data-filter="pending">انجام نشده</button>
  </div>
  <ul id="todo-list"></ul>
</div>

.todo-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}
.input-section {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}
#todo-input {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

// متغیرهای اصلی برنامه
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
const filterBtns = document.querySelectorAll('.filter-btn');
// آرایه‌ای برای ذخیره کارها
let todos = JSON.parse(localStorage.getItem('todos')) || [];
// تابع برای ذخیره کارها در localStorage
function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

// تابع برای اضافه کردن کار جدید
function addTodo() {
  const text = todoInput.value.trim();
  if (text === '') return;
  const newTodo = {
    id: Date.now(),
    text,
    completed: false
  };
  todos.push(newTodo);
  saveTodos();
  renderTodos();
  todoInput.value = '';
}
// تابع برای نمایش کارها
function renderTodos() {
  todoList.innerHTML = '';
  todos.forEach(todo => {
    const li = document.createElement('li');
    li.className = todo.completed ? 'completed' : '';
    li.innerHTML = `
      <span class="todo-text">${todo.text}</span>
      <div class="actions">
        <button class="complete-btn" data-id="${todo.id}">
          <i class="fas fa-check"></i>
        </button>
        <button class="delete-btn" data-id="${todo.id}">
          <i class="fas fa-trash"></i>
        </button>
      </div>
    `;
    todoList.appendChild(li);
}

// رویداد کلیک برای دکمه اضافه کردن
addBtn.addEventListener('click', addTodo);
// رویداد کلیک برای لیست کارها (حذف و تکمیل)
todoList.addEventListener('click', (e) => {
  if (e.target.classList.contains('complete-btn')) {
    const id = parseInt(e.target.getAttribute('data-id'));
    toggleComplete(id);
  }
  if (e.target.classList.contains('delete-btn')) {
    const id = parseInt(e.target.getAttribute('data-id'));
    deleteTodo(id);
  }
});

// بارگذاری اولیه کارها
document.addEventListener('DOMContentLoaded', () => {
  renderTodos();
});

const improvements = [
  "ویرایش کارهای موجود",
  "دسته‌بندی کارها با تگ‌ها",
  "تعیین تاریخ برای کارها",
  "امکان جستجو در کارها",
  "رنگ‌بندی کارها بر اساس اولویت"
];