The Odin Project JavaScript

Project: Todo List

A dynamically created ToDo list with vanilla JavaScript. The project is from The Odin Project curriculum.

🔗 Live preview of the project is here.

Overview

Features:

• You can add, delete and edit projects and tasks.
• You can choose from eight icons when adding a project.
• You can write description for the task, choose its date and priority.
• You can watch information of the task.
• You can see from which project is the task, while watching its information.
• You can see what tasks must be done for today or within a week.
• You can mark tasks as completed.
• You can see what tasks are important and already completed.

Tools:

• Visual Studio Code
• Linux terminal
• Git and GitHub
• Webpack Module Bundler
• ESLint + Airbnb JavaScript Style Guide
• Prettier Code Formatter

Third party code:

• modern-normalize
• Google Fonts
• Font Awesome Icons
• date-fns Library

Outcome:

• Used revealing module and factory patterns for code organizing.
• Used HTML5 semantic elements for better structure and readability.
• Used CSS Grid and CSS Flexbox modules to create layout.
• Made project to be mobile responsive.
• Cross tested on Firefox and Chromium browsers.
• Made functionality of saving data to localStorage.
• Overall, I have improved my learning abilities A LOT! 🧠