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).
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:
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.
Without the parentElement specified, you will only be able to delete the button and not the full task.
Try it out!
Top comments (0)