Confetti-Filled To-Do List
A colorful, gradient-obsessed to-do list application complete with priority color bars, due date selection, and celebratory confetti for completed tasks.
Project Overview
Built to practice DOM manipulation, event handling, and user experience design by adding color-coded priorities, confetti celebrations, and a date/time picker for each task.
Implementation
Developed using a simple structure: 1. **HTML**: - A container for the to-do list items, each with a checkbox, label, and “X” button. - A form for adding new items, including a text field, priority color selector, and optional due date (via Flatpickr). - Real-time “Completed / Total” status at the bottom. 2. **CSS**: - A linear gradient background (yes, another gradient—call it your “phase”). - A frosted glass effect for the container (similar to your other projects). - Priority color bars indicating urgency (red = “Urgent”, blue = “Moderate”, green = “Non-Urgent”), plus a fun black color when tasks are checked off. 3. **JavaScript**: - Handles creating, deleting, and toggling items. - Launches confetti whenever a task is completed (using Confetti.js). - Utilizes Flatpickr to pick due dates, with a little date/time pop-up. - Dynamically updates the completed task count to keep you motivated.
Challenges
Managing priority color changes with a custom dropdown, implementing confetti without performance hiccups, and ensuring the frosted glass gradient background didn’t overshadow the list text. Also overcame minor layout issues to keep the interface clean across different device sizes.
Outcome
A delightfully flamboyant to-do list that greets your completed tasks with confetti. It’s an early project that taught you the joys of event-driven JavaScript, color-coded UI, and (yes) linear gradient backgrounds. You might’ve gone a bit overboard with the gradients, but hey—who doesn’t love a good pastel fade?!
Project Gallery
