cg-09-task-list

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Hello World!</title>
    <link rel="stylesheet" href="/style.css" />
    <script src="/script.js" defer></script>
  </head>

  <body>
    <div id="addElement">
      <h1>Shopping List</h1>

      <input id="element" type="text" maxlength="25" />
      <button id="addButton">Add Product</button>
      <button id="printButton">Print</button>

      <p id="message"></p>
    </div>
    <div id="forPrinting">
      <div id="listContainer">
        <ol id="taskList"></ol>
      </div>
    </div>
  </body>
</html>


============================= 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 +=
      "<li>" + newElement + "</li>";
    // 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%;
}