Skip to content

Developed a fully functional, responsive, and interactive To Do Application using HTML, CSS, and JavaScript, designed to help users manage their daily tasks effectively. This project demonstrates real-world features such as dynamic data handling, user experience enhancements, and persistent local storage.

Notifications You must be signed in to change notification settings

AbdullahRFA/To_Do_App_JS_Project

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

8 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“ To Do App

A simple, elegant, and fully functional To Do List Web App built using HTML, CSS, and Vanilla JavaScript. This app helps users manage daily tasks efficiently with modern features like search, edit animations, and local storage support.

πŸš€ Features

βœ… Add Tasks – Enter your task and due date, and it appears immediately on the list.
βœ… Edit Tasks – Update any task in place with a smooth animation.
βœ… Delete Tasks – Remove unwanted tasks with a fade-out animation.
βœ… Mark as Complete – Check off tasks and see them styled as completed.
βœ… Live Search – Instantly filter tasks by text or date with matched keyword highlighting.

βœ… Responsive Design – Fully optimized for desktop and mobile screens.
βœ… Local Storage – All tasks are saved in the browser and persist on reload.


✨ Screenshots

todo-app-preview


πŸ’‘ Technologies Used

  • HTML5 – Structure and layout.
  • CSS3 – Styling and animations.
  • JavaScript (Vanilla) – Logic, interactivity, and DOM manipulation.
  • LocalStorage API – Persistent data storage in the browser.

πŸ“‚ Project Structure


πŸ“ to-do-app/
β”‚
β”œβ”€β”€ πŸ“„ index.html        # Main HTML file
β”œβ”€β”€ πŸ“„ style.css         # Stylesheet for UI and animations
β”œβ”€β”€ πŸ“„ script.js         # JavaScript for interactivity and logic
└── πŸ“„ README.md         # Project documentation

πŸ“¦ How to Use

  1. Clone the Repository:

    git clone https://github.com/your-username/to-do-app.git
  2. Navigate to the Project Folder:

    cd to-do-app
    
  3. Open index.html in Your Browser.

βΈ»

πŸ“Œ Upcoming Improvements β€’ Dark mode toggle β€’ Drag-and-drop task rearrangement β€’ Category tags for tasks

βΈ»

πŸ‘€ Author

βΈ»

πŸ“„ License

This project is open-source and available under the MIT License.

βΈ»

About

Developed a fully functional, responsive, and interactive To Do Application using HTML, CSS, and JavaScript, designed to help users manage their daily tasks effectively. This project demonstrates real-world features such as dynamic data handling, user experience enhancements, and persistent local storage.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published