Todo List Application Case Study

#Project-Goals

Build a todo list application that follows the 4 principal CRUD operations: Create, Read, Update, and Delete. And learn a thing or two about CRUD.

#What-The-CRUD

CRUD is an acronym that stands for Create, Read, Update and Delete. Think of it as a simple concept that represents the four basic functions that applications should be able to do and are considered necessary to implement a persistent storage application. Or in simpler terms, it represents the four basic operations you can do on any data. You can create something new, read or view the newly created data, update (or edit) the data, and finally be able to delete it.

To read more on CRUD operations you can view the CRUD Wikipedia Page.

#Project-Intro

To understand and work with CRUD operations, I decided to make a Todo List Application. Not only is a Todo List a perfect project to incorporate the CRUD operations but it is also an application that I can use ad benefit from on my web development journey.

##What-We-Need

Based on my understanding of CRUD, I know that this Todo List Application will need to be able to do the following:

• CREATE - user should be able to create a new todo task or tasks

• READ - user should be able to see the task(s) they created

• UPDATE - user should be able to update or edit the task(s)

• DELETE - user should be able to delete task(s)

#Create

The first step of this Todo List Application was to figure out a way for the user to input or create something and take the user's input and do something with it.

To do this I created a form with a text input. I then targeted that form and attached an event listener to it.

I next took the value of the user’s input and assigned it to a variable task. I then logged the variable to the console to see if I was successfully able to get the value or if there was some error instead.

Huzzah! I was able to successfully get the user’s input!

#Read

Next up, I had to render the data on the DOM so the user can read or view it. I created an empty array and assigned it to a todos global variable. Then back in my user input addTodo code block, I created a if statement that runs if the user input value is greater than 1 character. If it passes then the user’s value will be pushed into the todos array. This way the user can submit multiple tasks and they will all be added to an array.

But before the todos array gets updated and after the user submits an individual task, the renderOnDom function is called on line 31 and the function runs on line 10.

The renderOnDom function essentially takes the todos array and created a list item with each item in the array. I added a ul to the HTML and then updated the innerHTML with each li.

##Challenges

One issue I quickly stumbled upon after being able to render the user’s task inputs was that they would dissapear once the browser refreshes as the inputs were not being saved anywhere.

I researched ways to save the data in this Todo List App and came across the Window.localStorage property. localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed. Since I am not dealing with large amounts of data, this property is just what I need versues a large database.

I started in my addTodo event handler code block. Instead of pushing the user’s input into an array, I now took the data, JSON.stringify-ed it to convert it to a JSON string, and set it to the localStorage via setItem under the key todo-list. I also gave each task a new key:value pairing of taskName:newTodo.

I was able to successfully set the user’s input into the window’s local storage and created an if statement that would run when the browser refreshes. It checked to see if todos has any data (or if it’s truthy) and then takes the data, JSON.parse it so it becomes a JS Object, and then calls the renderOnDom function to display the data.

#Update

The update portion was the first major challenge of this Todo List Application. I had to figure out a way for the user to edit the input they submitted and get the new input onto the DOM and I was not completely sure how to even begin.

So…I began with what I did know. I knew there had to be something the user can click on to start the update process. With that said I added an edit click handler on each task input so the user can click on it which will lead to them being able to edit tasks.

##Challenges

Now comes the challenging part of allowing the user to edit task that were already submitted and being shown on the DOM. I knew that I would have to somehow target whatever task was clicked on and then call another function to do something.

In this instance, and for the sake of change, I decided to add and onClick event handler directly on my edit button. When it is clicked, I took the ID of the current todo along with its taskName and passed it into and call a new editTask function

The editTask function takes the current taskName, and pends it back to the addTodos input field, when it is submitted the new value is then added to the todos object and rendered onto the DOM. I then used a .slice method to remove the original task from the list since we no longer need it.

PSA:
I do realize that the approach I used to edit the task is not the best. First off, I am not truly editing the task but instead just creating a new one and deleting the old one. The way I am doing it is not true editing. At the time of writing this case study and working in this application, I do not have another solution. I do not want to get fixated on trying to solve this issue but rather try and finish the applicastion and this case tudy. I will be sure to come back at a later time to find a better solution and update this case study.

#Delete

We are at the final leg of this CRUD project and all that is left is to find a way to allow the user to delete task. Just like the edit process, I began with creating something the user can click to run a function that will do what I need it to do. I created a delete click handler next to the edit button which will pass the current task id into and call the function deleteTask.

The deleteTask function takes the current task id and removed it from the todo object via .slice. The todo object is then set to localStorage to be updated and finally renderOnDom is called yet again to show changed on the DOM.

#Conclusion

This was by far one of the most frustrating, eye gouging, head smashing, and rewarding projects I have done so far. I feel I was able to get a better understanding of not only the CRUD operations but insight on how to make one and the awareness that there are hunfreds of ways to accomplish it.

There are many updates I want to and will be doing to this CRUD application in the future such as:

• Finding a better way to edit task then the way I currently have it

• Have a delete all button so user can delete entire list rather than one by one

• Allow users to check off task they completed and have it go to a completed section

So stay tuned boys and girls and make sure to come back to this article to see the changes I have made.