simple-timer

<html>

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <script src="https://cdn.tailwindcss.com"></script>

    <link

      rel="stylesheet"

      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"

      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="

      crossorigin="anonymous"

      referrerpolicy="no-referrer"

    />

    <style>

:root {

  --degrees: 0deg;

}


.bg-conic {

  background: conic-gradient(

    transparent 0deg,

    transparent var(--degrees),

    white var(--degrees),

    white 360deg

  );

}


.hand {

  transform-origin: bottom center;

  transform: rotate(var(--degrees));

}


    </style>

    <title>Simple Timer</title>

  </head>


  <body class="bg-gray-700 flex justify-center items-center min-h-screen">

    <div class="bg-gray-900 p-16 rounded-2xl shadow w-full max-w-sm">

      <h1 class="text-4xl text-center text-white">Timer</h1>


      <!-- Create the circle -->

      <div

        id="conic"

        class="bg-conic flex items-center justify-center w-60 h-60 mx-auto my-10 rounded-full relative"

      >

        <p id="timer" class="text-blue-200 relative text-5xl z-10">00:00</p>


        <!-- Create the inner cirlce and line -->

        <div

          class="w-[calc(100%-4px)] aspect-square bg-gray-800 rounded-full absolute inset-[2px]"

        ></div>

        <!-- Create the hand/marker -->

        <div class="hand h-1/2 absolute top-0">

          <span

            class="w-2 h-2 bg-white rounded-full absolute -top-1 -left-1"

          ></span>

        </div>

      </div>


      <div class="flex justify-center gap-6">

        <button

          id="reset"

          class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full"

        >

          <i class="fas fa-refresh"></i>

        </button>


        <button

          id="play"

          class="flex justify-center items-center w-10 h-10 bg-blue-300 rounded-full group"

        >

          <i class="fas fa-play"></i>

        </button>

      </div>

    </div>

    <script>const resetBtn = document.querySelector('#reset');

      const playBtn = document.querySelector('#play');

      const timerEl = document.querySelector('#timer');

      const root = document.querySelector(':root');

     

      // Initial setup

      const totalSeconds = 60;

      let playing = false;

      let currentSeconds = totalSeconds;

      timerEl.innerText = formatTime(totalSeconds);

     

      const timerInterval = setInterval(run, 1000);

     

      playBtn.addEventListener('click', () => {

        playing = !playing;

        playBtn.classList.toggle('play');

        playBtn.classList.toggle('bg-green-500'); // Toggle the color class

        const playIcon = playBtn.querySelector('i');

        playIcon.classList.toggle('fa-play'); // Toggle the play icon

        playIcon.classList.toggle('fa-pause'); // Toggle the pause icon

      });

      resetBtn.addEventListener('click', resetAll);

     

      // Run the timer

      function run() {

        if (playing) {

          currentSeconds -= 1;

          if (currentSeconds <= 0) {

            clearInterval(timerInterval);

            resetAll();

          }

     

          timerEl.innerText = formatTime(currentSeconds);

          root.style.setProperty('--degrees', calcDeg());

        }

      }

     

      // Format the time

      function formatTime(seconds) {

        const minutes = Math.floor(seconds / 60);

        const newSeconds = seconds % 60;

     

        return `${minutes.toString().padStart(2, '0')}:${newSeconds

          .toString()

          .padStart(2, '0')}`;

      }

     

      // Calculate the degrees

      function calcDeg() {

        return `${360 - (currentSeconds / totalSeconds) * 360}deg`;

      }

     

      // Reset all the values

      function resetAll() {

        playing = false;

        playBtn.classList.remove('play');

        playBtn.classList.remove('bg-green-500'); // Remove the color class

        const playIcon = playBtn.querySelector('i');

        playIcon.classList.remove('fa-pause'); // Remove the pause icon

        playIcon.classList.add('fa-play'); // Add the play icon

        currentSeconds = totalSeconds;

        timerEl.innerText = formatTime(totalSeconds);

        root.style.setProperty('--degrees', '0deg');

      }

      </script>

  </body>

</html>