Create Timer using HTML5, CSS3 And JAVASCRIPT (Source Code)

Timer, we all are aware with this word while we are doing workout, solving paper, but here we used to use physical timer but as a developer we have that functions and properties that we can code the timer.

So Hey coders Welcome to codewithrandom Today we’ll build a Timer. For that you’re required the knowledge of HTML, CSS & alittle bit knowledge of Javascript. So that you can catch up the process that how the timer is responsive while on/off.

I hope you must have got an idea about the project.

Let’s have a look at our project of Timer👇

HTML Code in Timer

<div class="container">

     <div class="groub">

       <button disabled="disabled" class="reset">reset timer</button>
       <button class="start">Start timer</button>
       <button disabled="disabled" class="pause">pause timer</button>
     </div>


     <div id="hours"> 0 </div>
     :
     <div id="minutes"> 0 </div>
     :
     <div id="seconds"> 0 </div>
   </div>

In this HTML code we coded three buttons to start, pause & reset control the timer and after that in div we separate then and specified an id. Now we have coded the structure we have to style the page of the timer project so lets code in CSS.

CSS Code in Timer

*
  padding: 0
  margin: 0
  box-sizing: border-box
  font-family: sans-serif
  text-transform: uppercase

.container
  position: absolute
  height: 100%
  width: 100%
  top: 0
  left: 0
  background: black
  display: flex
  align-items: center
  justify-content: center
  font-family: sans-serif
  font-size: 80px
  color: white
  letter-spacing: 10px

.groub
  position: absolute
  top: 0
  left: 0
  width: 100%
  padding: 30px 30px
  display: flex
  align-items: center
  justify-content: center

button
  position: relative
  width: 200px
  height: 60px
  background: transparent
  font-size: 18px
  letter-spacing: 3px
  color: white
  border: 2px solid white
  cursor: pointer
  transition: 0.4s ease-in-out all
  &:hover
    background: white
    color: black

button[disabled="disabled"]
  color: gray
  border-color: gray
  &:hover
    background: transparent
    cursor: default

In the CSS script we have set the position and the length of the button. And then we have styled the background and given the font size. Also we have styled the button which will control the timer.

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

So we are done with structure & styling now to make responsive we have to write script in Java Language.

JavaScript Code in Timer

var hours = document.getElementById('hours'),
    minutes = document.getElementById('minutes'),
    seconds = document.getElementById('seconds'),
    container = document.querySelector('.container'),
    start = document.querySelector('.start'),
    pause = document.querySelector('.pause'),
    reset = document.querySelector('.reset'),
    count_time = 0;


start.onclick = function(){
  var counter = setInterval(function(){
    count_time++;
    if (count_time > 0) {
      seconds.textContent = count_time;
    }
    if (count_time === 60) {
      count_time = 0;
      minutes.textContent++;
    }
    if (minutes.textContent == 60) {
      minutes.textContent = 0;
      hours.textContent++;
    }
  }, 1000);

  pause.removeAttribute('disabled');
  reset.removeAttribute('disabled');
  start.setAttribute('disabled', 'disabled');

  pause.onclick = function(){
    clearInterval(counter);
    start.removeAttribute('disabled');
    pause.setAttribute('disabled', 'disabled');
  }
  reset.onclick = function(){
    clearInterval(counter);
    count_time = 0;
    seconds.textContent = 0;
    minutes.textContent = 0;
    hours.textContent = 0;
    start.removeAttribute('disabled');
    reset.setAttribute('disabled', 'disabled');
    pause.setAttribute('disabled', 'disabled');
  }
}

In this Script we have first added each defined tag id as document.getElementById() so that we’ll call it later we get no error and then it executes properly.

For the working of Timer we have scripted the if statement for various situations to keep the timer on/off. Now we are done with the coding part. Let’s see the Final Output of our project.

Final Output of Timer

We have Successfully created our JS Timer using HTML5, CSS3 & JS (Source Code) | Timer with JS You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned below.

100+ Front-end Projects for Web developers (Source Code)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – Menem Elkatan