From 9409685c9a4059fbe5797bd841cda411835d7b12 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 22 Feb 2024 11:17:56 -0500 Subject: [PATCH] Simple timer --- simple-timer/index.html | 59 +++++++++++++++++++++++++++++++++++++ simple-timer/script.js | 64 +++++++++++++++++++++++++++++++++++++++++ simple-timer/style.css | 17 +++++++++++ 3 files changed, 140 insertions(+) create mode 100644 simple-timer/index.html create mode 100644 simple-timer/script.js create mode 100644 simple-timer/style.css diff --git a/simple-timer/index.html b/simple-timer/index.html new file mode 100644 index 0000000..63d2ded --- /dev/null +++ b/simple-timer/index.html @@ -0,0 +1,59 @@ + + + + + + + + + Simple Timer + + + +
+

Timer

+ + +
+

00:00

+ + +
+ +
+ +
+
+ +
+ + + +
+
+ + + diff --git a/simple-timer/script.js b/simple-timer/script.js new file mode 100644 index 0000000..00a88ea --- /dev/null +++ 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'); +} diff --git a/simple-timer/style.css b/simple-timer/style.css new file mode 100644 index 0000000..4e3305b --- /dev/null +++ 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)); +}