script.js

class SimpleChecklist {
      constructor() {
        this.tasks = [];
        this.taskInput = document.getElementById('taskInput');
        this.tasksContainer = document.getElementById('tasksContainer');
        this.emptyState = document.getElementById('emptyState');
        this.taskCount = document.getElementById('taskCount');
        
        this.init();
      }

      async init() {
        await this.loadTasks();
        this.setupEventListeners();
        this.render();
      }

      setupEventListeners() {
        // Add task on Enter key
        this.taskInput.addEventListener('keypress', (e) => {
          if (e.key === 'Enter' && this.taskInput.value.trim()) {
            this.addTask(this.taskInput.value.trim());
            this.taskInput.value = '';
          }
        });

        // Focus input when popup opens
        this.taskInput.focus();
      }

      async loadTasks() {
        try {
          const result = await chrome.storage.local.get('tasks');
          this.tasks = result.tasks || [];
        } catch (error) {
          console.error('Error loading tasks:', error);
          this.tasks = [];
        }
      }

      async saveTasks() {
        try {
          await chrome.storage.local.set({ tasks: this.tasks });
        } catch (error) {
          console.error('Error saving tasks:', error);
        }
      }

      addTask(text) {
        const task = {
          id: Date.now(),
          text: text,
          completed: false,
          createdAt: new Date().toISOString()
        };
        
        this.tasks.unshift(task);
        this.saveTasks();
        this.render();
      }

      toggleTask(id) {
        const taskElement = document.querySelector(`[data-task-id="${id}"]`);
        const task = this.tasks.find(t => t.id === id);
        
        if (task && taskElement) {
          task.completed = !task.completed;
          
          if (task.completed) {
            // Add celebration animation
            taskElement.classList.add('completing');
            this.showCelebration();
            
            // Remove animation class after animation completes
            setTimeout(() => {
              taskElement.classList.remove('completing');
            }, 500);
          }
          
          this.saveTasks();
          this.render();
        }
      }

      deleteTask(id) {
        this.tasks = this.tasks.filter(t => t.id !== id);
        this.saveTasks();
        this.render();
      }

      render() {
        // Clear container
        this.tasksContainer.innerHTML = '';

        if (this.tasks.length === 0) {
          this.tasksContainer.appendChild(this.emptyState);
        } else {
          this.tasks.forEach(task => {
            const taskElement = this.createTaskElement(task);
            this.tasksContainer.appendChild(taskElement);
          });
        }

        this.updateProgress();
      }

      updateProgress() {
        const completedCount = this.tasks.filter(t => t.completed).length;
        const totalCount = this.tasks.length;
        const progressBar = document.getElementById('progressBar');
        
        // Update progress bar
        const percentage = totalCount === 0 ? 0 : (completedCount / totalCount) * 100;
        progressBar.style.width = `${percentage}%`;

        // Update task count with motivational messages
        if (totalCount === 0) {
          this.taskCount.innerHTML = '<span>Ready to start</span><span>💪</span>';
        } else if (completedCount === 0) {
          this.taskCount.innerHTML = `<span>${totalCount} tasks to conquer</span><span>🎯</span>`;
        } else if (completedCount === totalCount) {
          this.taskCount.innerHTML = '<span>All done! You\'re amazing!</span><span>🎉</span>';
        } else {
          const remaining = totalCount - completedCount;
          this.taskCount.innerHTML = `<span>${completedCount}/${totalCount} done • ${remaining} to go</span><span>🔥</span>`;
        }
      }

      showCelebration() {
        const celebrations = ['🎉', '✨', '🚀', '💪', '🔥', '⭐', '🎊', '👏', '🏆', '💎'];
        const emoji = celebrations[Math.floor(Math.random() * celebrations.length)];
        
        // Main celebration emoji
        const celebrationElement = document.createElement('div');
        celebrationElement.className = 'celebration';
        celebrationElement.textContent = emoji;
        document.body.appendChild(celebrationElement);
        
        // Create confetti burst
        this.createConfettiBurst();
        
        // Remove celebration after animation
        setTimeout(() => {
          if (document.body.contains(celebrationElement)) {
            document.body.removeChild(celebrationElement);
          }
        }, 1200);
      }

      createConfettiBurst() {
        const burstContainer = document.createElement('div');
        burstContainer.className = 'celebration-burst';
        document.body.appendChild(burstContainer);

        const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#4facfe', '#00f2fe', '#43e97b', '#38f9d7'];
        
        // Create multiple confetti pieces
        for (let i = 0; i < 12; i++) {
          const confetti = document.createElement('div');
          confetti.className = 'confetti';
          confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
          
          // Random positioning around the center
          const angle = (i * 30) + (Math.random() * 20 - 10); // Spread evenly with some randomness
          const distance = 30 + Math.random() * 20;
          const x = Math.cos(angle * Math.PI / 180) * distance;
          const y = Math.sin(angle * Math.PI / 180) * distance;
          
          confetti.style.left = `${x}px`;
          confetti.style.top = `${y}px`;
          confetti.style.animationDelay = `${Math.random() * 0.3}s`;
          
          // Random shapes
          if (Math.random() > 0.5) {
            confetti.style.borderRadius = '50%';
          } else {
            confetti.style.transform += ` rotate(${Math.random() * 360}deg)`;
          }
          
          burstContainer.appendChild(confetti);
        }

        // Remove burst container after animation
        setTimeout(() => {
          if (document.body.contains(burstContainer)) {
            document.body.removeChild(burstContainer);
          }
        }, 1000);
      }

      createTaskElement(task) {
        const taskItem = document.createElement('div');
        taskItem.className = 'task-item';
        taskItem.setAttribute('data-task-id', task.id);
        
        taskItem.innerHTML = `
          <input 
            type="checkbox" 
            class="task-checkbox" 
            ${task.completed ? 'checked' : ''}
          >
          <span class="task-text ${task.completed ? 'completed' : ''}">${this.escapeHtml(task.text)}</span>
          <button class="task-delete" title="Delete task">×</button>
        `;

        // Add event listeners
        const checkbox = taskItem.querySelector('.task-checkbox');
        const textSpan = taskItem.querySelector('.task-text');
        const deleteBtn = taskItem.querySelector('.task-delete');

        checkbox.addEventListener('change', () => this.toggleTask(task.id));
        textSpan.addEventListener('click', () => this.toggleTask(task.id));
        deleteBtn.addEventListener('click', (e) => {
          e.stopPropagation();
          this.deleteTask(task.id);
        });

        return taskItem;
      }

      escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
      }
    }

    // Initialize the checklist when popup opens
    document.addEventListener('DOMContentLoaded', () => {
      new SimpleChecklist();
    });