lista zakupów

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lista zakupów</title>
    <link rel="stylesheet" href="style.css">
  </head>
    <body>


    <div id="dodajElement">

     <h1>Lista zakupów</h1>


      <input id="element" type="text" maxlength="25">
      <button id="przyciskDodaj">Dodaj produkt</button>
      <button id="przyciskDrukuj">Drukuj</button>

      <p id="komunikat">


      </p>

      </div>

     <div id="doWydrukowania">
      <div id="kontenerLista">

      <ol  id="listaZakupow">

      </ol>


      </div>
      </div>


    <script>

      document.getElementById('przyciskDodaj').addEventListener('click',function(){

      const nowyElement = document.getElementById("element").value.trim();

      if (nowyElement!=''){
        document.getElementById('komunikat').textContent='';
        document.getElementById('listaZakupow').innerHTML += '<li>'+nowyElement+'</li>';
        document.getElementById('element').value='';
          }

  else{

           document.getElementById('komunikat').textContent='Uzupełnij pole';
        }
});


    document.getElementById('listaZakupow').addEventListener('click', function(e) {

      const  elementListy=e.target;

      this.removeChild(elementListy);
});


document.getElementById('przyciskDrukuj').addEventListener('click', function () {

  const obszarWydruku = document.getElementById('doWydrukowania').innerHTML;
  //ustawiamy obszar wydruku tylko na elementy naszej listy zakupów
  document.body.innerHTML = obszarWydruku;
  //okno drukowania
  window.print();
  //odświeżenie całej strony
  window.location.reload();
});

    </script>
  </body>
</html>


///////////////////////////////CSS//////////////////////////////

@import url('https://fonts.googleapis.com/css?family=Caveat+Brush&display=swap');
body {
  background-image:url('https://cdn.glitch.com/c9051263-269d-450f-930e-58a96d981a79%2Fnrd-D6Tu_L3chLE-unsplash.jpg?v=1584791624862');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: 'Caveat Brush', cursive;
}


#dodajElement {

  margin: 0px auto 0px auto;
  width:1000px;
  height:350px;
  text-align:center;
  padding:10px;
  background-color:#e8ebe9;
  border-radius:80px;
  }

li{
  margin-left:auto;
  margin-right:auto;
  width:200px;
  height:30px;
  border-radius:10px;
  padding:15px;
}

li:hover{

  color:red;
  cursor: pointer;
  text-decoration: line-through;
}

h1{

  font-size:80px;
}

#kontenerLista{
  font-family: 'Caveat Brush', cursive;
  font-size:40px;
  width:500px;
  background-color:#ffd35c;
  margin-left:auto;
  margin-right:auto;
  border-radius:10px;
  color:#003a91;
}
#przyciskDodaj, #przyciskDrukuj{
  width:180px;
  height:70px;
  background-color: #fa4a0a;
  color: white;
  font-size: 16px;
  border-radius: 4px;
  transition-duration: 0.4s;
  border: 2px solid #fa4a0a;
  text-transform:uppercase;


}


#przyciskDrukuj:hover,#przyciskDodaj:hover {
  cursor:pointer;
  opacity:0.6;
}

input{

  width: 330px;
  height: 30px;
  font-family: 'Caveat Brush', cursive;
  font-size:20px;
}

#komunikat{
  color:red;
  font-size:24px;
}