Learn BUILDING THE BASIC to-do list APP

Learn BUILDING THE BASIC to-do list APP : Let’s build a basic app. The app should have a text box and a button that user can use to add his tasks to the list.

Use the DOM and JavaScript so that when the button has clicked the task in the box will be added to the list.

1) Open up your text-editing program. Create a new HTML file called basicapp.html. Then copy following code from below into your new file. Modify your code so that the text box has an id attribute of your choice, like this:

<!DOCTYPE html>
<html>
<head>
 <title>To-Do List App</title>
</head>
<body>
 <p>Hello World! To-Do List</p>
 <br/>
 <input type="text" id="box" value="Type here to add task"/>
 <br/>
 <input type="button" value="Add item"/>
 <br/>
</body>
</html>

2) Add an empty < div > at the bottom of your < body >. Give your < div > an id attribute of your choice, like this:

<input type="button" value="Add item"/>
 <br/>
 <div id="list"></div>

3) Now add an onclick attribute to your button < input/ > tag. Set your onclick to call a JavaScript function.

Your code will look like this:

<input type="button" value="Add item" onclick="addItem();"/>

4) Add an empty JavaScript function to your < head >. Your < script > block needs to look like this:

<head>
 <title>To-Do List App</title>
 <script>
 function addItem() {
 }
 </script>
</head

5) Now use the DOM to code a function called addItem that will create a new < div > when the button is clicked.

The function will then use innerHTML to set the value of the < div > to the value in the text box.

Finally the function will use appendChild to add the new HTML element to the < div > in your < body >.

Your code will look like this:

<script>
 function addItem() {
 var newItem = document.createElement("div");
 newItem.innerHTML = document.getElementById("box").value;
 document.getElementById("list").appendChild(newItem);
 }
 </script>

6) Save your HTML file and open it in your browser. You will now be able to replace the text in the text box with an item for the list.

When you click on the button, the item typed into the text box will be added to the list.

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.