Skip to content

Hamzakhaliq921/Modern-ToDo-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Here is a professional README.md file you can push to GitHub for your project. You can copy-paste it directly into a README.md file.


Modern To Do Web App📝

A modern and interactive To-Do List Web Application built using HTML, CSS, and JavaScript. This app helps users manage daily tasks efficiently with features like task priorities, progress tracking, searching, sorting, and local storage support.


🚀 Features

  • ✅ Add new tasks

  • ✏️ Edit existing tasks

  • ❌ Delete tasks

  • 📌 Set task priority (High / Medium / Low)

  • 🔍 Search tasks instantly

  • 📊 Progress tracking with circular progress bar

  • 🎉 Confetti celebration when all tasks are completed

  • 📂 Tasks saved in Local Storage (data persists after refresh)

  • 🔃 Sort tasks:

    • Alphabetically
    • By priority
  • 📋 Separate Completed Tasks section


🛠️ Technologies Used

  • HTML5 – Structure of the application
  • CSS3 – Styling and responsive UI
  • **JavaScript ** – App logic and functionality
  • ProgressBar.js – Circular progress indicator
  • Canvas Confetti – Celebration animation

📂 Project Structure

Smart-ToDo-App
│
├── index.html     # Main HTML structure
├── index.css      # Styling and layout
├── index.js       # Application logic
└── README.md      # Project documentation

⚙️ How to Run the Project

  1. Open the project folder

<<<<<<< HEAD 2. Open the project folder

  1. Run the project by opening: =======
  2. Run the project by opening:

e9577855798352cf833c45724cf0ff6a6df06e48

index.html

in your browser.

No installation required.


📸 Application Preview

Features included in the app interface:

  • Task input field
  • Priority selector
  • Task list and completed list
  • Progress indicator
  • Search bar
  • Sorting buttons

💡 How It Works

  1. Enter a task in the input field.
  2. Select a priority level.
  3. Click Add to insert the task.
  4. Use the checkbox to mark tasks as completed.
  5. Tasks move automatically to the Completed Task section.
  6. Progress updates automatically based on completed tasks.
  7. All tasks are stored in Local Storage so they remain after page refresh.

📈 Future Improvements

  • Drag and drop task ordering
  • Task deadlines / due dates
  • Dark mode support
  • Mobile responsive improvements
  • Task categories

👨‍💻 Author

Developed by Hamza Khaliq

About

A modern To-Do web app built with HTML, CSS, and JavaScript. It allows users to add, edit, delete, search, and sort tasks with priority levels, track progress with a circular progress bar, store tasks in local storage, and celebrate completion with confetti.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors