Simple Countdown Timer Using HTML ,CSS JavaScript

Simple Countdown Timer Using HTML ,CSS & JavaScript

Countdown Timer Using HTML ,CSS & JavaScript
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>

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

 

Countdown Timer Using HTML ,CSS JavaScript
Countdown Timer Using HTML ,CSS JavaScript
 

 

Countdown Timer Using HTML ,CSS JavaScript
Countdown Timer Using HTML ,CSS JavaScript

 

Countdown Timer Using HTML ,CSS JavaScript
Countdown Timer Using HTML ,CSS JavaScript

 

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



Leave a Reply