A simple, responsive, and feature-rich To-Do List Web Application built with HTML, CSS, and JavaScript. Perfect for managing tasks with date, time, and location details, supporting filtering, searching, and task persistence using localStorage.
Key Features
Add Tasks with:
- Task title
- Date (cannot select past dates)
- Time
- Location
Task Management:
- Mark tasks as Done/Pending
- Delete individual tasks
- Clear all tasks with confirmation
Filters:
- Show All, Pending, or Done tasks
Search Functionality:
- Real-time search to find tasks by title
Task Persistence:
- Tasks are stored in localStorage so they remain after page reload
Responsive Design:
- Works on desktop and mobile
Visual Feedback:
- Completed tasks show line-through and reduced opacity
- Task counters for Total, Pending, and Done
Technology Stack
Backend: None (Fully front-end)
Frontend: HTML5 / CSS3 / JavaScript
Installation Guide
- Download the project files (HTML, CSS, JS)
- Open
index.htmlin your preferred browser - Start adding tasks
No database or backend setup required. Fully front-end powered.
Usage
- Enter a task title in the input box
- Optionally select a date, time, and location
- Click Add to create the task
- Use filters to view All/Pending/Done tasks
- Click a task to mark as done/pending
- Click Delete to remove a task
- Click Clear All to remove all tasks at once
Customization
- Styling: Edit the style section in the HTML or link an external CSS file
- Icons/Colors: Customize button colors and shadows as desired
- Task Sorting: Add sorting logic in JS for date/time or priority