=== index.html === Todo App - Manage Your Tasks

My Todo List

Stay organized and productive

No tasks yet. Add a task to get started!

=== about.html === About - Todo App

About Todo App

Todo App is a simple, intuitive task management application designed to help you stay organized and productive.

Features

  • Add new tasks to your list
  • Mark tasks as complete
  • Delete tasks you no longer need
  • Filter tasks by status (all, active, completed)
  • Responsive design that works on all devices

How to Use

  1. Type your task in the input field
  2. Click "Add" or press Enter to add it to your list
  3. Click the checkbox to mark a task as complete
  4. Use the delete button to remove tasks
  5. Filter your tasks using the filter buttons

Our app stores your tasks locally in your browser, so they'll be there when you return!

=== contact.html === Contact - Todo App

Contact Us

Have questions or feedback about our Todo App? We'd love to hear from you!

Other Ways to Reach Us

Email: support@todoapp.com

Address: 123 Productivity Street, Organization City

=== assets/css/styles.css === /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #4f46e5; --primary-hover: #4338ca; --secondary-color: #f3f4f6; --text-color: #1f2937; --text-light: #6b7280; --success-color: #10b981; --danger-color: #ef4444; --border-color: #e5e7eb; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --radius: 8px; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-color); background-color: #f9fafb; min-height: 100vh; display: flex; flex-direction: column; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Header Styles */ .header { background-color: white; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; } .logo { font-size: 1.5rem; font-weight: 600; color: var(--primary-color); text-decoration: none; } .nav-list { display: flex; list-style: none; gap: 2rem; } .nav-link { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s ease; position: relative; } .nav-link:hover { color: var(--primary-color); } .nav-link.active { color: var(--primary-color); } .nav-link.active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: var(--primary-color); } .mobile-nav-toggle { display: none; flex-direction: column; background: none; border: none; cursor: pointer; padding: 0.5rem; } .mobile-nav-toggle span { width: 25px; height: 3px; background-color: var(--text-color); margin: 2px 0; transition: 0.3s; } /* Main Content */ .main { flex: 1; padding: 2rem 0; } .todo-section, .about-section, .contact-section { background: white; border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); margin-bottom: 2rem; } .todo-section h1, .about-section h1, .contact-section h1 { font-size: 2rem; margin-bottom: 0.5rem; color: var(--text-color); } .subtitle { color: var(--text-light); margin-bottom: 2rem; } /* Todo Form */ .todo-input-section { margin-bottom: 1.5rem; } .todo-form { display: flex; gap: 0.5rem; } .todo-input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 1rem; transition: border-color 0.3s; } .todo-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .add-btn { padding: 0.75rem 1.5rem; background-color: var(--primary-color); color: white; border: none; border-radius: var(--radius); font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .add-btn:hover { background-color: var(--primary-hover); } /* Filters */ .filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .filter-btn { padding: 0.5rem 1rem; background-color: var(--secondary-color); border: none; border-radius: var(--radius); font-weight: 500; cursor: pointer; transition: all 0.3s; } .filter-btn:hover { background-color: #e5e7eb; } .filter-btn.active { background-color: var(--primary-color); color: white; } /* Todo List */ .todo-list { display: flex; flex-direction: column; gap: 0.5rem; } .todo-item { display: flex; align-items: center; padding: 1rem; background-color: white; border: 1px solid var(--border-color); border-radius: var(--radius); transition: all 0.3s; } .todo-item:hover { box-shadow: var(--shadow); } .todo-checkbox { margin-right: 1rem; width: 20px; height: 20px; cursor: pointer; } .todo-text { flex: 1; font-size: 1rem; } .todo-item.completed .todo-text { text-decoration: line-through; color: var(--text-light); } .todo-delete { background: none; border: none; color: var(--danger-color); cursor: pointer; font-size: 1.2rem; padding: 0.25rem; border-radius: 4px; transition: background-color 0.3s; } .todo-delete:hover { background-color: #fee2e2; } .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-light); } .empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; } /* About Page */ .about-content h2 { margin: 1.5rem 0 0.5rem; color: var(--text-color); } .about-content ul, .about-content ol { margin-left: 1.5rem; margin-bottom: 1.5rem; } .about-content li { margin-bottom: 0.5rem; } /* Contact Page */ .contact-form { margin: 2rem 0; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-family: inherit; font-size: 1rem; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); } .submit-btn { padding: 0.75rem 2rem; background-color: var(--primary-color); color: white; border: none; border-radius: var(--radius); font-weight: 500; cursor: pointer; transition: background-color 0.3s; } .submit-btn:hover { background-color: var(--primary-hover); } .contact-info { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color); } .contact-info p { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } /* Footer */ .footer { background-color: white; padding: 1.5rem 0; text-align: center; border-top: 1px solid var(--border-color); margin-top: auto; } /* Responsive Design */ @media (max-width: 768px) { .nav-list { position: fixed; flex-direction: column; background: white; top: 70px; left: 0; width: 100%; padding: 1rem; box-shadow: var(--shadow); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: all 0.3s ease; } .nav-list.active { transform: translateY(0); opacity: 1; pointer-events: all; } .mobile-nav-toggle { display: flex; } .todo-form { flex-direction: column; } .filters { flex-wrap: wrap; } } === assets/js/main.js === // Todo functionality document.addEventListener('DOMContentLoaded', function() { // Initialize todos from localStorage let todos = JSON.parse(localStorage.getItem('todos')) || []; let currentFilter = 'all'; // DOM elements const todoForm = document.getElementById('todo-form'); const todoInput = document.getElementById('todo-input'); const todoList = document.getElementById('todo-list'); const emptyState = document.getElementById('empty-state'); const filterButtons = document.querySelectorAll('.filter-btn'); const mobileNavToggle = document.querySelector('.mobile-nav-toggle'); const navList = document.querySelector('.nav-list'); // Mobile navigation toggle if (mobileNavToggle && navList) { mobileNavToggle.addEventListener('click', function() { navList.classList.toggle('active'); this.classList.toggle('active'); }); } // Contact form submission const contactForm = document.querySelector('.contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! This is a demo, so your message wasn\'t actually sent.'); contactForm.reset(); }); } // If we're not on the index page, don't initialize todo functionality if (!todoForm) return; // Render todos based on current filter function renderTodos() { todoList.innerHTML = ''; const filteredTodos = todos.filter(todo => { if (currentFilter === 'active') return !todo.completed; if (currentFilter === 'completed') return todo.completed; return true; }); if (filteredTodos.length === 0) { emptyState.style.display = 'block'; } else { emptyState.style.display = 'none'; filteredTodos.forEach(todo => { const todoElement = createTodoElement(todo); todoList.appendChild(todoElement); }); } } // Create todo element function createTodoElement(todo) { const li = document.createElement('li'); li.className = 'todo-item'; if (todo.completed) li.classList.add('completed'); li.innerHTML = ` ${todo.text} `; // Add event listeners const checkbox = li.querySelector('.todo-checkbox'); const deleteBtn = li.querySelector('.todo-delete'); checkbox.addEventListener('change', () => toggleTodoComplete(todo.id)); deleteBtn.addEventListener('click', () => deleteTodo(todo.id)); return li; } // Add new todo function addTodo(text) { const newTodo = { id: Date.now(), text: text.trim(), completed: false }; todos.push(newTodo); saveTodos(); renderTodos(); } // Toggle todo completion function toggleTodoComplete(id) { todos = todos.map(todo => { if (todo.id === id) { return { ...todo, completed: !todo.completed }; } return todo; }); saveTodos(); renderTodos(); } // Delete todo function deleteTodo(id) { todos = todos.filter(todo => todo.id !== id); saveTodos(); renderTodos(); } // Save todos to localStorage function saveTodos() { localStorage.setItem('todos', JSON.stringify(todos)); } // Filter todos filterButtons.forEach(button => { button.addEventListener('click', () => { // Update active filter button filterButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); // Set current filter and re-render currentFilter = button.dataset.filter; renderTodos(); }); }); // Form submission todoForm.addEventListener('submit', e => { e.preventDefault(); const text = todoInput.value.trim(); if (text) { addTodo(text); todoInput.value = ''; } }); // Initial render renderTodos(); // Highlight current page in navigation const currentPage = window.location.pathname.split('/').pop() || 'index.html'; const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { const linkPage = link.getAttribute('href'); if (currentPage === linkPage) { link.classList.add('active'); } else { link.classList.remove('active'); } }); });