Learn about MAKING THE TO-DO LIST APP JavaScript

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 attributelist“ 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:

JavaScript Glossary

Building a web-based JavaScript game

Build to-do list web-app with code

Adding Python Comments

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

W3School HTML input Tag

Learn Python Lists

Learn BUILDING THE BASIC to-do list APP

Introduction to JavaScript – CONSOLE

Introduction to JavaScript – Variables: String Interpolation

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.