To-Do List

A web app for keeping track of your To-Dos for different projects.

Note: This website works best with high res screens (1080p and up). Check the improvements section for future updates.

Features

• Utilizes localStorage API to cache task list data into the browser for memory across use sessions.
• Color coded priority highlighting.
• Confirmation modal pop-up on group or task deletion.

Built With

• Vanilla JS
• Webpack
• NPM
• HTML5
• CSS3

Live Demo

To-Do List: Deployed on GitHub Pages

Getting Started

In order to setup and work on this project on your own, you will need to:

1. Clone this project: git clone https://cambuchi.github.io/odin-todo-list/

2. Once you have cloned this project, you can install the required dependencies by using: npm install

3. A live demo of the project can be started by using: npm run server

4. Distribution files can be produced using: npm run build

Usage

Once you are on the Home Page, you have two main panels

• Groups Panel.- To switch between different Projects
• Tasks Panel.- To check or uncheck To-Dos for the selected project

Improvements

Features we are going to add to this app:

• Media queries for use on mobile devices.
• Add sort buttons for date and alphabetical sorting.
• Add functionality to rearrange projects and to-dos by dragging and dropping

Acknowledgement

Project was made as part of the curriculum for the ODIN project.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

If you got until here, show your love hitting the ⭐️ button, I'd really appreciate it.