countdown timer html javascript | free countdown timer

countdown timer html javascript

countdown timer html javascript | free countdown timer


Welcome🎉 to codewithrandom blog in this blog we learn that how we create a countdown timer html javascript. We use only html & css for this countdown timer html javascript. Hope you enjoy our blog so let's start with basic html structure for countdown timer html javascript.

HTML for countdown timer html javascript

 <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 look so small so let's give their css for looking awesome counter timer.

CSS for countdown timer html javascript

 * {  
  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 | free countdown timer


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