TaskMaster | Modern Todo App

TaskMaster is a sophisticated, high-performance task management solution engineered for the modern web. Departing from traditional, flat designs, it embraces a premium Introduction to Glassmorphism aesthetic—utilizing translucent layers, subtle borders, and vivid background gradients to create an interface that feels alive and distinct.

Originally conceived as a demonstration of the power of Vanilla JavaScript and Modern CSS3, TaskMaster provides a seamless, framework-free experience that rivals complex React or Vue applications in responsiveness and interactivity.

---

🎨 Design Philosophy & UI Architecture

Glassmorphism

The core visual identity is built upon the "Glassmorphism" trend. This is achieved not through images, but via cutting-edge CSS properties:

• backdrop-filter: blur(16px): This property processes the background behind the element, creating a frosted glass effect that blurs the vivid underlying gradients.
• Translucent Colors: We use rgba() and hsla() values (e.g., rgba(255, 255, 255, 0.65)) to layer content, allowing light and color to bleed through naturally.
• Light & Depth: White borders with low opacity (1px solid rgba(255, 255, 255, 0.5)) imitate the edge of a glass pane, while soft box-shadows lift the elements off the page, establishing a clear visual hierarchy.

Responsive & Adaptive

The layout utilizes a mix of Flexbox (for 1-dimensional component alignment) and Absolute Positioning (for precise layered elements like the clock). The application is fully fluid, adapting intelligently from large desktop monitors down to mobile viewports (375px), ensuring usability is never compromised.

---

🛠️ Technical Implementation

State Management (Vanilla JS)

Instead of relying on heavy libraries like Redux, TaskMaster implements a lightweight, custom state management system:

1. Centralized State: The tasks array serves as the single source of truth.
2. Reactive Rendering: Any modification to the data (add, delete, toggle) triggers a re-render cycle via the renderTasks() and updateStats() functions.
3. Persistence: The state is automatically serialized to JSON and stored in the browser's localStorage API. This ensures O(1) retrieval of data upon returning to the app, making the session persist indefinitely.

Dynamic SVG Progress Ring

The circular progress indicator is mathematically calculated rather than static:

• The circumference of the circle is derived ($C = 2 * \pi * r$).
• As tasks are completed, JavaScript calculates the percentage ($P$) and updates the stroke-dashoffset attribute of the SVG circle ($Offset = C - (P/100) * C$).
• CSS transitions animate this change, creating a smooth "filling" effect.

Event Delegation

To maintain high performance even with hundreds of tasks, event listeners are optimized using Event Delegation. Instead of attaching click listeners to every single delete button or checkbox, a single listener on the parent list (#task-list) intercepts all events, determines the target via e.target.closest(), and executes the appropriate logic. This significantly reduces memory usage and initialization time.

---

✨ Features Breakdown

🕰️ Smart Timekeeping

• Real-time Clock: A 12-hour digital clock with AM/PM indication, positioned centrally for visibility.
• Live Date: Automatically updates to show the current day and date.

📝 Task Management

• Creation: Support for task title, due date, and category.
• Custom Categories: A unique UI pattern allows users to select "Custom" from a dropdown, triggering a slide-in input field to define bespoke categories instantly.
• Smart Filtering:
  • All: View complete history.
  • Pending: Focus only on what remains.
  • Done: Review accomplishments.

🌓 Theme Engine

• System-Wide Dark Mode: A toggleable theme engine changes CSS variables (--bg-gradient, --glass-bg, --text-primary) globally.
• Persistence: Your trusted theme choice is remembered across sessions.

---

🚀 Installation & Setup

TaskMaster is a pure client-side application requiring no build steps, Node.js modules, or bundlers.

1. Clone the Repository

   git clone https://github.com/Vishnuadoor/todo_app.git

2. Run the Application

   • Option A (Direct): Double-click index.html to open it in your default browser.
   • Option B (Live Server): For the best experience (avoiding CORS issues with some browsers), use a VS Code Live Server extension or Python's simple HTTP server:

     python -m http.server

---

👨‍💻 Author

Vishnu

A passionate developer focused on creating intuitive, beautiful, and performant web interfaces.

GitHub | LinkedIn | Instagram