A futuristic, highly polished Todo List web application built with pure HTML, CSS, and JavaScript.
- Zero-Gravity UI: Task items naturally float and drift on the screen using performant CSS animations and randomized staggering.
- Magnetic Cursor Repulsion: Tasks react interactively to your mouse, getting smoothly pushed away as your cursor gets close.
- Smooth Animations: Satisfying scaling and fading animations when adding or deleting tasks.
- Local Storage: All your tasks are automatically persisted to your browser's local storage.
- Smart Filtering: Instantly sort your workflow by All, Pending, or Completed tasks.
- Fully Responsive: Fluid layout that works perfectly on both desktop and mobile devices.
(Add your Live Preview link here)
- Clone the repository:
git clone https://github.com/your-username/smart-todo-app.git
- Navigate to the project directory:
cd smart-todo-app - Open
index.htmlin your web browser.
Built entirely from scratch with Vanilla JavaScript, HTML5, and CSS3.
- Styling: Uses CSS variables,
gap, moderntranslateproperties, and flexiblecubic-beziertransitions for smooth interactions. - Performance: Repulsion animations utilize
requestAnimationFrame()and the independent CSStranslateproperty to maintain 60 FPS without layout thrashing. - Data Handling: Tasks are manipulated functionally using
map()andfilter()and mapped statefully to the DOM.
Contributions, issues, and feature requests are welcome!
Distributed under the MIT License.