Javascript Lezione 53

<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="utf-8">
    <title>DOM</title>

    <link rel="stylesheet" href="style.css">

    <style>
        img {width: 50px; height: 50px;}
        td, #img1 {border: 1px solid black;}
        .testoRosso {color: red;}
        .sfondoGiallo {background-color: yellow;}
        .font35 {font-size: 35px;}
        .font25 {font-size: 25px;}
        span {font-size: 25px;}
    </style>

</head>
<body>
    <div id='div1'>
        <p id="p1" class="testoRosso sfondoGiallo">primo paragrafo</p>
        <p id="p2">secondo paragrafo
                   <img id="img1" src="teatro1.png">
                   <img id="img2" src="teatro2.png">
        </p>
    </div>

    <div id='div2'>
        <a href="https://www.bbc.com">sito bbc</a>
    </div>

    Londra <input class="c1" type="checkbox" name="capitali" id="cb1">
    Parigi <input class="c1" type="checkbox" name="capitali" id="cb2">
    Roma   <input type="checkbox" name="capitali" id="cb3">
    Madrid <input type="checkbox" name="capitali" id="cb4"> <br> <br>
    Luogo nascita <input type="text" id="localita"> <br> <br>
    Lingua madre <input type="text" id="lingua">


    <script>

       const applica_bordo = function () { this.style.border = '2px solid red';}
       const img2 = document.getElementById('img2');
       const img1 = document.getElementById('img1');


       img1.addEventListener('mouseover', function () { img2.removeEventListener('mouseover', applica_bordo);} )

       img1.addEventListener('click', function (datiEvento) {
        let confini = this.getBoundingClientRect();

        if (datiEvento.clientX>confini.right-this.width + this.width/2 -10 &&
            datiEvento.clientX<confini.right-this.width + this.width/2  + 10 &&
            datiEvento.clientY>confini.bottom-this.height + this.height/2 - 10 &&
            datiEvento.clientY<confini.bottom-this.height + this.height/2 + 10 )
              img1.style.display='none';
        } );

       img2.addEventListener('mouseover', function () {
          this.style.width = '100px';
          this.style.height = '100px';
       });
       img2.addEventListener('mouseover', applica_bordo);

       img2.addEventListener('mouseleave', function () {
          this.style.width = '50px';
          this.style.height = '50px';
          this.style.border = '';
          img1.style.display='normal';
       });

       const localita = document.getElementById('localita')
         .addEventListener('keydown', function (datiEvento) {
            if (datiEvento.key === "Enter" && datiEvento.ctrlKey)
              document.getElementById('lingua').focus();

       })

       function setWidthHeight(element, width, height)
       {element.style.width = width; element.style.height = height;  }
    </script>
</body>
</html>