ToDolist javascript
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li span{
position: relative;
left: 20vw;
font-size: 20px;
}
ul li span:hover{
background-color: red;
}
</style>
</head>
<body>
<input type="text" name="nm" id="nm">
<input type="submit" value="add" onclick="addData()">
<ul id='list-container'>
</ul>
<script src="script/script.js"></script>
</body>
</html>
javascript:
const val=document.querySelector('#nm')
const listcontainer=document.getElementById('list-container');
function addData(){
if(val.value===""){
alert('please write something');
}
else{
const newelement=document.createElement('li');
newelement.innerHTML=val.value;
listcontainer.appendChild(newelement);
const span=document.createElement('span');
span.innerHTML="\u00d7";
newelement.appendChild(span);
}
val.value="";
saveData();//save data called
}
//remove element:--
listcontainer.addEventListener('click',function(e){
if(e.target.tagName=='SPAN'){
// alert(e.target.tagName);
e.target.parentElement.remove();
saveData();
}
})
//save data:--
function saveData(){
localStorage.setItem('data',listcontainer.innerHTML);
}
//showdata:--
function showTask(){
listcontainer.innerHTML=localStorage.getItem('data');
}
showTask();
Comments
Post a Comment