To Do List Code-Along
Tags: javascript, codealong, beginners, project
Published: 2019-12-03 17:14:59

I came across a code-along on YouTube by "Youssef Code" that uses JavaScript and HTML/CSS to make a simple to-do list application:
{% youtube Gp2bUX7_WIg %}

This project seemed interesting and that it would be good practice for a beginner in JavaScript, so I gave it a try. I followed most of the code in the video, yet there were certain areas that I modified what was done in order to be more concise, clear, or to use methods that were taught to me. In this post, I'll walk through the code, and at the bottom I'll post a link to the code on my Github repository.

When I'm done, my final project will look like this:
![Final To Do List](https://thepracticaldev.s3.amazonaws.com/i/hyydl9tirgztolmtbaf8.png)

##Creating the HTML structure

This project requires creating three files in a directory: index.html, index.js, and style.css. The HTML file is pretty short. In the head, I linked the file to the stylesheet, and gave it a title:
```html
<head>
    <link rel="stylesheet" href="style.css">
    <title>To Do List</title>
</head>

```

In the body, I inserted an `<h1>` tag for the header, and created a few divs. The first div surrounds the input bar and button. The second div is where new items added to the to-do list will go. In the input div, I created an `<input>` element, giving it necessary class, type, and placeholder, as well as a `<button>` with the class `addButton`. At the bottom of the body, I linked to the JavaScript file.
```html
<body>
    <h1>To Do List</h1>
    <div class="input_div">
        <input class="input" type="text" placeholder="What Do You Want To Do?">
        <button class="addButton">+</button>
    </div>    
    <div class="container">
        <!--This is where items will go-->
    </div>
<script src="index.js"></script>
</body>

```

##Making it work with JavaScript

The logic of this application can all by found in index.js. At the top of this file, I declared a few variables globally that will be necessary to use later on:
```javascript
const addButton = document.querySelector('.addButton');
let inputValue = document.querySelector('.input')
const container = document.querySelector('.container');
```

Then, I created a class called `Item`. Inside the class I have a constructor, which takes in `itemName`. Inside the constructor, I called on an instance method called `createDiv` and pass in the itemName.

```javascript
class Item {
    constructor(itemName) {
        this.createDiv(itemName);
    }

...
}
```

Still inside the Item class, I created an instance method, `createDiv`, passing in `itemName`. This method first creates a variable called `input` which is an input, and is given the value of the `inputName`, a class of `item_input`, a type of `text`, and `disabled` is set to `true`. The text property `disabled` affects whether the field can be clicked on and altered. This is important for the editing function which will be implemented later on.

In the same method, I created a variable called `itemBox` which is a div, and is given the class of `item`. I appended `itemBox` to the `container` class, and appended `input` to the `itemBox`. I then created a variable called `editButton`, which is a button, and gave it text content of `Edit` and the class of `editButton`. I made a variable called `removeButton`, which is also a button, with the text content of `Delete` and the class of `removeButton`. I appended both the edit and remove buttons to `itemBox`.

Finally, in this method I added two event listeners, one for the edit button and one for the delete button. When the edit button is clicked, the method `edit` is called, which takes in `input`. When the delete button is clicked, the method `remove` is called, taking in `itemBox`.

```javascript
class Item {
    ...
    createDiv(itemName) {
        let input = document.createElement('input');
        input.value = itemName;
        input.disabled = true;
        input.classList.add('item_input');
        input.type = 'text';

        let itemBox = document.createElement('div');
        itemBox.classList.add('item');
        container.appendChild(itemBox);
        itemBox.appendChild(input);

        let editButton = document.createElement('button');
        editButton.textContent = "Edit"
        editButton.classList.add('editButton');
        itemBox.appendChild(editButton);

        let removeButton = document.createElement('button');
        removeButton.textContent = "Delete"
        removeButton.classList.add('removeButton');
        itemBox.appendChild(removeButton);

        editButton.addEventListener('click', () => this.edit(input));
        removeButton.addEventListener('click', () => this.remove(itemBox));

    }
    ...
}
```

The final two methods in the Item class are `edit` and `remove`. When `edit` is called, it changes the `disabled` method on the input--if it were previously `true`, and therefore unable to be changed, clicking edit will make `disabled` `false`, and therefore the input text can be altered. When `remove` is called, that `itemBox` is removed from the container:

```javascript
class Item {
    ...
    edit(input){
        input.disabled = !input.disabled;
    }

    remove(itemBox) {
        container.removeChild(itemBox)
    }
}
```

The final element in the JavaScript file is how items get added to the list. I added an event listener to the add button. When the button is clicked, it checks to see if the input value is not  empty, and if so it creates a new instance of the Item class, setting the `itemName` to the input value. After doing so, the input value is reset to an empty string.

```javascript
addButton.addEventListener('click', () => {
    if (inputValue.value != "") {
        new Item(inputValue.value);
        inputValue.value = "";
    }
});
```

##Just for looks: CSS
The video that I followed used a lot of CSS, and as I don't have much experience with it, I largely followed along with their code. There were, however, things I added that I thought improved the functionality of the program, or removed because I felt they were unnecessary or not in my personal style. For this part of the code-along, I will include the CSS block-by-block, and say generally what that block does.

```css
body {
    height: 100%;
    background-color: rgb(247, 123, 123);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
```
The body block targets the entirety of the body. These few lines are a good place to put style that will remain uniform for the program, such as background color and font.

```css
h1 {
    font-size: 3.5rem;
    font-weight: bold;
    text-align: center;
    color: black;
}
```

The `<h1>` tag is what says the name of the program, so it's valuable to make it large, bolded, centered, and contrasting against the background.

```css
.input_div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.input_div .input {
    padding: 0.5rem 1rem;
    height: 50px;
    outline: none;
    border: none;
    background-color: white;
    width: 450px;
    font-size: 1.15rem;
    margin: 0.25rem;
    border-radius: 25px;   
}
```

These blocks target the input. They center content, set sizes and padding, and change the text size.

```css
.addButton{
    height: 50px;
    width: 50px;
    border-radius: 25px;
    outline: none;
    border:none;
    background-color: black;
    color: white;
    font-size: 1.5rem;
    margin: 0.25rem;
    cursor: pointer;
}

.addButton:hover{
    background-color: cornflowerblue;
}
```

These blocks target the add button. They set the size and appearance of the button. The `:hover` block says what happens when the cursor goes over the button. In this case, it turns a shade of blue.

```css
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
}
```

The `container` div is where all of the items are contained. This block primary sets the styling for the items, and ensures they are stacked vertically rather than horizontally.

```css
.item{
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 4px solid black;
}

.item_input{
    background:none;
    outline:none;
    color: black;
    border: none;
    width: 350px;
    font-size: 1.4rem;
}
```

These blocks concern the inputted to-do list items, setting appearance and style.

```css
.editButton, 
.removeButton{
    font-size: 1.4rem;
    margin: 0 0.75rem;
    background: none;
    outline: none;
    color: white;
    border: none;
    cursor: pointer;
}

.editButton:hover, 
.removeButton:hover{
    color: cornflowerblue;
    font-size: 1.5rem;
}
```
The formatting for these two buttons was so similar that I combined them. These blocks set the style of the 'edit' and 'delete' buttons, and also make it so that they turn blue and get larger when hovered over.

-----------------

And that's all it takes to make a clean, functional to-do list app using vanilla JavaScript, HTML and CSS! Here is my Github repository if you'd like to try it out yourself:

{% github alisabaj/toDoList no-readme%}