// Define variables for the shopping list
var input = document.getElementById("userinput");
var button = document.getElementById("enter");
var ul = document.querySelector("ul");
var list = document.getElementsByTagName("li");
var trash = document.getElementsByClassName("delete");
var btndelete = document.getElementById("trash");
// Add event listeners to remove items with the delete button
Array.prototype.slice.call(trash).forEach(function(item) {
item.addEventListener("click", function(e) {
e.target.parentNode.remove();
});
});
// Add strikeout effect when clicking on list items
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", strikeout);
}
// Toggle between classes to add or remove strikeout style
function strikeout() {
this.classList.toggle("done");
}
// Check the length of the entered string
function inputlength() {
return input.value.length;
}
// Collect data from the input and create a new list item
function addli() {
var li = document.createElement("li");
var btn = document.createElement("button");
btn.className = "delete";
btn.innerHTML = "delete";
btn.addEventListener("click", function(e) {
e.target.parentNode.remove();
});
li.addEventListener("click", strikeout);
li.innerHTML = input.value + " ";
li.appendChild(btn);
ul.appendChild(li);
input.value = "";
}
// Add a new list item after clicking the button
function addListAfterClick() {
if (inputlength() > 0) {
addli();
}
}
// Add a new list item when pressing Enter key
function addListKeyPress(event) {
if (inputlength() > 0 && event.which === 13) {
addli();
}
}
// Listen for keypress events on the input field
input.addEventListener("keypress", addListKeyPress);
// Listen for click events on the button to add a new list item
button.addEventListener("click", addListAfterClick);
.coolTitle {
text-align: center;
font-family: 'Oswald', Helvetica, sans-serif;
font-size: 80px;
transform: skewY(-10deg);
letter-spacing: 4px;
word-spacing: -8px;
color: tomato;
text-shadow: -1px -1px 0 firebrick, -2px -2px 0 firebrick, -3px -3px 0 firebrick, -4px -4px 0 firebrick, -5px -5px 0 firebrick, -6px -6px 0 firebrick, -7px -7px 0 firebrick, -8px -8px 0 firebrick, -30px 20px 40px dimgrey
}
.done {
text-decoration: line-through;
}
<h1>Shopping List</h1>
<h2 class="second"> Get it Done </h2>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id="bold">
<li random="24">Eggs <button class="delete">delete</button></li>
<li>Milk <button class="delete">delete</button></li>
<li>Cereal <button class="delete">delete</button></li>
<li>Chicken <button class="delete">delete</button></li>
<li>Oreos <button class="delete">delete</button></li>
</ul>