پروژه نهایی: اپلیکیشن لیست کارها 📝✅

// ۱. گرفتن المنت‌های HTML
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const taskList = document.getElementById('task-list');

// ۲. تابع برای اضافه کردن کار
function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText === "") {
    alert("لطفاً یه چیزی بنویس!");
    return;
  }

  // ساختن آیتم لیست
  const li = document.createElement('li');
  li.className = 'task-item flex items-center justify-between bg-muted/50 p-3 rounded-lg';
  li.innerHTML = `
    <span>${taskText}</span>
    <div class="flex gap-2">
        <button class="text-green-500 hover:text-green-700 complete-btn"><i class="fas fa-check"></i></button>
        <button class="text-red-500 hover:text-red-700 delete-btn"><i class="fas fa-trash"></i></button>
    </div>
  `;
  
  taskList.appendChild(li);

  // اضافه کردن رویدادها به دکمه‌های جدید
  li.querySelector('.complete-btn').addEventListener('click', () => {
    li.classList.toggle('completed');
  });
  li.querySelector('.delete-btn').addEventListener('click', () => {
    taskList.removeChild(li);
  });

  taskInput.value = "";
  taskInput.focus();
}

// ۳. اضافه کردن رویدادها به دکمه اصلی و اینپوت
addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (event) => {
  if (event.key === 'Enter') {
    addTask();
  }
});