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
<br>
body {<br>
display: grid;<br>
place-items: center;<br>
text-align: center;<br>
height: 100vh;<br>
padding: 0;<br>
margin: 0;<br>
font-family: Ariel, sans-serif;<br>
background-color: #f0f0f0;<br>
}<br>
.container {<br>
max-width: 600px;<br>
width: 60%;<br>
background-color: #fff;<br>
font-size: 30px;<br>
border: 0;<br>
border-radius: 5px;<br>
box-shadow: 0 0 10px rgba(0,0,0,0.4);<br>
}<br>
.btn {<br>
padding: 8px 10px;<br>
font-size: 20px;<br>
cursor: pointer;<br>
border: 0;<br>
border-radius: 5px;<br>
box-shadow: 0 0 10px rgba(0,0,0,0.4);<br>
}<br>
.btn:hover {<br>
background-color: #000;<br>
color: #fff;<br>
}<br>
Countdown Timer
60:00
Start/Stop
<br>
let [minutes, seconds] = [60, 0];<br>
let intervalId = null;<br>
const time = document.querySelector('.time');<br>
const button = document.querySelector('.btn');<br>
function updateTime() {<br>
seconds--;<br>
if(seconds < 0) {<br>
seconds = 59;<br>
minutes--;<br>
}<br>
if(minutes < 0) {<br>
clearInterval(intervalId);<br>
return;<br>
}<br>
time.textContent = <code>${padNumber(minutes)}:${padNumber(seconds)}</code>;<br>
}<br>
function padNumber(number) {<br>
return number.toString().padStart(2, '0');<br>
}<br>
button.addEventListener('click', function() {<br>
if(intervalId === undefined) {<br>
intervalId = setInterval(updateTime, 1000)<br>
} else {<br>
clearInterval(intervalId);<br>
intervalId = undefined!<br>
}<br>
})<br>
Top comments (0)