simple-timer

<html>

<head>

<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>

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

<div

id="conic"

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

>

<div

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

></div>

<span

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

></span>

</div>

<button

id="reset"

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

>

</button>

<button

id="play"

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

>

</button>

</div>

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>