Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./index.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- <div class="list__error"></div>

    <button class="btn_click">Click</button> -->
    <input type="text" class="input__timer" placeholder="Nhap vao so giay" />
    <div class="watch">
      <div class="watch__time">
        <span class="watch__time--minute">00</span>
        <p class="middle">:</p>
        <span class="watch__time--second">00</span>
      </div>
    </div>
    <button class="btn__stop">Stop</button>
  </body>

  <script>
    // const list__error = document.querySelector(".list__error");
    // const btn_click = document.querySelector(".btn_click");

    // btn_click.addEventListener("click", function () {
    //   const list_circle = document.querySelectorAll(".circle");
    //   if (list_circle.length >= 10) {
    //     alert("Thua");
    //   } else {
    //     const element = document.createElement("div");
    //     element.setAttribute("class", "circle");
    //     list__error.appendChild(element);
    //   }
    //   list_circle.forEach((item) => {
    //     item.addEventListener("click", function () {
    //       item.remove();
    //     });
    //   });
    // });

    const $ = document.querySelector.bind(document);
    const $$ = document.querySelectorAll.bind(document);

    const inputTimer = $(".input__timer");
    const btn__start = $(".watch");

    function Watch(time) {
      const watch = $(".watch");
      const watchTime = $(".watch__time");
      const watchMinute = $(".watch__time--minute");
      const watchSecond = $(".watch__time--second");
      const btnStop = $(".btn__stop");

      let minute_check = 0;
      let second_check = 0;

      const timer = time ? time : Number(inputTimer.value);

      const minute = Math.floor(timer / 60);
      const second = timer % 60;

      const handler = () => {
        watchSecond.innerHTML = ++second_check;
        if (second_check === 60) {
          second_check = 0;
          watchMinute.innerHTML = ++minute_check;
        }
        if (minute_check === minute && second_check === second) {
          clearInterval(intervel);
          // handle
        }
      };

      const intervel = setInterval(() => {
        handler();
      }, 1000);

      btnStop.addEventListener("click", () => {
        clearInterval(intervel);
      });
    }

    btn__start.addEventListener("click", () => {
      if (inputTimer.value.trim() === "") {
        alert("Vui long nhap vao so giay");
      } else {
        Watch();
      }
    });
  </script>
</html>
Editor is loading...