Learn about MAKING THE TO-DO LIST APP JavaScript : Now you know what the DOM is and how it works, let’s bring together all your new Code Skills and create the to-do list app.
At the start of the assignment, you learnt how to build a textbox and button using the < input/ > tag. Let’s take a look at that code again:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List App</title>
</head>
<body>
<p>Hello World! To-Do List</p>
<br/>
<input type="text" value="Type here to add task"/>
<br/>
<input type="button" value="Add item"/>
<br/>
</body>
</html>
At the moment the user can type a task into the textbox, but when user clicks on the button nothing happens. We have to use the DOM’s methods and properties to add an item to the list when the button is clicked.
Let’s start with the changes we need to make to our < body >. We need to add an onclick attribute to our < input/ > tag to make our button work. This onclick has to call a function.
We also need to create an empty < div > that will become our to-do list. When an item is added to the list, it will be added to this empty < div > using the DOM methods. Our < body > block will look like this:
<body> <p>Hello World! To-Do List</p> <br/> <input type="text" value="Type here to add task"/> <br/> <input type="button" value="Add item" onclick="addItem();"/> <br/> <div id="list"></div> </body>
Now let’s create a function in our code that will run when the onclick is clicked.
Our function needs to use the createElement method to make a new < div >.
This new < div > will be stored in a variable called newItem.
Then we need to use innerHTML to set the text inside our newItem variable.
Finally, we need to use getElementById to find the < div > with the id attribute “list“ in our body.
Then we can use appendChild to add our newItem to our list. Our < script > block in our < head > will look like this:
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = "New item";
document.getElementById("list").appendChild(newItem);
}
</script>
When we run this code in our browser the button works. The text “New item” is added to the list every time the button is clicked.
Now to make that text box work!
Adding your own tasks – Learn about MAKING THE TO-DO LIST APP JavaScript
Our app is really starting to take shape. Now an item is added to the list every time the user clicks the button.
But users can’t yet type an item into the textbox and add it to the list. Let’s see how we can allow a user to type in their own tasks.
We only need to change two lines in our code block to add the value of the text box to the list.
The first thing we need to do is in our < body >. We need to give the < input/ > tag for our textbox an id attribute of our choice, like this:
<input type="text" id="box" value="Type here to add task"/>
We’re then going to change our JavaScript in the < head > so that it sets the innerHTML of the new < div > to whatever value has been typed into the textbox.
To do that we have to use getElementById to find the textbox using the id attribute. We then access the value by making this change to our < script > block:
<script>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
</script>
Now user can replace the text in the textbox with the item they want to add to list. Our addItem function will set whatever text is typed into the textbox as the contents of the new < div >. The user can now add their own items to the to-do list.
Related Posts:
Building a web-based JavaScript game
Build to-do list web-app with code
Learn about Numpy Arrays in Python programming
Increase User Engagement & Why It Matters for SEO
Learn RE – Regular Expressions in Python
Layout and Design with division tag: div
Learn Multiple Function Arguments in Python
Learn BUILDING THE BASIC to-do list APP
Introduction to JavaScript – CONSOLE
Introduction to JavaScript – Variables: String Interpolation
