What is the Coming Soon Page?
First, we need to know what is the meaning of the Coming Soon Page, Coming Soon is a term that means something that is going to take place as scheduled or expected to happen in the near future. Hereby, we get to the conclusion that the Coming Soon Page is a type of webpage that is used to promote as well as inform potential viewers of what’s coming next on the page of the site. (For eg: new Smartphone 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:
- 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.
- 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.
- When you are creating your Coming Soon page be sure to put Countdown Days. So, the viewers will know when the product will be launched.
- 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 the count of every second in var x using setinterval().
- Calculate Days, hours, minutes, and seconds
- Display result
Example: In this example, we are using the above-explained approach.
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
let RemainingTime = new Date("Feb 17, 2022 00:00:00");
let RemainingTime = RemainingTime.getTime();
// Update the count down every second
let x = setInterval(function () {
// Get current date and time
let now = new Date().getTime();
let distance = RemainingTime - now;
// Days, hours, minutes and seconds time calculations
let days_remaining =
Math.floor(distance / (1000 * 60 * 60 * 24));
let hours_remaining =
Math.floor(days_remaining / (1000 * 60 * 60));
let x1 = distance % (1000 * 60 * 60);
let minutes = Math.floor(x1 / (1000 * 60));
let x2 = distance % (1000 * 60);
let 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: