Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a coming soon page using JavaScript ?

  • Last Updated : 02 Nov, 2021

What is Coming Soon Page?

First, we need to know what is the meaning of Coming soon Page, Coming Soon is a term that means something that is going to take place as scheduled or expected to happen in a near future. Hereby, we get to the conclusion that the Coming Soon Page is a type of webpage which is used to promote as well as inform the potential viewers of what’s coming next on the page of the site. (For eg: new Smartphones pages that pop up on e-commerce sites. In this article, we will discuss how to create a Coming Soon Page.

 

Feature of Coming Soon Page:

  1. We have to think as a viewer as to what we want to see on the particular page that we are visiting and how appealing the page appears to us in matters of design and content.
  2. We should have a complete know-how of what we are presenting to the viewers. (For example:- for an organic food product we will choose the theme of nature and foods.
  3. When you are creating your Coming Soon page be sure to put Countdown Days. So, the viewers will know that when the product will be launched.
  4. Be sure to put the WATCH LATER and SHARE link option on-page, so that if the viewers want to watch this page later or share the page with others as they can.

Approach:

  • First set the background of the web page using image or canvas.
  • Set the launching date using Date().
  • Update count of every second in var x using setinterval().
  • Calculate Days, hours, minutes, and seconds
  • Display result

Example:

HTML




<!DOCTYPE HTML>
<HTML>
<style>
    header {
        background-image: url(
        background-position: center;
        height: 100vh;
        background-size: 100% 96%;
    }
      
    .Tech {
        top: 19%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        color: rgb(20, 158, 212);
        text-align: center;
        font-size: 17px;
    }
      
    #Release {
        color: white;
        font-size: 40px;
        word-spacing: 10px;
    }
</style>
  
<head>
    <link href="style.css" 
          rel="stylesheet" 
          type="text/css">
</head>
  
<BODY>
    <header>
        <div class="Tech">
            <h2>COMING SOON</h2>
  
            <p id="Release"></p>
  
        </div>
    </header>
  
    <script>
        // Set the date of launching
        var RemainingTime = new Date("Feb 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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!