Things To Do

Project info

A simple to-do list application. The purpose of this project is to practice serialization with JSON and object oriented programming.

Project description can be found here

Live demo

Live demo available here

Table of Contents

• Features
• Technologies utilized
• Learning outcomes
• Project screenshots
• Behind the Scenes
• Installation

Features

• CRUD functionality for tasks and projects
• localStorage integration
• Task filtering by:
  • date
  • project
  • completed status

Technologies utilized

• HTML5
• CSS3
• JavaScript ES6
• JSON
• webpack

Learning outcomes

This project helped to reinforce the following skills:

• webpack
• JSON
• serialization
• localStorage integration
• JavaScript modules
• DOM manipulation
• CSS styling

Project screenshots

All tasks:

Completed tasks filter:

Edit task:

New project input:

New task input:

Project sort:

Weekly sort:

Behind the scenes

Improvements

This project could be improved with:

• Responsive design for mobile or tablet use
• option to sort by priority instead of date
• search bar to filter tasks by input
• drag and drop functionality
• Theme toggle

Resources

• CSS reset
• date-fns library
• This resource is helpful when deploying to gh-pages after webpack is run.

Installation

• Clone this repository to your desktop.
• Navigate to the top level of the directory by running cd odin-todo-list.
• Run npm install to install the required dependencies.
• Open dist/index.html in your browser.
• Run npm run watch to update the dist folder on save
• Refresh page after saving to see changes