script.js

// Utility functions
function formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

document.addEventListener('DOMContentLoaded', function() {
// DOM Elements
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskModal = document.getElementById('taskModal');
    const closeModalBtn = document.getElementById('closeModalBtn');
    const taskForm = document.getElementById('taskForm');
    const tasksContainer = document.querySelector('.grid');
    
    // Sample tasks data
    let tasks = [
        {
            id: 1,
            name: 'Configure Modem Settings',
            description: 'Update the modem firmware and configure security settings',
            priority: 'high',
            completed: false,
            date: new Date()
        },
        {
            id: 2,
            name: 'Check Network Speed',
            description: 'Run speed tests at different times of day',
            priority: 'medium',
            completed: false,
            date: new Date()
        },
        {
            id: 3,
            name: 'Document Configuration',
            description: 'Create documentation for current modem setup',
            priority: 'low',
            completed: true,
            date: new Date()
        }
    ];

    // Event Listeners
    addTaskBtn.addEventListener('click', openModal);
    closeModalBtn.addEventListener('click', closeModal);
    taskForm.addEventListener('submit', handleTaskSubmit);

    // Render initial tasks
    renderTasks();

    // Functions
    function openModal() {
        taskModal.classList.remove('hidden');
    }

    function closeModal() {
        taskModal.classList.add('hidden');
    }

    function handleTaskSubmit(e) {
        e.preventDefault();
        
        const taskName = document.getElementById('taskName').value;
        const taskDescription = document.getElementById('taskDescription').value;
        const taskPriority = document.getElementById('taskPriority').value;
        
        const newTask = {
            id: Date.now(),
            name: taskName,
            description: taskDescription,
            priority: taskPriority,
            completed: false,
            date: new Date()
        };
        
        tasks.unshift(newTask);
        renderTasks();
        closeModal();
        taskForm.reset();
    }

    function renderTasks() {
        tasksContainer.innerHTML = '';
        
        tasks.forEach(task => {
            const taskCard = document.createElement('div');
            taskCard.className = `task-card bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 ${task.priority}-priority ${task.completed ? 'completed' : ''}`;
            
            taskCard.innerHTML = `
                <div class="flex justify-between items-start mb-2">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">${task.name}</h3>
                    <span class="text-xs px-2 py-1 rounded-full ${getPriorityClass(task.priority)}">
                        ${task.priority}
                    </span>
                </div>
                <p class="text-gray-600 dark:text-gray-300 mb-4">${task.description}</p>
                <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
                    <span>${formatDate(task.date)}</span>
                    <div class="flex gap-2">
                        <button class="task-complete-btn p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700" data-id="${task.id}">
                            <i data-feather="${task.completed ? 'check-circle' : 'circle'}" class="${task.completed ? 'text-green-500' : 'text-gray-400'}"></i>
                        </button>
                        <button class="task-delete-btn p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700" data-id="${task.id}">
                            <i data-feather="trash-2" class="text-red-400"></i>
                        </button>
                    </div>
                </div>
            `;
            
            tasksContainer.appendChild(taskCard);
        });
        
        // Add event listeners to new buttons
        document.querySelectorAll('.task-complete-btn').forEach(btn => {
            btn.addEventListener('click', toggleTaskComplete);
        });
        
        document.querySelectorAll('.task-delete-btn').forEach(btn => {
            btn.addEventListener('click', deleteTask);
        });
        
        feather.replace();
    }

    function toggleTaskComplete(e) {
        const taskId = parseInt(e.currentTarget.getAttribute('data-id'));
        const taskIndex = tasks.findIndex(task => task.id === taskId);
        
        if (taskIndex !== -1) {
            tasks[taskIndex].completed = !tasks[taskIndex].completed;
            renderTasks();
        }
    }

    function deleteTask(e) {
        const taskId = parseInt(e.currentTarget.getAttribute('data-id'));
        tasks = tasks.filter(task => task.id !== taskId);
        renderTasks();
    }

    function getPriorityClass(priority) {
        switch(priority) {
            case 'high': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
            case 'medium': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
            case 'low': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
            default: return '';
        }
    }

    function formatDate(date) {
        return new Date(date).toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
            year: 'numeric'
        });
    }
});