lista zadań

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


      <div id="dodajElement">

     <h1>Lista zadań</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="listaZadan">

      </ol>


      </div>
      </div>


    <script>

      // zdarzenie po kliknięciu w przycisk dodaj
      document.getElementById('przyciskDodaj').addEventListener('click',function(){
      // do zmiennej przypisujemy teskt, który użytkownik wpisał w polu input
      const nowyElement = document.getElementById("element").value.trim();
        //jeśli tekst jest różny od pustego czyli użytkownik wpisał jakiś ciąg znaków
      if (nowyElement!=''){
        //czyścimy ewentualny komunikat
        document.getElementById('komunikat').textContent='';
        //dodajemy nowy element do naszej listy numerowanej
        document.getElementById('listaZadan').innerHTML += '<li>'+nowyElement+'</li>';
        //czyścimy pole input
        document.getElementById('element').value='';
          }

  else{
          //wyświetlamy komunikat bo użytkownik nic nie wpisał
           document.getElementById('komunikat').textContent='Uzupełnij pole';
        }
});


  // zdarzenie po kliknięciu w listę zadań
    document.getElementById('listaZadan').addEventListener('click', function(e) {
        //zapisujemy do zmiennej odowłanie do elementu listy, który został kliknięty
      const  elementListy=e.target;
      //usuwamy kliknięty element listy
      this.removeChild(elementListy);
});


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

  const obszarWydruku = document.getElementById('doWydrukowania').innerHTML;
  //ustawiamy obszar wydruku tylko na elementy naszej listy zadań
  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/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;
}
#dodajElement {

  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;
}

#listaZadan{
  font-family: 'Caveat Brush', cursive;
  font-size:32px;;
  width:500px;
  background-color:#ffd35c;
  margin-left:auto;
  margin-right:auto;
  border-radius:10px;
  color:#003a91;
}
#przyciskDodaj, #przyciskDrukuj{
  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;


}


#przyciskDrukuj:hover,#przyciskDodaj: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%;
}