Understanding Task Lister Lite
Tags: javascript, flatiron, beginners, codenewbie
Published: 2020-08-26 04:51:17

I said I'd cover MVC in my next few posts. Today, I am a liar.

I started mod-3 of Flatiron this week and Task Lister gave me some trouble. It's our first week of javascript and I'm hoping this blog will help break things down.

Let's start off with the HTML.

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flatiron Task Lister</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="main-content">
      <h1>Task Lister Lite™️</h1>

      <form id="create-task-form" action="#" method="post">
        <label for="new-task-description">Task description:</label>
        <input
          type="text"
          id="new-task-description"
          name="new-task-description"
          placeholder="description"
        />
        <input type="submit" value="Create New Task" />
      </form>

      <div id="list">
        <h2>My Todos</h2>
        <ul id="tasks"></ul>
      </div>

      <script src="./src/index.js" defer></script>
    </div>
  </body>
</html>

```

The main point of this lab is to allow you to to create tasks and them to the list.

To start off, we'll need to load the HTML before the javascript text.

You can do this in a few ways:
#defer
in your index.html you can add `defer` to the script section so it will look like this:
 ```
#index.html
<script src="./src/index.js" defer></script>
```

#DOMContentLoaded
in your /src/index.js file, it should look something like this:

```
#index.js
document.addEventListener("DOMContentLoaded", () => {
  // your code here
});
```

or moving the script to the very bottom of the body. That will look something like this:
```
#index.html
//a bunch of previous code
    </div>
    <script src="./src/index.js" ></script>
  </body>
</html>
```

Long story short, you'll learn to choose one or the other and run with it. You need to load the HTML before you can run the script and these methods allow the HTML file to fully load before the JS begins.

You can open the index.html file in your browser with an extension called `Live Server`. 
Now, once that's done, here's what it should look like. (Colors may vary).

![task lister](https://i.imgur.com/JsMTOdh.png)

If you click around, you'll notice nothing works! This is where the javascript comes in.

##Let's get it

To start off, we need to create a constant that's identifying the form.
```
#index.html
      <form id="create-task-form" action="#" method="post">
```

We can gain access to this by doing a document.querySelector("#create-task-form");

```
#index.js
const taskForm = document.querySelector("#create-task-form");
``` 

##Why are we doing this?

The main deliverable is that a user should be able to add a task-based off of their description and then press submit. Then, it should populate below.

 
Now we have the `taskForm` variable. We'll need another a few more. We want to take the data from the taskForm and add them this section in the html.
```
#index.html
      <div id="list">
        <h2>My Todos</h2>
        <ul id="tasks"></ul>
```

We can do this by using another document.querySelector. It'll look like this:
`const taskList = document.querySelector("#tasks");`

Wonderful!

Typically with form data, when you press submit a `post` request will be made. Its _default_ behavior is something we're going to prevent. How?

Through this:
```
#index.js
taskForm.addEventListener("submit", function (event) {
  event.preventDefault();
```

This stops what would usually happen when you press submit!

So, great. We've stopped the regular behavior but now what do we want to do with the form data we received? We can take a look at what's being passed through the form.

```
#index.html
<form id="create-task-form" action="#" method="post">
        <label for="new-task-description">Task description:</label>
        <input
          type="text"
          id="new-task-description"
          name="new-task-description"
          placeholder="description"
        />
```

This is the section that responds to where we're filling in the data on the website. This input field actually has a `value` once we press submit. We can access that by doing the following.

```
#index.js
  const newTask = document.querySelector("#new-task-description").value;
```
This sets newTask to be the **value** of the new-task-description field.

So now that we have the value of whatever task we typed in, we need to add that to our `taskList.`

```
#index.js
TaskForm.addEventListener("submit", function (event) {
  event.preventDefault();
  const newTask = document.querySelector("#new-task-description").value;

## NEW CODE ##
  taskList.innerHTML += `<li> ${newTask}
  </li>`;

});
```
We take the **value* from `#new-task-description` and add that to `taskList.innerHTML`.

Type a new task into your browser and it will look something like this:
![new tasks added](https://i.imgur.com/NoI8y3t.png)

You were able to create a new task! Note, once you press submit, the created task is still in the form field. We can delete that by adding the following.

```
#index.js

const taskForm = document.querySelector("#create-task-form");

const taskList = document.querySelector("#tasks");

taskForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const newTask = document.querySelector("#new-task-description").value;

  taskList.innerHTML += `<li> ${newTask}
  </li>`;
###NEW CODE###
  // taskForm.reset();
});
```
This takes the taskForm and resets it each time a task is submitted.

Finally, we're going to create delete button. How would we do this? Simple!


```
#index.js

taskForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const newTask = document.querySelector("#new-task-description").value;

  taskList.innerHTML += `<li> ${newTask}
###NEW CODE###
  <button data-action = "delete"> X </button>
  </li>`;
##############
  taskForm.reset();
});
```

With each addition of a task, we add a button with the label "X". This could be anything you'd like. We now have a button but if you press it, nothing will happen. We need to create one more function that will "listen" for a click.

```
#index.js
taskList.addEventListener("click", function (e) {
  if (e.target.dataset.action === "delete") {
    e.target.parentElement.remove();
  }
});

```

We create another Event Listener that's waiting for a user to click on the x. Once we do that, we're making sure that if the action, delete, of the function matches with `<button data-action>` we remove the **parent element** of the button which will be the full list item.

![li](https://i.imgur.com/NWMrcma.png)

Without the parentElement specified, you will only be able to delete the button and not the full task.

Try it out!