Hey all!
Back from the holidays!
So this week what did I do?
Well I definitely didn't make two videos that's what I didn't do!
I decided to create a todo list app using typescript, OOP, bootstrap, and the local storage API to not only create to dos but also preserve them per visit!
How did I do that?
Well it starts off with some basic stuff, I get a hold of the form element on the page and created a ToDo item on it's submission!
I've done OOP stuff here before so I basically just created 2 classes, a parent to do item list and an array of todo items, that gets each new todo item pushed to it!
Only real difference here is that I have a couple of special behaviors on the todo list and the todo items that help me both update the items in local storage, delete them, and rerender the app when one of those things happen!
So breaking down the code I start off the script by first actually checking local storage for my todos (basically to see if they are stored) then pass whatever the result of that ternary operation is to my todo list instance (along with the reference container that the todos will be contained within):
I then tell that todo list to run the render method!
Breaking down the ToDoList class. It maps over the already existing todos from local storage and creates an internal array of instances of ToDo's!
Those ToDos are passed in the id of the todo (a unique id that's created at creation for them), the name, description, a reference to the container, and a reference to the parent class)
Adding and removing a todo are pretty simple! They basically just run these methods which pushes or filters the todo list array, updates the html in the page, and sets the new local storage item based on the new data!
Only tricky thing about the localStorage is that you can't really pass references class references around in it so when I set the item in local storage I only map what is absolutely necessary for creating a todo item by stringifying the data like so:
Each todo item has a render method that creates the html of the todo item and will replace the existing one if it already exists on render (as well as update the event listeners for each item)!
When the todo list runs render itself it just loops through these todos and runs this method.
The generate html function essentially creates a div with the necessary html inside of it for the todo item, and returns 2 things:
- A reference to the element (if one exists)
- The new html
The event listeners are added after the element is appended for the update and the delete functions. These use the ID of the item to either run a form to update the element within the todo item or just run remove on the class list (that just filters, updates the local storage, and then rerenders):
There's a lot that went into this code and it was really fun so you guys should go and check it out!
Here's the live app and the code:
Code: https://github.com/barnettet31/promineo-week-10
Live App: https://barnettet31.github.io/promineo-week-10/
Anyways, onwards and upwards!
-Travis
