Building Vivid Tasks: A Framework-Free Task Management App

🚀 Just shipped something I'm really pleased to — Vivid Tasks, a full-featured task management app built with zero frameworks. Pure HTML, CSS & Vanilla JavaScript. No React. No Vue. No npm install. Just clean, intentional code. ⚡ Here's what's packed inside: ✅ Task creation with priority levels, due dates & categories ⏱️ Per-task time tracking with a drift-resistant timer 🔀 Drag & drop reordering (native HTML5 API) 📊 Live dashboard — active tasks, overdue count, completion rate 🔍 Real-time search with debounced input 💾 localStorage persistence — no backend needed 📱 Fully responsive from mobile to desktop ⌨️ Keyboard shortcuts (N to create, Esc to close) 🔔 Toast notification system What I learned building this: → You don't always need a framework. Vanilla JS with a clean class-based architecture can handle surprisingly complex state. → Drift-resistant timers matter — using wall-clock time instead of counting setInterval ticks keeps tracking accurate. → CSS custom properties + a solid design token system make responsive UI a joy to build. The whole app is a single VividTasks class managing filters, sort modes, drag state, timers, and DOM rendering. Building it framework-free forced me to really understand what frameworks are actually doing under the hood. 🔗 Live Demo: https://lnkd.in/dNR-hbrv 💻 GitHub: https://lnkd.in/dyv2v9V9 Would love your feedback — drop a comment or connect if you're into frontend dev! 👇 #WebDevelopment #JavaScript #Frontend #HTML #CSS #VanillaJS #ProjectShowcase #OpenToWork

  • graphical user interface, text, application, email

To view or add a comment, sign in

Explore content categories