Making a todo app in JavaScript

In an effort to improve my JavaScript skills, I've decided to make a todo app

So, lets get started.

The first thing that I do is setup my html file, index.html.

Next I create an empty script file scripts.js to hold all of my javaScript code

The last file I will need is a stylesheet.css



Awesome, so the next thing that I like to do is make sure that my stylesheet, html and my script files are all connected correctly. I usually do this by making an element and then trying to change it somehow, be either color, size, shape, location, etc. Just to make sure it worked. As far as the scripts file, I can just use console.log to get the innerHTML of a p tag.

Now that we know everything is working correctly, there's no typos or issues with paths, lets get working on creating our layout.

I want to get an idea of what I need to build, so I'm going to list all of the features that I want.

1. I will need an input tag so I can write my todos.
2. I will need a space to display all of the todos, once they are created
3. I want a delete button to get rid of ones that are incorrect.
4. I want a completed button for when I complete a todo
5. 1 want a submit type button so I can add a todo to the list



So, I've changed the background, added a div with a white background, created headers (h1 tag) to give the page a body title (as opposed to having a title in title tags).

Here is what it looks like so far:

Ok, so now we want to add our input tag(s), plural because our submit button is actually an input tag. We need to also wrap these in a form tag to actually be able to submit the todo.


Here's what our code looks like.

After getting all of that setup, the next thing that I like to do is to create the container that's going to hold each of our todos. This will allow me to style it the way I want and then when the user submits the form. To do this, I created a new div. Inside the div, I created 2 other divs, 1 floated to the left, which will hold the words of the todo, 1 floated to the right that holds the buttons for either completing the div or deleting it.

So, this is what I have so far:

Now, lets make our Add Todo button work. We want to use an onsubmit function in our form, which will call the method addTodo

If you look at the code below, you will see the addTodo function, that takes in an argument of event. The event is what is triggered when you click the button. We want to prevent the standard form submit from attempting to load a page.

On Line 3, we are getting the value of what is in the input tag and storing it in the value variable. Since this value won't change until the next time the function is called we can use Const, rather than Let.
Next we call our next function, using the value variable that we just created as the argument. We are passing the input the user gave us from 1 function to another.
The last thing we do is to clear the input tag so that the user can enter additional data.



Next up, we work with the next function, our addTodoToArray function. I originally named it this way, because I thought I would need an array to keep track of all of the todo values, but later determined that it wasn't necessary. I decided to keep the name the same to make things easier.

This function is responsible for updating our id value. We create id's for our todo's so that when we go to delete one, we can reference the one that we want to delete instead of deleting all or none of them, same thing goes for marking them complete.

I decided it would be easiest to create a hash for each todo and the corresponding id. It will look like this:

So, inside the function updates the count so that each todo gets it's own id number, and then value of the text gets assigned as the value of the text key. 

Now, we will pass this hash to the next function I set up, called updateList. This is the html template that we are going to be adding to our container div. 

Here is what that looks like: 

I decided to use the jquery library to append the updated code to the container div that I setup. To get the buttons to work correctly, I used onclick event handlers and pass in the id that I create each time a new todo gets added. This allows me to reference the correct todo when I go to delete or complete the task. 

So, everytime I click on the Add Todo button, the onSubmit fires and calls the function that gets the value that I typed into the input tag. Then, when that's done, it calls the next function and passes in the value. That function takes the value, puts it in a hash, and creates an id. It then calls the next function. That function takes the hash, applies the values in the correct spots in the html that we want to insert into the container div and then updates the code on the page. 

The last 2 things we have to do are the complete and the delete buttons. 

The complete button, I used javaScript and css to do a strike-through. So, everytime the button is clicked, my javascript code updates the css. 

The above code, first finds the css class that we created with the value of our id. It then looks for the <h3> tag and sets the textDecoration attribute. I also added a text-decoration-style attribute to make the line more prominent.


The final piece, the delete button

This function, takes in an id as an argument, converts it from a string to an integer and then calls the jquery function remove() to remove it from the dom.

So, there you have it. A basic todo app written in html, javaScript and css, with a little help from jquery. 

Here is the final product: 

.
If you want to see all of the code, check it out on github.