<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>to-do App</title>
</head>
<body>
<form id="ourForm">
<input type="text" placeholder="Itme" id="ourField">
<button>Create Item</button>
</form>
<div>
<h3>Need to do app</h3>
<ul id="ourList">
</ul>
</div>
</body>
</html>
<script>
let ourForm = document.getElementById('ourForm');
let ourField = document.getElementById('ourField');
let ourList = document.getElementById('ourList');
ourForm.addEventListener("submit",(e)=>{
e.preventDefault();
creatItme(ourField.value);
})
function creatItme(x){
let ourHtml = `<li>${x}<button onclick="removeItem(this)">Delete</button></li>`
ourList.insertAdjacentHTML("beforeend",ourHtml);
ourField.value = "";
ourField.focus();
}
function removeItem(removeitme){
removeitme.parentElement.remove()
console.log(removeitme)
}
</script>
No comments:
Post a Comment