<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Bootstrap Coming Soon
Page with Countdown
</
title
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin
=
"anonymous"
>
<
style
>
@keyframes append-animate {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.animated {
animation: append-animate 1s linear;
}
</
style
>
</
head
>
<
body
class
=
"bg-dark"
>
<
div
class="d-flex flex-column align-items-center
text-center">
<
div
class="container w-75 bg-light
rounded p-5 m-5">
<
div
class
=
"border-bottom border-dark"
>
<
img
class
=
"img-fluid"
src
=
alt
=
"GFG Logo"
>
</
div
>
<
div
class
=
"m-4"
>
<
h1
>Coming Soon!</
h1
>
<
p
>We're working hard to bring you
something awesome. Stay tuned!
</
p
>
<
div
id
=
"countdown"
class="d-flex justify-content-center
flex-wrap gap-1 m-3">
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"modal fade"
id
=
"countdownModal"
tabindex
=
"-1"
aria-labelledby
=
"countdownModalLabel"
aria-hidden
=
"true"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
h5
class
=
"modal-title"
id
=
"countdownModalLabel"
>
New Course on DSA is now live!
</
h5
>
<
button
type
=
"button"
class
=
"btn-close"
data-dismiss
=
"modal"
aria-label
=
"Close"
>
</
button
>
</
div
>
<
div
class
=
"modal-body"
>
<
p
>Check out our latest course on
Data Structures and Algorithms.
Enroll now for exciting learning!
</
p
>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-primary"
data-dismiss
=
"modal"
>
Close
</
button
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
//It will count from current time to 2 minutes
let countDownDate = new Date().getTime() + 120000;
// Update the countdown every 1 second
let x = setInterval(function () {
// Get the current date and time
let now = new Date().getTime();
// Calculate the remaining time
let distance = countDownDate - now;
// Calculate minutes, and seconds
let minutes = Math.floor((distance % (1000 * 60 * 60))
/ (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60))
/ 1000);
// Display the countdown
if (minutes <
1
) {
document.getElementById("countdown")
.innerHTML = `<div
id
=
"minute"
class="text-light bg-dark
rounded px-4 py-3">
<
b
class
=
"animated"
>${seconds}</
b
><
br
>
${seconds > 1 ? `Seconds` : `Second`}
</
div
>`;
} else {
document.getElementById("countdown")
.innerHTML = `<
div
id
=
"minute"
class="text-light bg-dark
rounded px-4 py-3">
<
b
class
=
"animated"
>${minutes}</
b
>
<
br
>
${minutes > 1 ? `Minutes` : `Minute`}
</
div
>
<
div
id
=
"minute"
class="text-light bg-dark
rounded px-4 py-3">
<
b
class
=
"animated"
>${seconds}</
b
>
<
br
>
${seconds > 1 ? `Seconds` : `Second`}
</
div
>`;
}
// If the countdown is over, display a message
if (distance <
0
) {
clearInterval(x);
document.getElementById("countdown")
.innerHTML = `<div class="w-30 text-light
bg-dark rounded
px-3 py-2">
<
b
>COUNTDOWN ENDED</
b
>
</
div
>`;
let countdownModal = new bootstrap
.Modal(document
.getElementById('countdownModal'));
countdownModal.show();
}
}, 1000);
</
script
>
<
script
src
=
integrity
=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin
=
"anonymous"
>
</
script
>
</
body
>
</
html
>