https://github.com/gregolive/todo-list
Create todo lists with listify.
https://github.com/gregolive/todo-list
css javascript
Last synced: 3 months ago
JSON representation
Create todo lists with listify.
- Host: GitHub
- URL: https://github.com/gregolive/todo-list
- Owner: gregolive
- Created: 2022-02-19T08:42:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-01T16:02:12.000Z (over 4 years ago)
- Last Synced: 2025-02-05T16:40:24.864Z (over 1 year ago)
- Topics: css, javascript
- Language: JavaScript
- Homepage: https://gregolive.github.io/todo-list/
- Size: 14.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Listify
An app for creating local todo lists.
[Live demo](https://gregolive.github.io/todo-list/) 👈
## Functionality
- Add new todo lists that contain a title, description, due date, priority, and list of todo items
- Each list is assigned to a group folder, each of which have a name and icon color
- Lists and groups are saved in the user's brower via Javascript's localStorage object
- The sidebar contains all groups and links to their list's so that the user can open a list in the main view
- On a new browser session a default group and list are created
- Users can delete and edit groups and lists via dropdown menus in the sidebar and main view respectively
- Styling and Javascript for showing/hiding groups lists via Bootstrap
## Reflection
Building this todo app felt like I was making my first real-ish Javacript app, but lack of a database to save data to was limiting. There were a few difficulties with only using localStorage, such as all the object types being saved together. I tried to limit this intermixing of groups, lists, and todos by only pushing groups to browser storage, saving lists within its group, and saving todo's to their list. Another difficulty was that the localStorage requires that the objects be saved as a stringified key value pair.
Again for this app I used webpack's HtmlWebpackPlugin to build the html file dynamically, however I am not fully sold on the benefits of it. Building the ***entire*** HTML file with JS felt much more time consuming for even a project of this scale and I feel that going forward a better middle ground would be to create the static elements (sidebar, header, etc.) in the index.html file and add dynamic elements (to do list info, etc.) with JS.