I created a Todo app which receives input from a text field and adds it to a list below it and when that todo is created, a delete button, a checkbox and a timestamp is also added. Now, I'm trying to write a code which when I check the checkbox, it crosses out the text in next and marks it Completed. Below is the HTML and JavaScript code.
HTML Code
<!doctype html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Todo App</h1>
<input type="text"> <button> Add </button>
<p> Todo List</p>
<ol>
</ol>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
**JavaScript Code**
var input = document.querySelector("input");
var button = document. querySelector("button")
var ol= document.querySelector("ol")
var date=new Date();
button.addEventListener("click", function(){
var checkbox = document.createElement("input");
checkbox.type="checkbox";
var li=document.createElement("li");
var label= document.createTextNode(input.value);
var text=document.createTextNode("Delete");
var click=document.createElement("button");
var dat = document.createTextNode(date);
click.appendChild(text)
li.appendChild(label);
li.appendChild(checkbox);
li.appendChild(click);
li.appendChild(dat);
ol.appendChild(li);
input.value="";
})
Please how can I do this, thanks?
Aucun commentaire:
Enregistrer un commentaire