Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
290 Views
