Simple Countdown Timer HTML CSS JavaScript - codewithrandom

Simple Countdown timer HTML CSS JS - codewithrandom 

countdown timer html css javascript


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 

Post a Comment

Previous Post Next Post