to do list with delete and add function
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
.col-12{
border: 5px solid black;
padding: 100px;
border-radius: 15px;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1>To-do-List.</h1>
<input id="inputField" type="text" >
<button type="text" onclick="myFunction()">Submit</button>
<button>clear-list</button>
</div>
</div>
</div>
<!-- creating a list in html -->
<ul id="valueList"></ul>
<script>
// creating variables and function to add in item in the list
function myFunction() {
var inputVal = document.getElementById("inputField").value;
var li= document.createElement("li");
var textNode = document.createTextNode(inputVal);
li.appendChild(textNode);
// adding a delete and its function
var deleteButton=document.createElement("button");
deleteButton.innerHTML="delete";
deleteButton.onclick=function(){
li.parentNode.removeChild(li);
};
li.appendChild(deleteButton);
// Showing the items of the list and clearing
document.getElementById("valueList").appendChild(li);
document.getElementById("inputField").value = "";
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Comments
Post a Comment