Simple Countdown Timer HTML CSS JavaScript – codewithrandom







Simple Countdown timer HTML CSS JS – codewithrandom 

Welcome🎉 to codewithrandom blog in this blog we learn how to create a simple countdown timer HTML CSS JS . We use only HTML & CSS for this countdown timer HTML javascript. Hope you enjoy our blog so let’s start with a basic HTML structure for countdown timer HTML javascript.

Countdown timer HTML code

 <body>  
<section>
<div class="container">
<h1>00:00</h1>
</div>
</section>
</body>

This is all HTML structure for our countdown timer HTML javascript. We know this code looks so small so let’s give their CSS for looking awesome counter timer.

CSS for countdown timer HTML code

 * {  
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;
}

This is all our css code that we use for create our CSS counter. Yeah, that’s our css look so short so give javascript to this project and make it more attractive 😍.


 javascript for countdown timer html javascript

 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";
}

Project preview of countdown timer html javascript


countdown timer html javascript | free countdown timer


countdown timer html javascript | free countdown timer

countdown timer html javascript

This is all HTML, css, JavaScript code for our simple html counter, you can copy this code and paste in your code directory and enjoy it ❤.

In this post, we learn how to Create countdown timer HTML javascript with simple coding of HTML CSS. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

written by – codewithrandom/Anki 

Share on:

Leave a Comment