How to create a \"coming soon page\" with CSS and JavaScript?

We will create a coming soon page with a timer. The timer is set using the setInterval() function. The time is fetched using the getTime() function.

Set the div

We have set the image as a div class. Rest, the coming soon text and the timer is placed within it −

<div class="bgimg">
   <div class="middle">
      <h1>COMING SOON</h1>
      <hr />
      <h2 class="timer"></h2>
   </div>
</div>

Place the Image

The image is now placed using the background-image property. The position is set using the background-position property"

.bgimg {
   background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
   height: 100%;
   background-position: center;
   background-size: cover;
   position: relative;
   color: white;
   font-size: 25px;
   filter: grayscale(100%);
}

Set in the Middle

All the elements are set in the center −

.middle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}

The Timer

The script for the timer is as follows. It gets placed in the <script> element −

<script>
   var countDownDate = new Date("November 10, 2023 11:27:15").getTime();
   var timeClear = setInterval(function() {
      var now = new Date().getTime();
      var timeLeft = countDownDate - now;
      var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
      var hours = Math.floor(
         (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
      document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
      if (timeLeft < 0) {
         clearInterval(timeClear);
         document.querySelector(".timer").innerHTML = "Timer Finished";
      }
   }, 1000);
</script>

Set the Count Down

Above, we have set the date we are counting i.e. today is 5th November 2023, so the counter will go this 10th November −

var countDownDate = new Date("November 10, 2023 11:27:10").getTime();

Calculate the Distance (time left)

The time between the current date and the count down is calculated −

var countDownDate = new Date("November 10, 2023 11:27:15").getTime();
var timeClear = setInterval(function() {
   var now = new Date().getTime();
   var timeLeft = countDownDate - now;

Display a Time After the Countdown Expires

According to our example, our timer will expire on 10th November. After that, set a message −

if (timeLeft < 0) {
   clearInterval(timeClear);
   document.querySelector(".timer").innerHTML = "Timer Finished";
}

Example

To create a coming soon page with CSS and JavaScript, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         height: 100vh;
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
         margin: 0;
      }
      h1, h2 {
         background-color: black;
        opacity: 0.5;
      }
      .timer {
         text-align: center;
         font-size: 60px;
         margin-top: 0px;
         color: white;
      }
      .bgimg {
         background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
         height: 100%;
         background-position: center;
         background-size: cover;
         position: relative;
         color: white;
         font-size: 25px;
         filter: grayscale(100%);
      }
      .middle {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         text-align: center;
      }
      hr {
         margin: auto;
         width: 40%;
      }
   </style>
</head>
<body>
   <div class="bgimg">
      <div class="middle">
         <h1>COMING SOON</h1>
         <hr />
         <h2 class="timer"></h2>
      </div>
   </div>
   <script>
      var countDownDate = new Date("June 5, 2022 11:27:15").getTime();
      var timeClear = setInterval(function() {
         var now = new Date().getTime();
         var timeLeft = countDownDate - now;
         var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
         var hours = Math.floor(
            (timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
         );
         var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
         var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
         document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
         if (timeLeft < 0) {
            clearInterval(timeClear);
            document.querySelector(".timer").innerHTML = "Timer Finished";
         }
      }, 1000);
   </script>
</body>
</html>
Updated on: 2023-11-17T10:29:16+05:30

279 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements