Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/kbelltree/odin-todo-list

The Odin Project: Todo List
https://github.com/kbelltree/odin-todo-list

Last synced: about 22 hours ago
JSON representation

The Odin Project: Todo List

Awesome Lists containing this project

README 

        
# odin-todo-list

## The Odin Project: Todo List





    

        To-do list application snapshot by Keiko S. 2024

    




## 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](https://www.theodinproject.com/lessons/node-path-javascript-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](https://miro.com/index/)

- google-webfonts-helper by [Mario Ranftl](https://gwfh.mranftl.com/fonts)

- UI Designing Tool by [Figma.com](https://www.figma.com)

- ColorSpace by [mycolor.space](https://mycolor.space/)

- Icons8 by [ICONS8](https://icons8.com/)

- Pictogrammers by [Pictogrammers](https://pictogrammers.com/library/mdi/)

- ChatGPT-4 by [ChatGPT](https://chat.openai.com)



### Referenced Tutorials



Javascript Related:



- [JavaScript Key in Object – How to Check if an Object has a Key in JS by freeCodeCamp](https://www.freecodecamp.org/news/how-to-check-if-an-object-has-a-key-in-javascript/)



- [Logical OR assignment (||=) by MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment)



- [Javascript Array some() by Programiz](https://www.programiz.com/javascript/library/array/some)



- [Four Methods to Search Through Arrays in JavaScript by DigitalOcean](https://www.digitalocean.com/community/tutorials/js-array-search-methods)



- [HOW TO SORT AN ARRAY BY DATE VALUE IN JAVASCRIPT by Flavio Copes](https://flaviocopes.com/how-to-sort-array-by-date-javascript/)



- [Sort an Array of Objects in JavaScript by JavaScript TUTORIAL](https://www.javascripttutorial.net/array/javascript-sort-an-array-of-objects/)



- [Working with Dates Using the date-fns in JavaScript by Geekflare](https://geekflare.com/javascript-date-fns/)



- [JavaScript Get Current Date – Today’s Date in JS and HTML by Davison Pro](https://davisonpro.dev/javascript-html-todays-date/)



- [Sending form data by MDN](https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data)



- [3 Ways to Merge Arrays in JavaScript by Dmitri Pavlutin](https://dmitripavlutin.com/javascript-merge-arrays/)



- [6 Use Case of Spread with Array in JavaScript by Samantha Ming](https://www.samanthaming.com/tidbits/92-6-use-cases-of-spread-with-array/)



- [Passing Arrays as Function Arguments by Samantha Ming](https://www.samanthaming.com/tidbits/48-passing-arrays-as-function-arguments/)



- [Passing Arguments to Event Listeners in JavaScript by Plain English](https://plainenglish.io/blog/passing-arguments-to-event-listeners-in-javascript-1a81bc397ecb)



- [Option selected Property by W3Schools](https://www.w3schools.com/jsref/prop_option_selected.asp);



- [Form properties and methods by JavaScript.Info](https://javascript.info/form-elements)



- [Handling Forms with Vanilla Javascript by Matias Hernández](https://matiashernandez.dev/blog/post/handling-forms-with-vanilla-javascript)



- [CHECK IF A STRING CONTAINS ONLY WHITESPACE WITH JAVASCRIPT by John Kavanagh](https://johnkavanagh.co.uk/writing/check-if-a-string-contains-only-whitespace-with-javascript/)



- [localStorage in JavaScript: A complete guide by LogRocket](https://blog.logrocket.com/localstorage-javascript-complete-guide/)



- [LocalStorage, sessionStorage by JAVASCRIPT.INFO](https://javascript.info/localstorage)



- [The getOwnPropertyDescriptors Method in JavaScript by DigitalOcean](https://www.digitalocean.com/community/tutorials/js-getownpropertydescriptors)



- [Storage: setItem() method by MDN](https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem)



- [JavaScript insertBefore by JavaScript TUTORIAL](https://www.javascripttutorial.net/javascript-dom/javascript-insertbefore/)



- [What's the Difference between DOM Node and Element? by Dmitri Pavlutin](https://dmitripavlutin.com/dom-node-element/)



- [How to Format Dates in JavaScript with One Line of Code by freeCodeCamp](https://www.freecodecamp.org/news/how-to-format-dates-in-javascript/)



- [JavaScript Event Delegation by JavaScript Tutorial](https://www.javascripttutorial.net/javascript-dom/javascript-event-delegation/)



- [Cleaner Code with Event Delegation in JavaScript by Bits and Pieces](https://blog.bitsrc.io/cleaner-code-with-event-delegation-in-javascript-bb6dd27be64d)



- [Check If an Element contains a Class by JavaScript Tutorial](https://www.javascripttutorial.net/dom/css/check-if-an-element-contains-a-class/)



- [Frontend CRUD with Plain Vanilla JS by Alex Merced](https://dev.to/alexmercedcoder/frontend-crud-with-plain-vanilla-js-35cd)



- [Deep copy by MDN](https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy)



- [JavaScript Primitive vs. Reference Values vy JavaScript Tutorial](https://www.javascripttutorial.net/javascript-primitive-vs-reference-values/)



- [How to Deep Clone an Array in JavaScript by Samantha Ming](https://dev.to/samanthaming/how-to-deep-clone-an-array-in-javascript-3cig)



- [JavaScript confirm by JavaScript Tutorial](https://www.javascripttutorial.net/javascript-bom/javascript-confirm/#)



- [How to Setup Html Webpack Plugin by Rapid Develop](https://rapidevelop.org/webpack/setup-html-webpack-plugin)



- [Quick Tour of date-fns, a Simple JavaScript Date Library by DigitalOcean](https://www.digitalocean.com/community/tutorials/js-date-fns)



- [Does setattribute function in js replaces the existing attributes and its values? by Sololearn](https://www.sololearn.com/en/Discuss/2935520/does-setattribute-function-in-js-replaces-the-existing-attributes-and-its-values)



- [JavaScript change Event by JavaScript TUTORIAL](https://www.javascripttutorial.net/javascript-dom/javascript-change-event/)



Npm Related:



- [Asset Management by Webpack](https://webpack.js.org/guides/asset-management/#loading-css)



HTML Related:



- [HTML Form Elements by W3Schools](https://www.w3schools.com/html/html_form_elements.asp)



CSS Related: 



- [What's the difference between align-content and align-items? by StackOverflow](https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items)



- [Creating a custom `` dropdown with CSS

 by LogRocket](https://blog.logrocket.com/creating-custom-select-dropdown-css/)



 - [How do I style a `` dropdown with only CSS? by Sentry](https://sentry.io/answers/css-style-select-dropdown/)



Design Related: 



- [The 8 best to do list apps in 2023 by Zapier](https://zapier.com/blog/best-todo-list-apps/)