Countdown Timer

I have been learning HTML, CSS and Javascript on my Google Pixel 2xl phone for the past year because i cannot afford a laptop and i want to document my progress with these beginner projects.

<!DOCTYPE html>

Countdown Timer

 
body { 
display: grid; 
place-items: center; 
text-align: center; 
height: 100vh; 
padding: 0; 
margin: 0; 
font-family: Ariel, sans-serif; 
background-color: #f0f0f0; 
} 
.container { 
max-width: 600px; 
width: 60%; 
background-color: #fff; 
font-size: 30px; 
border: 0; 
border-radius: 5px; 
box-shadow: 0 0 10px rgba(0,0,0,0.4); 
} 
.btn { 
padding: 8px 10px; 
font-size: 20px; 
cursor: pointer; 
border: 0; 
border-radius: 5px; 
box-shadow: 0 0 10px rgba(0,0,0,0.4); 
} 
.btn:hover { 
background-color: #000; 
color: #fff; 
}

Countdown Timer

60:00

Start/Stop

 
let [minutes, seconds] = [60, 0]; 
let intervalId = null; 
const time = document.querySelector('.time'); 
const button = document.querySelector('.btn'); 
function updateTime() { 
seconds--; 
if(seconds < 0) { 
seconds = 59; 
minutes--; 
} 
if(minutes < 0) { 
clearInterval(intervalId); 
return; 
} 
time.textContent = <code>${padNumber(minutes)}:${padNumber(seconds)}</code>; 
} 
function padNumber(number) { 
return number.toString().padStart(2, '0'); 
} 
button.addEventListener('click', function() { 
if(intervalId === undefined) { 
intervalId = setInterval(updateTime, 1000) 
} else { 
clearInterval(intervalId); 
intervalId = undefined! 
} 
})