Simple Task Manager Live Website
A clean and helpful dashboard that makes organizing your daily work easy. It automatically saves your changes, highlights important jobs with colored priority labels, and comes with a built in dark mode button.
Great Features
Easy Task Tracking: You can create new tasks, update their names, mark them done, or wipe them from the list.
Colorful Priority Labels: The system automatically assigns a High, Medium, or Low priority level to every task and displays it as a colored tag.
Smart Progress Bar: A live status readout shows your total number of tasks along with exactly how many are completed or pending.
Instant Search and Sort: Type in the search box to find tasks on the fly or click the alphabet buttons to instantly arrange your list from A to Z or Z to A.
Smooth Dark Mode: Click the moon or sun icon at any time to turn the dark theme on or off. The app remembers your choice the next time you open it.
Automatic Saving: All your tasks are safely saved into your web browser so you never lose your progress when you close the window.
Helpful Warnings: A notification bar slides into view at the top of the card if you leave a text box empty or if there is a connection problem.
How the Files Work
index.html creates the basic page structure, buttons, and input fields.
index.css adds the colors, curves, background gradients, and dark mode look.
main.js works behind the scenes to run the app and start all the tools.
The modules folder holds smaller specialized files that check for errors, sort priority colors, save tasks to memory, and download starter data.
How to Run the Project
- Copy the code files onto your computer and keep them in their original folders.
- Because this application uses advanced modular code, you will need to open the project folder using a simple local web server like Live Server in VS Code.
- Open the server link in your favorite web browser to see the app run instantly.