To-do list Project in Javascript
Program to create a to-do list project in HTML, CSS and Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
</head>
<body>
<div style="margin-left: 20%; margin-right: 20%; margin-top: 5%">
<h1 align="center" style="color: Green; font-family: Lucida Console"> My Task List</h1>
<br>
<div class="row" align="center" style="border: 2px solid green ;
border-radius: 20px;
height: 15%;
width: 60%;
margin-top: 20px;
margin-left:20% ;
margin-bottom: 3%; ">
<form>
<div class="input-group">
<input type="text" id="box" style="width:20vw; height: 2vw; margin-top: 20px; border: none; border-bottom: 2px solid green" placeholder="Add Task">
<br><br>
<div class ="form-group" style="width:20vw; margin-bottom: 50px" >
<input type="button" value="Add" style="width:5vw; height:3vw ; background-color : MediumSeaGreen ;float: right; border: none;border-radius: 8px; color: white" onclick="add_item()">
</div>
<ul id ="list_item" style="color: grey">
</ul>
</div>
</form>
</div>
</div>
<script type="text/javascript">
function add_item()
{
let item = document.getElementById("box");
let list_item = document.getElementById("list_item");
if (item.value != "")
{
let make_li = document.createElement("li");
make_li.appendChild(document.createTextNode(item.value));
list_item.appendChild(make_li);
item.value = "";
make_li.onclick = function(){ this.parentNode.removeChild(this); }
}
else
{ alert("Please add the task !")}
}
</script>
</body>
</html>
Video link: https://youtu.be/asXsfIqtcVk
Comments
Post a Comment