Intermediate Projects

Explore more complex applications and coding patterns with AI assistance.

Todo List Application

Create a functional todo list with AI guidance.

HTML Structure

<!-- Ask AI: "Create HTML structure for a todo list app" -->
<div class="todo-app">
    <h1>Todo List</h1>
    <div class="input-container">
        <input type="text" id="taskInput" placeholder="Add a new task...">
        <button id="addTask">Add Task</button>
    </div>
    <ul id="taskList"></ul>
</div>

JavaScript Implementation

// Ask AI: "Write JavaScript for a todo list that can add, toggle, and delete tasks"
document.addEventListener('DOMContentLoaded', () => {
    const taskInput = document.getElementById('taskInput');
    const addTaskBtn = document.getElementById('addTask');
    const taskList = document.getElementById('taskList');
    
    // Load tasks from localStorage
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    
    // Render existing tasks
    renderTasks();
    
    // Add new task
    addTaskBtn.addEventListener('click', addTask);
    taskInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') addTask();
    });
    
    function addTask() {
        const taskText = taskInput.value.trim();
        if (taskText === '') return;
        
        tasks.push({
            id: Date.now(),
            text: taskText,
            completed: false
        });
        
        saveAndRenderTasks();
        taskInput.value = '';
    }
    
    function renderTasks() {
        taskList.innerHTML = '';
        
        tasks.forEach(task => {
            const li = document.createElement('li');
            li.dataset.id = task.id;
            li.className = task.completed ? 'completed' : '';
            
            li.innerHTML = `
                ${task.text}
                
                    
                    
                
            `;
            
            // Toggle task completion
            li.querySelector('.toggle-btn').addEventListener('click', () => {
                const taskId = parseInt(li.dataset.id);
                const taskIndex = tasks.findIndex(t => t.id === taskId);
                
                if (taskIndex !== -1) {
                    tasks[taskIndex].completed = !tasks[taskIndex].completed;
                    saveAndRenderTasks();
                }
            });
            
            // Delete task
            li.querySelector('.delete-btn').addEventListener('click', () => {
                const taskId = parseInt(li.dataset.id);
                const taskIndex = tasks.findIndex(t => t.id === taskId);
                
                if (taskIndex !== -1) {
                    tasks.splice(taskIndex, 1);
                    saveAndRenderTasks();
                }
            });
            
            taskList.appendChild(li);
        });
    }
    
    function saveAndRenderTasks() {
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks();
    }
});