<body>
<section>
<div class="container">
<h1>00:00</h1>
</div>
</section>
</body> 
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-family: "Montserrat";
font-size: 90px;
}
let timeSecond = 10;
const timeH = document.querySelector("h1");
displayTime(timeSecond);
const countDown = setInterval(() => {
timeSecond--;
displayTime(timeSecond);
if (timeSecond == 0 || timeSecond < 1) {
endCount();
clearInterval(countDown);
}
}, 1000);
function displayTime(second) {
const min = Math.floor(second / 60);
const sec = Math.floor(second % 60);
timeH.innerHTML = `
${min < 10 ? "0" : ""}${min}:${sec < 10 ? "0" : ""}${sec}
`;
}
function endCount() {
timeH.innerHTML = "Time out";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.