<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocery List</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #828488;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
position: relative;
background-color: white;
box-shadow: 0 0 10px rgb(44, 44, 44);
padding: 20px;
border-radius: 8px;
width: 500px;
}
h1 {
font-family: 'Poppins', sans-serif;
font-size: 35px;
margin-left: 140px;
margin-bottom: 20px;
color: #080808;
}
.ed {
display: flex;
}
#input_item {
width: calc(100% - 60px);
height: 25px;
padding: 10px;
border: 1px solid #ebe5e5;
background-color: rgb(216, 210, 210);
border-radius: 6px;
margin-right: 10px;
}
#btnTask {
width: calc(45% - 60px);
height: 40px;
padding: 10px 10px;
border: none;
background-color: #9d0ea1;
color: rgb(250, 249, 249);
border-radius: 6px;
cursor: pointer;
margin-top: 5px;
}
#btntask:hover{
background-color: aqua;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid rgb(215, 221, 221);
background-color: rgb(197, 224, 248);
border-radius: 10px;
margin-top: 20px;
}
.btnRemove {
border: none;
background-color: red;
color: white;
padding: 5px 7px;
border-radius: 7px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div>
<h1>Grocery Item </h1>
</div>
<div class="ed">
<input type="text" id="input_item" placeholder="Add a new item">
<button id="btnTask">Add</button>
</div>
<div>
<ul id="taskList"></ul>
</div>
</div>
<script>
var button = document.getElementById("btnTask")
var tasklist = document.getElementById("taskList")
button.onclick = function () {
if (input_item.value == "") {
alert("You must write something!")
} else {
var task = document.getElementById("input_item").value
var li = document.createElement("li")
var taskSpan = document.createElement("span")
taskSpan.innerHTML = task
li.appendChild(taskSpan)
var removeButton = document.createElement("button")
removeButton.innerHTML = "Remove"
removeButton.className = "btnRemove"
li.appendChild(removeButton)
tasklist.appendChild(li)
removeButton.onclick = function () {
tasklist.removeChild(li)
}
}
document.getElementById("input_item").value =""
}
</script>
</body>
</html>
More Projects by Saboor
Resources
Dіscover Freelancers