Simple timer

9 months ago · 9409685c9a
parent 7a8d1a81a8
commit 9409685c9a
3 changed files with 140 additions and 0 deletions
--- a/simple-timer/index.html
+++ b/simple-timer/index.html
@ -0,0 +1,59 @@
+<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"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <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 src="script.js"></script>
+  </body>
+</html>
--- a/simple-timer/script.js
+++ b/simple-timer/script.js
@ -0,0 +1,64 @@
+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');
+}
--- a/simple-timer/style.css
+++ b/simple-timer/style.css
@ -0,0 +1,17 @@
+: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));
+}