- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>