Skip to content

Dotify71/Smart_Todo_App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

2 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌌 Smart Todo App

A futuristic, highly polished Todo List web application built with pure HTML, CSS, and JavaScript.

✨ Features

  • 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.

πŸš€ Live Demo

(Add your Live Preview link here)

πŸ› οΈ Installation & Setup

  1. Clone the repository:
    git clone https://github.com/your-username/smart-todo-app.git
  2. Navigate to the project directory:
    cd smart-todo-app
  3. Open index.html in your web browser.

πŸ—οΈ Technical Details

Built entirely from scratch with Vanilla JavaScript, HTML5, and CSS3.

  • Styling: Uses CSS variables, gap, modern translate properties, and flexible cubic-bezier transitions for smooth interactions.
  • Performance: Repulsion animations utilize requestAnimationFrame() and the independent CSS translate property to maintain 60 FPS without layout thrashing.
  • Data Handling: Tasks are manipulated functionally using map() and filter() and mapped statefully to the DOM.

🀝 Contributing

Contributions, issues, and feature requests are welcome!

πŸ“ License

Distributed under the MIT License.

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors