https://github.com/seif-ihab/animated-to-do-list
A beautifully styled to-do list web app with light/dark mode, animated task transitions, task filtering, and localStorage support. Built with HTML, Tailwind CSS, and vanilla JavaScript.
https://github.com/seif-ihab/animated-to-do-list
dark-mode html5 localstorage tailwindcss todo-list vanilla-javascript
Last synced: about 1 month ago
JSON representation
A beautifully styled to-do list web app with light/dark mode, animated task transitions, task filtering, and localStorage support. Built with HTML, Tailwind CSS, and vanilla JavaScript.
- Host: GitHub
- URL: https://github.com/seif-ihab/animated-to-do-list
- Owner: Seif-Ihab
- Created: 2025-03-23T17:24:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T17:29:49.000Z (about 1 year ago)
- Last Synced: 2025-03-23T18:28:28.799Z (about 1 year ago)
- Topics: dark-mode, html5, localstorage, tailwindcss, todo-list, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 2.36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Animated To-Do List App
A modern and responsive to-do list web application built with HTML, Tailwind CSS, and vanilla JavaScript. It features dark/light mode, task filtering (All / Active / Completed), animated task additions/deletions, and persistent storage using localStorage.
---
## ✨ Features
- ✅ Add, complete, and delete tasks
- 🌙 Toggle between dark and light themes (saved in localStorage)
- 🔍 Filter tasks by All, Active, or Completed
- 🧼 Clear completed tasks with one click
- 💾 Tasks are saved even after refreshing the page
- 🎨 Smooth animations on task creation and deletion using Tailwind transitions
---
## 🛠️ Technologies Used
- HTML5
- Tailwind CSS (with dark mode via `class`)
- Vanilla JavaScript
- Font Awesome (for icons)
- localStorage API
---
## 🚀 Repo
- https://seif-ihab.github.io/Animated-To-Do-List/