Shopping List

    ============================= JavaScript ================================== // event when the user clicks on the add button document.getElementById("addButton").addEventListener("click", function () { // to the variable we assign the text that the user typed in the input field const newElement = document.getElementById("element").value.trim(); // if the text is different from empty i.e. the user has typed a string of characters if (newElement != "") { // we clear the possible message document.getElementById("message").textContent = ""; // we add a new item to our numbered list document.getElementById("taskList").innerHTML += "
  1. " + newElement + "
    2. "; // clear the input field document.getElementById("element").value = ""; } else { // we display a message because the user has not entered anything document.getElementById("message").textContent = "Fill the field"; } }); // event after clicking on the task list document.getElementById("taskList").addEventListener("click", function (e) { //write the reference to the list element that was clicked to a variable const elementList = e.target; //remove the clicked list element this.removeChild(elementList); }); document.getElementById("printButton").addEventListener("click", function () { const printArea = document.getElementById("forPrinting").innerHTML; //we set the print area only for the elements of our task list document.body.innerHTML = printArea; //print window window.print(); //refresh the entire page window.location.reload(); }); ================================== CSS ================================== @import url("https://fonts.googleapis.com/css?family=Caveat+Brush&display=swap"); body { background-image: url("https://cdn.glitch.com/cd3369a7-e614-49a9-93c1-8871829b4d63%2Fandrew-neel-cckf4TsHAuw-unsplash.jpg?v=1584885423509"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; font-family: "Caveat Brush", cursive; } #addElement { margin: 0px auto 0px auto; width: 1000px; text-align: center; padding: 10px; } li { margin-left: auto; margin-right: auto; width: 200px; height: 30px; border-radius: 10px; padding: 10px; } li:hover { color: red; cursor: pointer; text-decoration: line-through; } h1 { font-size: 5em; color: white; } #taskList { font-family: "Caveat Brush", cursive; font-size: 32px; width: 500px; background-color: #ffd35c; margin-left: auto; margin-right: auto; border-radius: 10px; color: #003a91; } #addButton, #printButton { width: 200px; height: 50px; background-color: #fa4a0a; color: white; padding: 15px 32px; font-size: 16px; border-radius: 4px; transition-duration: 0.4s; border: 2px solid #fa4a0a; text-transform: uppercase; } #printButton:hover, #addButton:hover { cursor: pointer; opacity: 0.8; } input { width: 330px; height: 30px; font-family: "Caveat Brush", cursive; font-size: 20px; } p { color: white; font-size: 180%; }