<!DOCTYPE html> <html> <head> <title>Grocery list</title> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link rel="stylesheet" href="grocery_style.css"> </head> <body> <div class="container"> <div class="groceries"> <h1 style="text-align: center;">Grocery list</h1><br> <p style="text-align: center">Enter the items below:</p><br> <div style="text-align:center"> <input id="userinput" type="text" ><br><button class="btn btn-success" onclick="additem()" value="Add">Add Item</button> "deleteall" class="fas fa-trash-alt"> </div> <br> <div id="allitems"></div> </div> </div> <script src="grocery.js"></script> </body> </html>
const groceries = document.getElementsByClassName("groceries")[0]; const deleteall=document.getElementById("deleteall"); const allitems=document.getElementById("allitems"); const userinput=document.getElementById("userinput"); userinput.addEventListener("keydown",function(event){ if(event.key == "Enter") additem(); }) function additem(){ var li= document.createElement("li"); li.innerHTML=userinput.value; if (userinput.value == "") { alert("Enter some item"); return false; } li.addEventListener("click",function(){ if (li.style.color === "black") { li.style.color = "red"; } else { li.style.color = "black"; } }) allitems.insertAdjacentElement("beforeend",li); userinput.value=""; } deleteall.addEventListener("click",function(){ allitems.innerHTML=""; })
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)