How to create a "Coming Soon" page using JavaScript?



In this article, we will be creating a Coming Soon Page that will display a timer for the event that will occur on a specific date and time. The timer will go in the opposite direction and at the time of the actual event, it will basically show the event page if configured.

A coming soon is similar to a webpage with some special specifications to show. The specifications define what is next to come to the website (Like a launch of a new Smartphone, Feature, TV, Software, Tool, etc.)

Approach

  • We will first set up a page to be displayed on the background canvas.

  • Setting up the launch date using the Date() method.

  • Updating the count of the timer per second by using the setInterval() method.

  • Calculating Days, Hours, Minutes, and seconds from the launch date.

  • Displaying the result.

Example

In the below example, we have created a COMING SOON page by using the basic HTML, CSS, and JavaScript code.

# index.html

<!DOCTYPE HTML>
<HTML>
<style>
   header {
      background-image:
      url( https://drive.google.com/uc?export=view&id=1wbADBlJqxBvwFKn12UddfnKiM4irfw_1);
      background-position: center;
      height: 100vh;
      background-size: 100% 96%;
   }
   .tech {
      top: 19%;
      left: 50%;
      position: absolute;
      transform: translate(-50%, -50%);
      color: black;
      text-align: center;
      font-size: 25px;
   }
   #release {
      padding-top: 25px;
      color: darkslategrey;
      font-size: 60px;
      word-spacing: 10px;
   }
</style>
<head>
   <link href="style.css" rel="stylesheet" type="text/css">
</head>
<BODY>
   <header>
      <div class="tech">
         <h2>TUTORIX COMING SOON</h2>
         <p id="release"></p>
      </div>
   </header>
   <script>
      // Set the date of launching
      var RemainingTime = new Date("May 17, 2022 00:00:00");
      var RemainingTime = RemainingTime.getTime();
      // Update the count down every second
      var x = setInterval(function() {
         // Get current date and time
         var now = new Date().getTime();
         var distance = RemainingTime - now;
         // Days, hours, minutes and seconds time calculations
         var days_remaining =
         Math.floor(distance / (1000 * 60 * 60 * 24));
         var hours_remaining =
         Math.floor(days_remaining / (1000 * 60 * 60));
         var x1 = distance % (1000 * 60 * 60);
         var minutes = Math.floor(x1 / (1000 * 60));
         var x2 = distance % (1000 * 60);
         var seconds = Math.floor(x2 / 1000);
         // Display the results
         document.getElementById("release").innerHTML = days_remaining + " : " + hours_remaining + " : " + minutes + " : " + seconds;
         // Text after count down is over
         if (distance < 0) {
            clearinterval(x);
            document.getElementById("Release").
            innerHTML = "Welcome";
         }
      }, 1000);
   </script>
</BODY>
</HTML>

Output


Advertisements