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.
