To do app




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern To-Do List</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="stars-container"></div>
        <header>
            <h1>My Tasks</h1>
            <div class="theme-toggle">
                <i class="fas fa-moon"></i>
                <i class="fas fa-sun"></i>
            </div>
        </header>

        <div class="todo-app">
            <div class="todo-input">
                <input type="text" id="task-input" placeholder="Add a new task...">
                <button id="add-task">
                    <i class="fas fa-plus"></i>
                </button>
            </div>

            <div class="todo-filters">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="active">Active</button>
                <button class="filter-btn" data-filter="completed">Completed</button>
            </div>

            <div class="todo-stats">
                <span id="tasks-count">0 tasks left</span>
                <button id="clear-completed">Clear Completed</button>
            </div>

            <ul class="todo-list" id="todo-list">
                <!-- Tasks will be added here dynamically -->
            </ul>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>


:root {
    --primary-color: #4a6bff;
    --secondary-color: #3a56d4;
    --accent-color: #ff6b6b;
    --success-color: #4caf50;
    --text-color: #2c3e50;
    --light-text: #7f8c8d;
    --background: #f5f7fa;
    --card-bg: #ffffff;
    --border-color: #e1e8ed;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --primary-color: #5c7cff;
    --secondary-color: #4a6bff;
    --accent-color: #ff7676;
    --success-color: #66bb6a;
    --text-color: #ecf0f1;
    --light-text: #bdc3c7;
    --background: #0a0a0f;
    --card-bg: #121212;
    --border-color: #2a2a2a;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --hover-bg: #1a1a1a;
    --glow-effect: 0 0 15px rgba(92, 124, 255, 0.3);
}

/* Dark Theme Background */
[data-theme="dark"] body {
    background: linear-gradient(135deg, #0a0a0f 0%, #121212 100%);
    min-height: 100vh;
}

[data-theme="dark"] .container {
    position: relative;
}

[data-theme="dark"] .container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(92, 124, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

[data-theme="dark"] .todo-app {
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow), 0 0 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .todo-item {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
}

[data-theme="dark"] .todo-item:hover {
    background: rgba(30, 30, 30, 0.9);
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(92, 124, 255, 0.2);
}

[data-theme="dark"] #task-input {
    background: rgba(26, 26, 26, 0.8);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    backdrop-filter: blur(5px);
}

[data-theme="dark"] .filter-btn {
    background: rgba(26, 26, 26, 0.8);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
}

[data-theme="dark"] .filter-btn:hover {
    background: rgba(30, 30, 30, 0.9);
}

[data-theme="dark"] .theme-toggle {
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(5px);
}

/* Enhanced Dark Theme Animations */
[data-theme="dark"] .todo-item {
    animation: darkGlow 3s infinite;
}

@keyframes darkGlow {
    0% {
        box-shadow: 0 0 5px rgba(92, 124, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 15px rgba(92, 124, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 5px rgba(92, 124, 255, 0.1);
    }
}

/* Smooth Scrolling */
[data-theme="dark"] .todo-list {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--card-bg);
}

[data-theme="dark"] .todo-list::-webkit-scrollbar {
    width: 6px;
}

[data-theme="dark"] .todo-list::-webkit-scrollbar-track {
    background: var(--card-bg);
}

[data-theme="dark"] .todo-list::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 3px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--background);
    color: var(--text-color);
    transition: var(--transition);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.container {
    width: 100%;
    max-width: 600px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.theme-toggle {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: var(--border-color);
}

.theme-toggle i {
    font-size: 1.2rem;
    color: var(--text-color);
}

.todo-app {
    background: var(--card-bg);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow);
}

.todo-input {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

#task-input {
    flex: 1;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text-color);
    transition: var(--transition);
}

#task-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

#add-task {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

#add-task:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.todo-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    transition: var(--transition);
}

.filter-btn:hover {
    background: var(--primary-color);
    color: white;
}

.filter-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.todo-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    color: var(--light-text);
    font-size: 0.9rem;
}

#clear-completed {
    background: none;
    border: none;
    color: var(--light-text);
    cursor: pointer;
    transition: var(--transition);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

#clear-completed:hover {
    color: var(--accent-color);
    background: rgba(255, 107, 107, 0.1);
}

.todo-list {
    list-style: none;
}

.todo-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition);
    background: var(--card-bg);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-item:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow);
}

.todo-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.todo-text {
    flex: 1;
    font-size: 1rem;
    color: var(--text-color);
}

