odin-todo-list

The Odin Project: Todo List

Summary

This project is a desktop browser-based to-do list application, developed using JavaScript, CSS, HTML, and managed through npm.

For details on this project, please visit The Odin Project - Project: Todo List.

Key Project Instructions:

This project involves developing the application with the following specifications:

- Object Creation: Implement factory functions or use object constructors/classes for creating todo items.

- Todo Item Properties: Each todo item must include at least the following properties such as title, description, dueDate, and priority.

- Categorization: Enable categorization of todos into different lists.

- Default Page: Designate a default view for the initial page load.

- Custom Categories: Incorporate a feature allowing users to create custom categories for organizing their todos.

- Modular Design: Structure the application logic across separate modules.

- User Interface (UI) Functions: The UI should facilitate:

• Viewing all categories
• Viewing all todos (in a summarized form) per category
• Displaying detailed views of todos for editing or simple viewing
• Deleting todos

- Design Inspiration: Look at popular todo applications like Todoist, Things, and Any.do for design and functionality ideas.

- Date Management: Consider using date-fns for handling dates.

- Data Storage: Utilize localStorage for persisting todos data.

Built With:

HTML, CSS, Javascript, Webpack, and date-fns

Resources Used

• Miro by Miro.com
• google-webfonts-helper by Mario Ranftl
• UI Designing Tool by Figma.com
• ColorSpace by mycolor.space
• Icons8 by ICONS8
• Pictogrammers by Pictogrammers
• ChatGPT-4 by ChatGPT

Referenced Tutorials

Javascript Related:

• JavaScript Key in Object – How to Check if an Object has a Key in JS by freeCodeCamp

• Logical OR assignment (||=) by MDN

• Javascript Array some() by Programiz

• Four Methods to Search Through Arrays in JavaScript by DigitalOcean

• HOW TO SORT AN ARRAY BY DATE VALUE IN JAVASCRIPT by Flavio Copes

• Sort an Array of Objects in JavaScript by JavaScript TUTORIAL

• Working with Dates Using the date-fns in JavaScript by Geekflare

• JavaScript Get Current Date – Today’s Date in JS and HTML by Davison Pro

• Sending form data by MDN

• 3 Ways to Merge Arrays in JavaScript by Dmitri Pavlutin

• 6 Use Case of Spread with Array in JavaScript by Samantha Ming

• Passing Arrays as Function Arguments by Samantha Ming

• Passing Arguments to Event Listeners in JavaScript by Plain English

• Option selected Property by W3Schools;

• Form properties and methods by JavaScript.Info

• Handling Forms with Vanilla Javascript by Matias Hernández

• CHECK IF A STRING CONTAINS ONLY WHITESPACE WITH JAVASCRIPT by John Kavanagh

• localStorage in JavaScript: A complete guide by LogRocket

• LocalStorage, sessionStorage by JAVASCRIPT.INFO

• The getOwnPropertyDescriptors Method in JavaScript by DigitalOcean

• Storage: setItem() method by MDN

• JavaScript insertBefore by JavaScript TUTORIAL

• What's the Difference between DOM Node and Element? by Dmitri Pavlutin

• How to Format Dates in JavaScript with One Line of Code by freeCodeCamp

• JavaScript Event Delegation by JavaScript Tutorial

• Cleaner Code with Event Delegation in JavaScript by Bits and Pieces

• Check If an Element contains a Class by JavaScript Tutorial

• Frontend CRUD with Plain Vanilla JS by Alex Merced

• Deep copy by MDN

• JavaScript Primitive vs. Reference Values vy JavaScript Tutorial

• How to Deep Clone an Array in JavaScript by Samantha Ming

• JavaScript confirm by JavaScript Tutorial

• How to Setup Html Webpack Plugin by Rapid Develop

• Quick Tour of date-fns, a Simple JavaScript Date Library by DigitalOcean

• Does setattribute function in js replaces the existing attributes and its values? by Sololearn

• JavaScript change Event by JavaScript TUTORIAL

Npm Related:

• Asset Management by Webpack

HTML Related:

• HTML Form Elements by W3Schools

CSS Related:

• What's the difference between align-content and align-items? by StackOverflow

• Creating a custom <select> dropdown with CSS by LogRocket

• How do I style a <select> dropdown with only CSS? by Sentry

Design Related:

• The 8 best to do list apps in 2023 by Zapier