To-Do List Web Application Project

Project Overview

Now that you have learned HTML, CSS, and JavaScript, it's time to put your skills to the test by building a To-Do List Web Application. This project will allow you to practice creating a dynamic, user-friendly app to manage tasks. This project will leverage everything you’ve learned about structuring HTML, styling with CSS, and adding interactivity with JavaScript.

Project Requirements

Core Features:

  1. Add Tasks: Users can add new tasks using an input field and submit button.
  2. Edit Tasks: Users can edit existing tasks by clicking on the task text.
  3. Delete Tasks: Users can remove tasks that are no longer needed.
  4. Mark as Complete: Users can mark tasks as complete or incomplete by clicking a checkbox.
  5. Filter Tasks: Users can filter tasks to show all, completed, or pending tasks.
  6. Responsive Design: Ensure that the app is fully responsive and works well on both desktop and mobile screens.

Additional Requirements:

  • Data Persistence: Use localStorage to save the to-do list, so that tasks persist even after the browser is refreshed.
  • Error Handling: Handle empty input fields to prevent users from adding blank tasks.
  • User Feedback: Display alerts or messages when tasks are added, edited, or deleted, for better user feedback.

Estimated Time to Complete

5-10 hours

Instructions

  1. HTML Structure: Start by creating the HTML structure for the app. Include an input field for new tasks, a list area to display tasks, and buttons or links to edit, delete, and filter tasks.

  2. CSS Styling: Use CSS to style the app, making it visually appealing and responsive. Include different colors or styles for completed and pending tasks, and ensure the layout adapts to various screen sizes.

  3. JavaScript Functionality:

    • Add functionality to create tasks dynamically when users input text and click "Add."
    • Implement edit functionality so users can click on a task to modify its text.
    • Set up delete functionality to remove tasks.
    • Use checkboxes or other indicators to allow users to mark tasks as completed or pending.
    • Implement filters (e.g., "All," "Completed," "Pending") to show tasks based on their status.

  4. Data Persistence with localStorage: Save tasks to localStorage so that when users refresh the page, their tasks remain visible.

  5. Testing and Debugging: Test your app to ensure it works correctly across different browsers and screen sizes. Handle errors gracefully, especially for edge cases like emp