In this project, we'll practice more vanilla JS DOM manipulation by creating a simple To Do List project. The basic HTML and CSS have been provided for you, and you will be adding in the Javascript to make the interface interactive.
In this step, we'll start creating our Javascript function for adding a todo item to our list when the Add
button is pressed. We'll need to add the event listener, get the value from the input box, and create a new element in the list.
- In
index.js
, create a new function calledaddTodo
that takes in anevent
as a parameter. - Use
document.createElement
to create a newli
element that will hold our new todo item. - We need to get the value of our input field to add it to our list. Use
getElementById
to get thevalue
property of the input. - Set the
innerText
property of our recently createdli
element to thevalue
of the input we just found. - Then, use
querySelector
to find theul
element in our page and useappendChild
to insert theli
element we created into the DOM. - Finally, outside of your function, use
addEventListener
to listen for asubmit
event on theform
element and run theaddTodo
function. - Run the project and give it a try -- it doesn't work the way we expected. Because our
button
is inside aform
element, it has a default action that is also running and interfering with our code. To fix this, at the beginning of theaddTodo
function, addevent.preventDefault()
/index.js
document.querySelector("form").addEventListener("submit", addTodo);
function addTodo(event) {
event.preventDefault();
const item = document.createElement("li");
item.innerText = document.getElementById("item").value;
const list = document.querySelector("ul");
list.appendChild(item);
}
Now that we can add a todo item, we need to be able to remove them as well. In this step, we'll make some changes to our addTodo
function so we have a way to remove todos. We'll need to add a delete button to each todo item and create an event listener for it.
- In the
addTodo
function, after setting theinnerText
of the newli
element, usecreateElement
to create a newbutton
element. - Use
innerText
to put anx
inside the button. - Use
addEventListener
to listen for aclick
event on the button and run theremoveTodo
function. We will create that function later in this step. - Now that the button has been created, add it to the
item
variable usingappend
. - Finally, outside of the
addTodo
function, create a new function calledremoveTodo
that takes in anevent
parameter. When we click the button, we want to remove the entire list item. Since the button is a child of the list item, we can useevent.target.parentNode.remove()
to remove the entire list item.
/index.js
document.querySelector("form").addEventListener("submit", addTodo);
function addTodo(event) {
event.preventDefault();
const item = document.createElement("li");
item.innerText = document.getElementById("item").value;
const button = document.createElement("button");
button.innerText = "x";
button.addEventListener("click", removeTodo);
item.append(button);
const list = document.querySelector("ul");
list.appendChild(item);
}
function removeTodo(event) {
event.target.parentNode.remove();
}
Now that we can add and remove items from our to do list, we can finish our app by allowing users to mark items as complete by clicking on a todo item. The CSS has already been set up to display list items differently if they have the aria-checked
attribute set to 'true'
. We need to create a function that will toggle the aria-checked
attribute between 'true'
and 'false'
.
- In
index.js
, create a new function calledcompleteTodo
that takes in anevent
as a parameter.- Later, we will need to add this as an event handler for every list element.
- Use
event.target.getAttribute
to get the current value of thearia-checked
attribute for the element that was clicked. - If that value is not currently
'true'
, usesetAttribute
to change its value to'true'
. Otherwise, usesetAttribute
to change its value to'false'
. - Finally, we need to add this function as an event handler for every item. In the
addTodo
function, after you create theli
element, useaddEventListener
to listen for aclick
event and run thecompleteTodo
function.
/index.js
document.querySelector("form").addEventListener("submit", addTodo);
function addTodo(event) {
event.preventDefault();
const item = document.createElement("li");
item.innerText = document.getElementById("item").value;
item.addEventListener("click", completeTodo);
const button = document.createElement("button");
button.innerText = "x";
button.addEventListener("click", removeTodo);
item.append(button);
const list = document.querySelector("ul");
list.appendChild(item);
}
function removeTodo(event) {
event.target.parentNode.remove();
}
function completeTodo(event) {
const value = event.target.getAttribute("aria-checked");
if (value !== "true") {
event.target.setAttribute("aria-checked", "true");
} else {
event.target.setAttribute("aria-checked", "false");
}
}
There is an aside
element with a success message that should be displayed to users when a todo item is marked as completed. Add the Javascript needed to display that message for 2 seconds after a todo item is marked as complete. Hint: You may have to make some changes to removeTodo
to keep the message from showing at the wrong time!
If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.
© DevMountain LLC, 2018. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.