Untitled

<html>
    <head>
        <title>La prima pagina html</title>
        <style>
            .testo{
                color:red;
                
            }
            h1{
                color:blue;
                font-size:60px;
            }
            
            #immagine{
                color:yellow;
                width: 200px;
            }
            .black{
                background:black;
            }
        </style>
    </head>
    <body>
          <button id="pulsante" >
              Clicca qui
          </button>
          <h1 class="testo black" id="titolo" style="color:violet">Titolo della pagina</h1>
          <button id="zoomplus">
              +
          </button >
          <button id="zoommin">
              -
          </button>
          <br>
          <p class="testo">Questo è un paragrafo</p>
          <img id="immagine" src="https://www.zooplus.it/magazine/wp-content/uploads/2020/05/1-4.jpg" alt="">
    <script>
        function clickButton(){
            alert('hai cliccato il bottone');
        }
        function funzione2(){
            let btn = document.getElementById('pulsante');
            btn.innerText = "Dai clicca veramente!";
        }
        function funzione1(){
            let btn = document.getElementById('pulsante');
            btn.innerText = "Clicca qui!";
        }

        var btn = document.getElementById('pulsante');
        btn.addEventListener("click", clickButton);
        btn.addEventListener("mouseover", funzione2);
        btn.addEventListener("mouseout", funzione1);

        document.getElementById('zoomplus').addEventListener("click",zoomplus);
        document.getElementById('zoommin').addEventListener("click",zoommin);

        function zoomplus(){
            let titolo = document.getElementById('titolo');
            let fontsize = window.getComputedStyle(document.getElementById('titolo')).getPropertyValue('font-size');
            fontsize = fontsize.substr(0,fontsize.length - 2);
            fontsize = parseInt(fontsize)+5;
            titolo.style.fontSize = fontsize+'px';
            console.log(fontsize);
        }

        function zoommin(){
            let titolo = document.getElementById('titolo');
            let fontsize = window.getComputedStyle(document.getElementById('titolo')).getPropertyValue('font-size');
            fontsize = fontsize.substr(0,fontsize.length - 2);
            fontsize = parseInt(fontsize)-5;
            titolo.style.fontSize = fontsize+'px';
            console.log(fontsize);
        }
    </script>
    </body>
</html>
Editor is loading...