How to Create a Timer with CSS and Javascript | Seven Minutes Timer? Follow the steps below 😉

Hey guys! Today you are gonna learn about creating a timer that will start whenever you click that empty space. It’ll be known as the Seven Minutes Timer since it will be of 7 Minutes.

You can simply change it by editing a single variable inside the Javascript file. Timers like this can be used to display a count down or simply anything or place you want.

Since you guys should already know about Timers, there is no need to explain more about it. We previously did a Counter Component in React too. Do read it.

Below is its preview. Check it out and if you like it, read the source code its how to functionality.

Preview of Seven Minutes Timer

You might also like this.

How does Seven Minutes Timer work?

Seven Minutes timer

It’s pretty simple. I’ll first create 3 files, one for HTML, one for CSS and other for JS. Inside that HTML file, i’ll just create an empty <h1> tag with the id pf timer. This is the thing that will be used by Javascript to change the content dynamically.

CSS Part.

In the CSS, there is nothing else but a bit of styling like font-size, font-color, background-color which in my opinion you should already know.

JS Part.

Inside the Javascript file, I’ll create a function that will start when we click the empty space, it will onclick() functionality.

Inside it, I’ll create 2 variables, one for the second and one for the minutes. I used 1 for second and 7 for minutes. You can change it accordingly. After that, we will use settimer() function to directly edit the timer after every period of time lessening it by one. As I told you guys earlier, the javascript will interact with the element using its id by document.getElementById("timer"). Now see the source code on how this Seven Minutes Timer work.

Source Code.

HTML

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<TITLE>Evil Web Dev | Seven Minutes Timer</TITLE>
	<link rel="stylesheet" href="style.scss">
        <script src="script.js"></script>
</head>

<body>
	<h1 id="timer"></h1>
</body>

</html>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  
}

body {
  background-color: white
    ;
  color: royalblue;}

#timer {
  text-align: center;
  padding-top: 150px;
  
  font-size: 150px;

}

JS

window.onclick = function(){

  var second = 01;
  var minute = 7;
  
  setInterval(function(){
    document.getElementById("timer").innerHTML = minute + ":" + second;

    second--;

    if(second == 00){
      minute--;
      second = 60;
    }
    if(minute == 0 && second == 1){
      document.getElementById("timer").innerHTML = "Timer Stopped";
    }
    if(minute <= -1) {
      document.getElementById("timer").innerHTML = " ";
    }
  }, 1000);
}

So this is how we create a simple Seven Minutes timer, below it the CodePen.

CodePen

See the Pen Seven Minute Timer by Kamran Tahir (@EvilSpark) on CodePen.

unsplash-logoAron Visuals
0 CommentsClose Comments

Leave a comment