Skip to content

Simple Todo List app built with JavScript featuring task creation, completion, deletion, and local storage persistence for saving tasks between sessions.

License

rycatt/todo-list

Repository files navigation

To-Do

A To-Do app made with HTML, CSS, and JavaScript that lets you track tasks and projects, with your data saved in the browser for easy access anytime.

🔗 Live Preview: Launch App

📸 Screenshot

App Screenshot

🛠️ Installation

Note: The app is also playable live on GitHub Pages.

  1. Clone the repository**
git clone https://github.com/rycatt/todo-list.git
  1. Navigate to the project folder
cd todo-list
  1. Open index.html in your browser to use the app.

🚀 Features

  • Add, edit, and delete tasks
  • Create and manage custom projects
  • View tasks by: Today, Upcoming, or Important
  • Assign priority levels (High, Medium, Low)
  • Badge counters for active task count
  • Persistent storage using LocalStorage
  • Responsive UI with smooth animations

📚 What I Learned

  • Applied modular JavaScript structure using ES6 Modules
  • Followed the Single Responsibility Principle across modules (UI, storage, project, task logic)
  • Organized logic into reusable and maintainable components
  • Learned to save user data in the browser with localStorage, keeping it even after page reloads or closing the tab
  • Designed responsive layouts using CSS Flexbox and Grid
  • Practiced DOM manipulation and event delegation to build an interactive user experience

Built With

  • HTML5
  • CSS3
  • JavaScript

📜 License


✍️ Author

Created by @rycatt
Built with guidance from The Odin Project 🙌

About

Simple Todo List app built with JavScript featuring task creation, completion, deletion, and local storage persistence for saving tasks between sessions.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published