Todolist
a todolist with Glassmorphism ui that took me 2 days to make
Scroll — the screen settles flat
- Stack
- JavaScript
- Languages (GitHub)
- JavaScript 92% · HTML 4% · CSS 4%
- Repository
- Osayeidzaber/todolist
- Timeline
- Started 1 Feb 2025
The project, at a glance.
a todolist with Glassmorphism ui that took me 2 days to make
02 — Build notes · Synced from GitHub
Original README ↗🚀 About the Project
Welcome to the todowithGlassmorphism, a sleek and efficient tool designed to help you organize your tasks with a touch of futuristic style. This project is built using React for a dynamic user interface and Tailwind CSS for stylish, responsive design. It's a simple yet powerful application to manage your daily tasks effectively.
- ✨ Glassmorphism UI: Experience a visually appealing interface with glassmorphic design elements.
- 🌙 Dark/Light Theme: Toggle between dark and light themes for comfortable viewing in any environment.
- ⚡️ Fast and Responsive: Built with Vite for lightning-fast development and optimized performance.
- 💾 Local Storage: Tasks are saved in your browser's local storage for persistence.
- ⚙️ Filter and Organize: Easily filter tasks by 'all', 'pending', or 'completed' to stay organized.
💻 Tech Stack
This project is built using the following technologies:
- Frontend:
- React - A JavaScript library for building user interfaces.
- Vite - A fast build tool and development server.
- Tailwind CSS - A utility-first CSS framework for rapid UI development.
- Styling & Design:
- Glassmorphism UI principles
- Custom CSS for animations and effects
📦 Getting Started
To run this project locally, follow these steps:
-
Installation:
npm install -
Start the development server:
npm run dev -
Open in your browser:
- The app will be running at
http://localhost:5173or the URL provided by Vite.
- The app will be running at
📌 Features
- Add Tasks: Easily add new tasks with a simple input field.
- Complete Tasks: Mark tasks as complete with a click.
- Delete Tasks: Remove tasks that are no longer needed.
- Filter Tasks: View 'all', 'pending', or 'completed' tasks for better organization.
- Theme Toggle: Switch between light and dark themes for optimal viewing experience.
- Animated Background: Enjoy a subtle starry animated background for a futuristic feel.
🖼️ Screenshots
🚀 Contributing
Contributions are welcome! If you have suggestions or find issues, please open an issue or submit a pull request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/YourAmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/YourAmazingFeature) - Open a Pull Request