Integrate a Launch Timer in a Website Using JavaScript

Have you ever launched a website? Or have you ever stumbled upon a website that has a countdown timer signifying its launch date? Or are you a developer, who wants to learn how to make the launch timer or counter for the website? If your answer to any of the aforementioned questions is yes, then you are at the right place. In this tutorial-based article, I shall teach you how to create the launch timer or counter for the website using JavaScript. Let’s dive into the preliminaries for this tutorial-based article!

Prerequisites

In this section, we will look at the required components in order to make the launch timer for our website.

Tools

I am going to use the following tools:

  • Sublime Text (you can use whatever editor you want)
  • XAMPP (Optional; for running the webpage locally; you can run the application by opening the index.html page in the web-browser) If you want to use Sublime Text, go to the following link in order to download it:
https://www.sublimetext.com/3

Make sure to download the latest version!

Programming Language(s)

For setting up, we would require the following:

  • JavaScript (for programming the core of the launch timer)
  • HTML (front-end; for the general client end page)
  • CSS (for styles) We will discuss each one of them later in the article, but first, we have to look at the fonts that have been used in this launch timer application.

Fonts

In order to use your favourite fonts free of cost, go to the following link and download the fonts files or get its css file link:

fonts.google.com

Following are the links of the two fonts I used in this tutorial-based article:

Now it’s time to dive into the coding part of this tutorial-based article!

Front End (HTML and CSS)

Make the index.html file and copy and paste the following code in it:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Launch Timer</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Tangerine'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Plaster'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Plaster|Poiret+One'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <container class="container">
  
<header>
  
  </header>
  
  <section>
    
  </section>
  
<main class="main-body">
  <table class="counter-style">

  <tr class="main">

    <td colspan="4">
      Launch Timer
    </td>
  </tr>

  <tr class="timer">
    <td id="days">18</td>
    <td id="hours">15</td>
    <td id="minutes">15</td>
    <td id="seconds">20</td>

  </tr>

  <tr class="text">
    <td>Days</td>
    <td>Hours</td>
    <td>Minutes</td>
    <td class="text-seconds">Seconds</td>

  </tr>

</table>
  </main>
</container>
  
  

    <script  src="js/index.js"></script>



</body>

</html>

Following are the few important bullets about the above code:

  • link: first of all, in the head section, the css stylesheets are linked for this project. Our own custom css file named style.css is also linked (which we will discuss next).
  • The code is divided into two sections: header and main. The main div contains the table, which is divided into three rows and four columns. The columns for the tables are defined by using the following line of code: colspan = 4.
  • At the end of the body, we have added our own JavaScript file named index.js (which will be discussed later in this article).
  • The timer is divided into four parts: days, months, hours and seconds. Furthermore, the id-s are specified to each of the above-mentioned parts to assign the CSS to it.

The custom css code, which you will have to paste into the style.css file, is given as follows:

.text{
    font-size: 20px;
  color: cyan;
  font-family: 'Plaster', cursive;
  
}
.timer{
  
}

.main {
  color: #fff;
    font-family: 'Plaster', cursive;
        font-size: 48px;
  font-weight: bold;
  font-style: italic;
}

#days, #hours, #minutes{
  color: cyan;
  font-size: 70px;
}

#seconds{
  color:orange;
  font-size: 70px;
}

.timer{
  font-family: 'Poiret One';
  font-weight: bold;
}

.container {
  width: 500px;
  height: 100vh;
  margin: 0 auto;
}

.main-body {
}

.counter-style {
  width: 300px;
  position:absolute;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align:center;
}

.text-seconds {
  color: orange;
}

td {
  padding-right: 45px;
}

body {
  background: #000;
}

The code is really self-explanatory. If you do not know anything about CSS (cascading style sheets), then I would highly recommend you to watch few beginners videos about CSS.

After running the index.html file into your favourite browser, the launch timer would look like this:

1.png

Backend Logic (JavaScript)

First, let me share the complete JavaScript code first before explaining it in details! Copy and paste the following code in index.js file.

let day = document.getElementById("days");
let hour = document.getElementById("hours");
let minute = document.getElementById("minutes");
let second = document.getElementById("seconds");

function launchTimer() {
  
  let currentDate = (new Date()).getTime();
  var d = new Date();  
  let launchDate = (new Date(2018, 5, 15, 0)).getTime();
  
  let timerDifference = launchDate - currentDate;
  
  let seconds = Math.floor(timerDifference/1000);
  let minutes = Math.floor(seconds/60);
  let hours = Math.floor(minutes/60);
  let days = Math.floor(hours/24);
  
  day.innerText = days;
  hour.innerText = hours%24;
  minute.innerText = minutes%60;
  second.innerText = seconds%60;
  
  setTimeout(launchTimer, 1000);
}

launchTimer();

Following are the salient features of the aforementioned code:

  • In this application, the built-in Date class is used to get the current and the launch time. For the current time, the Date constructor with no parameters is used, whereas, in order to get the launch time, the Date constructor with four parameters is used, which are as follows (in sequence): year, month, day-of-the-month, and hour. One thing to note here is that the month’s value should be one less than the original month number. For example, June is the sixth month of year, while in the coding section, we have to set the value of month’s slot to 5 not 6, because the index of the months starts from 0.
  • timerDifference: In this variable, we would get the time in milliseconds after doing the subtraction of the current Date from the launch Date.
  • By using the Math.floor function, the floating point value is converted to the integer value.
  • setTimeOut: it is the built-in method in JavaScript that is used to call the callback after a second. The second parameter of setTimeOut is meant to specify the time in milliseconds.

The major parts have been discussed! Now run the “index.html” file in a browser to get the launch timer up and running.

Demo

demo.gif

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?