پروژه ۱: لیست کارها با TypeScript

// تعریف شکل یک "کار"
interface Task {
  id: string;
  text: string;
  completed: boolean;
}

// گرفتن عناصر DOM با Type Assertion
const taskInput = document.getElementById('task-input') as HTMLInputElement;
const addTaskBtn = document.getElementById('add-task-btn') as HTMLButtonElement;
const taskList = document.getElementById('task-list') as HTMLUListElement;

// آرایه‌ای برای نگهداری کارها
let tasks: Task[] = [];

function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText === "") return;

  const newTask: Task = {
    id: Date.now().toString(),
    text: taskText,
    completed: false,
  };
  
  tasks.push(newTask);
  renderTasks();
  
  taskInput.value = "";
  taskInput.focus();
}

function renderTasks() {
    taskList.innerHTML = "";
    tasks.forEach(task => {
        const li = document.createElement('li');
        li.className = `task-item flex items-center justify-between p-3 rounded-lg ${task.completed ? 'bg-green-100 dark:bg-green-900/30' : 'bg-muted/50'}`;
        
        li.innerHTML = `
            <span class="${task.completed ? 'line-through text-muted-foreground' : ''}">${task.text}</span>
            <div class="flex gap-2">
                <button class="text-green-500 complete-btn"><i class="fas fa-check"></i></button>
                <button class="text-red-500 delete-btn"><i class="fas fa-trash"></i></button>
            </div>
        `;

        li.querySelector('.complete-btn')?.addEventListener('click', () => {
            task.completed = !task.completed;
            renderTasks();
        });

        li.querySelector('.delete-btn')?.addEventListener('click', () => {
            tasks = tasks.filter(t => t.id !== task.id);
            renderTasks();
        });
        
        taskList.appendChild(li);
    });
}

addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTask();
});