script.js

class ToDoList {
  constructor() {
    this.tasks = [];
    this.nextId = 1;
    this.init();
  }

  init() {
    this.taskInput = document.getElementById('task-input');
    this.addTaskBtn = document.getElementById('add-task-btn');
    this.tasksContainer = document.getElementById('tasks-container');
    this.emptyState = document.getElementById('empty-state');

    this.totalCountEl = document.getElementById('total-count');
    this.completedCountEl = document.getElementById('completed-count');
    this.progressPercentageEl = document.getElementById('progress-percentage');
    this.progressFillEl = document.getElementById('progress-fill');

    this.attachEventListeners();
    this.renderTasks();
    this.updateStats();
  }

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

  addTask() {
    const taskText = this.taskInput.value.trim();
    if (!taskText) return;

    const task = {
      id: this.nextId++,
      text: taskText,
      completed: false,
      createdAt: new Date().toLocaleDateString(),
      priority: Math.random() > 0.7 ? 'high' : 'normal'
    };
    this.tasks.push(task);
    this.taskInput.value = '';
    this.renderTasks();
    this.updateStats();
  }

  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.completed = !task.completed;
      this.renderTasks();
      this.updateStats();
    }
  }

  deleteTask(id) {
    this.tasks = this.tasks.filter(t => t.id !== id);
    this.renderTasks();
    this.updateStats();
  }

  renderTasks() {
    if (this.tasks.length === 0) {
      this.emptyState.style.display = 'block';
      this.tasksContainer.innerHTML = '';
      return;
    }

    this.emptyState.style.display = 'none';

    const tasksHTML = this.tasks.map((task, index) => `
      <div class="task-item ${task.completed ? 'completed' : ''}" style="animation-delay:${index*100}ms">
        <div class="task-checkbox ${task.completed ? 'completed' : ''}" onclick="app.toggleTask(${task.id})">
          ${task.completed ? '<span class="icon-checkmark"></span>' : ''}
        </div>
        <div class="task-content">
          <div class="task-text ${task.completed ? 'completed' : ''}">${task.text}</div>
          <div class="task-meta">
            <span class="task-date">${task.createdAt}</span>
            ${task.priority === 'high' ? '<span class="priority-badge">High Priority</span>' : ''}
          </div>
        </div>
        <button class="delete-btn" onclick="app.deleteTask(${task.id})">
          <span class="icon-trash"></span>
        </button>
      </div>
    `).join('');

    this.tasksContainer.innerHTML = tasksHTML;
  }

  updateStats() {
    const total = this.tasks.length;
    const completed = this.tasks.filter(t => t.completed).length;
    const progress = total ? Math.round((completed / total) * 100) : 0;

    this.totalCountEl.textContent = total;
    this.completedCountEl.textContent = completed;
    this.progressPercentageEl.textContent = `${progress}%`;
    this.progressFillEl.style.width = `${progress}%`;
  }
}

const app = new ToDoList();


const body = document.body;
const themeToggleBtn = document.getElementById("theme-toggle");

if (body.getAttribute("data-theme") === "dark") {
  themeToggleBtn.textContent = "🌙 Dark Mode";
} else {
  themeToggleBtn.textContent = "☀️ Light Mode";
}

themeToggleBtn.addEventListener("click", () => {
  const currentTheme = body.getAttribute("data-theme");
  if (currentTheme === "dark") {
    body.setAttribute("data-theme", "light");
     themeToggleBtn.textContent = "☀️ Light Mode";
  } else {
    body.setAttribute("data-theme", "dark");
      themeToggleBtn.textContent = "🌙 Dark Mode";
  }
});