Table of Contents
Category
tip
Step 1: add the necessary javascript in softr
Replace
August 1, 2022 00:00:00 with your desired date and time and add this code to the custom code footer of your page:<Script >
const countdown = () => {
const countDate = new Date("August 1, 2022 00:00:00").getTime();
const now = new Date().getTime();
const gap = countDate - now;
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
const textDay = Math.floor(gap / day);
const textHour = Math.floor((gap % day) / hour);
const textMinute = Math.floor((gap % hour) / minute);
const textSecond = Math.floor((gap % minute) / second);
document.querySelector(".day").innerText = textDay;
document.querySelector(".hour").innerText = textHour;
document.querySelector(".minute").innerText = textMinute;
document.querySelector(".second").innerText = textSecond;
if (gap <= 0) {
clearInterval(watchCountdown);
document.querySelector(".day").innerHTML = "0";
document.querySelector(".hour").innerHTML = "0";
document.querySelector(".minute").innerHTML = "0";
document.querySelector(".second").innerHTML = "0";
}
};
let watchCountdown = setInterval(countdown, 1000);
</Script>Step 2: Add the necessary CSS
Then style the countdown block as you like, by modifying this code (or not) before adding it to the custom code header of your page:
<Style>
ul {
padding: 0;
margin: 0;
list-style: none;
}
h2 {
font-size: 3.5rem;
font-weight: bold;
text-align: center;
}
.coming-soon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.countdown {
display: flex;
justify-content: space-around;
text-align: center;
}
.day,
.hour,
.minute,
.second {
font-size: 3rem;
}
</Style>Step 3: Add the necessary HTML
Finally add your custom code block where you want it on the page:
<section class="coming-soon">
<div>
<h2> Launching my softr project! </h2>
<div class="countdown">
<div class="container-day">
<h3 class="day">-</h3>
<span>Day</span>
</div>
<div class="container-hour">
<h3 class="hour">-</h3>
<span>Hour</span>
</div>
<div class="container-minute">
<h3 class="minute">-</h3>
<span>Minute</span>
</div>
<div class="container-second">
<h3 class="second">-</h3>