https://github.com/rycatt/todo-list

Simple Todo List app built with JavScript featuring task creation, completion, deletion, and local storage persistence for saving tasks between sessions.
https://github.com/rycatt/todo-list

css html javascript odinproject todolist webpack

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/rycatt/todo-list
• Owner: rycatt
• License: mit
• Created: 2025-04-26T00:36:40.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-06-01T21:09:53.000Z (7 months ago)
• Last Synced: 2025-06-19T23:03:17.520Z (7 months ago)
• Topics: css, html, javascript, odinproject, todolist, webpack
• Language: JavaScript
• Homepage:
• Size: 354 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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](https://rycatt.github.io/todo-list/)

## 📸 Screenshot

![App Screenshot](./src/images/Screenshot.png)

## 🛠️ Installation

> **Note:** The app is also playable live on [GitHub Pages](https://rycatt.github.io/todo-list/).

1. Clone the repository**  

  ```bash

  git clone https://github.com/rycatt/todo-list.git

  ```

2. Navigate to the project folder

  ```bash

  cd todo-list

  ```

3. 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](https://img.shields.io/badge/HTML5-e34c26?style=for-the-badge&logo=html5&logoColor=white)

- ![CSS3](https://img.shields.io/badge/CSS3-264de4?style=for-the-badge&logo=css3&logoColor=white)

- ![JavaScript](https://img.shields.io/badge/JavaScript-f7df1e?style=for-the-badge&logo=javascript&logoColor=black)




## 📜 License

- [MIT License](https://github.com/rycatt/todo-list/blob/bbad6f026796f996160617065af5dc5c7e127b40/LICENSE)

- Copyright © 2025 - **[@rycatt](https://github.com/rycatt)**




## ✍️ Author

Created by **[@rycatt](https://github.com/rycatt)**  

Built with guidance from The Odin Project 🙌