.todo-text.completed {
    text-decoration: line-through;
    color: var(--light-text);
}

.todo-delete {
    background: none;
    border: none;
    color: var(--light-text);
    cursor: pointer;
    transition: var(--transition);
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.todo-delete:hover {
    color: var(--accent-color);
    background: rgba(255, 107, 107, 0.1);
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.todo-item {
    animation: slideIn 0.3s ease forwards;
}

/* Responsive Design */
@media (max-width: 480px) {
    body {
        padding: 1rem;
    }

    .todo-app {
        padding: 1.5rem;
    }

    h1 {
        font-size: 2rem;
    }

    .todo-filters {
        flex-wrap: wrap;
    }

    .filter-btn {
        flex: 1;
        min-width: 80px;
    }
}

/* Smooth Theme Transition */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
}

.todo-app {
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.todo-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stars Effect */
[data-theme="dark"] .stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

[data-theme="dark"] .stars-container::before,
[data-theme="dark"] .stars-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 50px 160px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #fff, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle 4s infinite, moveUp 10s linear infinite;
}

[data-theme="dark"] .stars-container::after {
    background-image: 
        radial-gradient(1px 1px at 10px 20px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 30px 50px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 60px 100px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 80px 20px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 100px 60px, #fff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 140px 80px, #fff, rgba(0,0,0,0));
    animation-delay: 2s;
}

@keyframes twinkle {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

@keyframes moveUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-200px);
    }
}


// DOM Elements
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task');
const todoList = document.getElementById('todo-list');
const filterBtns = document.querySelectorAll('.filter-btn');
const clearCompletedBtn = document.getElementById('clear-completed');
const tasksCount = document.getElementById('tasks-count');
const themeToggle = document.querySelector('.theme-toggle');

// State
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
let currentFilter = 'all';

// Theme
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
updateThemeIcon();

// Event Listeners
addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addTask();
});
clearCompletedBtn.addEventListener('click', clearCompleted);
themeToggle.addEventListener('click', toggleTheme);

// Add filter event listeners
filterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentFilter = btn.dataset.filter;
        renderTasks();
    });
});

// Functions
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText) {
        const task = {
            id: Date.now(),
            text: taskText,
            completed: false
        };
        tasks.push(task);
        saveTasks();
        renderTasks();
        taskInput.value = '';
    }
}

function deleteTask(id) {
    tasks = tasks.filter(task => task.id !== id);
    saveTasks();
    renderTasks();
}

function toggleTask(id) {
    tasks = tasks.map(task => {
        if (task.id === id) {
            return { ...task, completed: !task.completed };
        }
        return task;
    });
    saveTasks();
    renderTasks();
}

function clearCompleted() {
    tasks = tasks.filter(task => !task.completed);
    saveTasks();
    renderTasks();
}

function renderTasks() {
    const filteredTasks = tasks.filter(task => {
        if (currentFilter === 'active') return !task.completed;
        if (currentFilter === 'completed') return task.completed;
        return true;
    });

    todoList.innerHTML = '';
    filteredTasks.forEach(task => {
        const li = document.createElement('li');
        li.className = 'todo-item';
        li.innerHTML = `
              
              <input type="checkbox" class="todo-checkbox" ${task.completed ? 'checked' : ''}>
            <span class="todo-text ${task.completed ? 'completed' : ''}">${task.text}</span>
            <button class="todo-delete">
                <i class="fas fa-trash"></i>
            </button>
            
        `;

        const checkbox = li.querySelector('.todo-checkbox');
        const deleteBtn = li.querySelector('.todo-delete');

        checkbox.addEventListener('change', () => toggleTask(task.id));
        deleteBtn.addEventListener('click', () => deleteTask(task.id));

        todoList.appendChild(li);
    });

    updateTasksCount();
}

function updateTasksCount() {
    const activeTasks = tasks.filter(task => !task.completed).length;
    tasksCount.textContent = `${activeTasks} ${activeTasks === 1 ? 'task' : 'tasks'} left`;
}

function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateThemeIcon();
}

function updateThemeIcon() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const moonIcon = themeToggle.querySelector('.fa-moon');
    const sunIcon = themeToggle.querySelector('.fa-sun');
    
    if (currentTheme === 'light') {
        moonIcon.style.display = 'block';
        sunIcon.style.display = 'none';
    } else {
        moonIcon.style.display = 'none';
        sunIcon.style.display = 'block';
    }
}

// Initial render
renderTasks();