✅ Task 4 :- To-do – Web Game

Welcome to the Smart To-Do web application repository! This is a dynamic, browser-based task manager built with HTML, CSS, and JavaScript, designed to improve productivity and time management. The app features task scheduling, reminders, real-time countdowns, and a polished UI—built entirely on the frontend, without any backend or external database.

🎓 This project was developed as part of the Skill Craft Internship program to demonstrate practical frontend development skills.

🗂️ About the Project

To-Do Web App is a handy little task manager built with just HTML, CSS, and JavaScript. It helps you keep track of your tasks easily—add, edit, complete, or delete them whenever you want. You’ll get reminders with sound and notifications, plus a cool countdown to your next task. It also has a light/dark mode and automatically sorts your tasks by their due time. This project was created during the Skill Craft Internship to boost productivity with a simple, clean design—all running right in your browser.

---

🚀 Features

🧾 Task Management

• Add tasks with:
  • Title
  • Future-only Date & Time (no past times)
  • Optional Tag (e.g., Work, Personal)
• Edit, delete, mark as complete
• “Clear All” button with confirmation

🌙 Light/Dark Mode

• One-click toggle between Light 🌞 and Dark 🌙 themes
• Theme preference is remembered via localStorage

⏰ Alerts & Notifications

• Desktop Notifications (via Notification API)
• Alarm sound using audio alerts
• Only notifies for tasks that still exist at the time of reminder
• Auto-sorting by soonest date/time

🧠 Smart Countdown

• Real-time countdown to the next task
• Shows day, month, and formatted time (e.g., Wednesday, May 22, 2025, 04:00 PM)

💾 Data Persistence

• Saves tasks and settings to browser localStorage
• Tasks stay even if you refresh or close the browser

---

💻 Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript

---

🛠️ Project Structure

	SCT_WD_4/
	|── .github/
   	|	└── workflows/
        |		└── deploy.yml     # 🚀 GitHub Actions deployment workflow
	├── index.html           	   # Main HTML file
	├── style.css            	   # CSS styles (light/dark mode, layout)
	├── app.js               	   # Game logic with DOM interactions
	├── README.md            	   # Project documentation
	├── output.pdf          	   # 🖨️ Printable version of the website│
	├── images/             	   # 🖼️ Folder for all screenshots and output images
   		├── img1.jpg
    		├── img2.jpg
    		└── ...
    		

🚀 Live Demo

Once you push this to a public GitHub repository and enable GitHub Pages, your game will be live at:

https://<your-github-username>.github.io/<repository-name>/

Example for your profile: ➡️ https://abdul9010150809.github.io/SCT_WD_4/

🎯 How to Use

1. Enter your task name

2. Choose a future date & time

3. Optionally add a tag

4. Click “Add Task” or press Enter

5. Your task appears, sorted by date

6. You’ll get a notification and sound alert at the selected time

7. Use the “☀️ / 🌙” button to toggle theme

8. “Clear All” removes all tasks with confirmation

🤝 Contributions

Have ideas to improve the UI? Pull requests are welcome! Let’s learn and build together.

📬 Contact

Have questions or suggestions? Reach out to me:

📧 Email: SHAIK.ABDULSAMMED@outlook.com 🔗 GitHub: https://github.com/Abdul9010150809

---

Happy Coding & Game On! 🎯

💻 Made with passion and precision

❤️ By Abdul Sammed as a part of Skill craft intern