Free Coding Ebook 👉 Get Now
Simple Countdown Timer Using HTML ,CSS & JavaScript
Welcome to the codewithrandom blog. In this blog, we learn how to create a Simple Countdown Timer using HTML, CSS, and JavaScript. in this Countdown timer you give a Time and the Countdown end after this time.
I hope you enjoy our blog so let’s start with a basic HTML Structure for Countdown Timer.
HTML Code For Countdown timer
<body> <section> <div class="container"> <h1>00:00</h1> </div> </section> </body>
ADVERTISEMENT
This is all the Html Code for our countdown timer Project. We know this code looks so small so let’s give styling using Css for looking awesome UI Of the counter timer.
5+ HTML CSS Projects With Source Code
CSS Code For Countdown timer
* {
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 the Css code that we use for creating our Style of Countdown Timer. Yeah, that’s our css looks so short so give javascript code so our Countdown Timer project works.
Portfolio Website using HTML and CSS (Source Code)
JavaScript Code For Countdown timer
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";
}
Live Preview Countdown Timer Using HTML,CSS JavaScript
Give Time in javascript I give 10 seconds in javascript code so its shows time out you can click on this codepen and change the time and see our countdown timer. i think this is the best countdown timer project because we use very less code javascript.
50+ HTML, CSS & JavaScript Projects With Source Code
This is all HTML, CSS, and JavaScript code for our Countdown Timer, you can copy this code and paste into your code directory and enjoy it.
In this post, we learn how to Create a Countdown Timer Using HTML, CSS, and JavaScript. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.
written by – codewithrandom/Anki
