Corso recupero Javascript - video 6

<html>
    <head>
      <style>
        #div_orario{background-color: rgb(233, 127, 127);
                  padding: 0 35%; font-size: 30px; text-align: center;}
        button {background-color: red; border-radius: 15px; color: white;
               font-size: 30px;}
        .orario{background: yellow;}
        #bottoni {text-align: center;}
      </style>
    </head>
    <body>
      <div id="div_orario">
        <p> Orario
            <span id="ore" class="orario"> </span>
            <span>:</span>
            <span id="minuti" class="orario"> </span>
            <span>:</span>
            <span id="secondi" class="orario"> </span>
        </p>
      </div>

      <div id="bottoni">
        <button id="btn_start0"> START clock</button>
        <button id="btn_stop1"> STOP clock </button>
      </div>
      <img src="teatro.png" alt=""><br><br>

      <form action="">
        cognome <input type="text">
        mf <input type="radio" " id="rbm" value="M">
           <input type="radio"  id="rbf" value="F">
        <input type="submit" value="OK">

      </form>

      <script>

        document.querySelector("input[type='submit']")
          .addEventListener("click", function () {
            alert(document.querySelector("input[type='text']").value);

            const rb = document.getElementById("rbm");
            if (rb.checked) alert(rb.value);
          })

        if (document.querySelector("img").alt === "" )
           document.querySelector("img").title = "Testo ...";

        const coloriButton = ["purple", "purple"];

        // document.querySelector("#bottoni")
        //   .style.border = "solid 2px blue";

        //   document.querySelector("p")
        //   .style.border = "dashed 5px yellow";

        //   document.querySelector(".orario")
        //   .style.border = "solid 3px green";

          document.querySelector("img[src='teatro.png']")
          .style.width="100px";

          document.querySelector("img[src='teatro.png']")
            .style.height="100px";

          let bottoni = document.getElementsByTagName("button");
          for (let bottone of bottoni)
            bottone.style.backgroundColor = "blue";

          const spans = document.getElementsByClassName("orario");
          for (let span of spans)
            span.style.border = "solid 3px green";

          bottoni = document.querySelectorAll("button");
          for (let bottone of bottoni)
            bottone.style.backgroundColor = "purple";

          document.getElementById("minuti").classList.remove("orario")

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