countdown timer in wix
Discount Ended😕
00
Day
00
Hour
00
Minute
00
Second
//WHERE ALL ACTIONS HAPPEN⚡
$w.onReady(function () {
setInterval(updateTimer, 1000);
$w("#datePicker").onChange(function () {
dateSelected();
console.log(dateSelected())
});
$w("#timePicker").onChange(function () {
timeSelected();
console.log(timeSelected())
});
});
//DATE FUNCTION 🎉
function dateSelected() {
let dateVal = $w("#datePicker").value.toLocaleDateString();
return dateVal;
}
//TIME FUNCTION 🎉
function timeSelected() {
let timeVal = $w("#timePicker").value;
return timeVal;
}
//MAIN TIMER FUNCTION ⚡
function updateTimer() {
let countDownDay = Date.parse(`${dateSelected()} ${timeSelected()}`);
let now = Number(new Date());
let date = countDownDay - now;
let days = Math.floor(date / (1000 * 60 * 60 * 24));
let hours = Math.floor(date / (1000 * 60 * 60));
let mins = Math.floor(date / (1000 * 60));
let secs = Math.floor(date / 1000);
let dayDisplay = checkTimerZeros((days).toLocaleString());
let hourDisplay = checkTimerZeros((hours - days * 24).toLocaleString());
let minuteDisplay = checkTimerZeros((mins - hours * 60).toLocaleString());
let secondsDisplay = checkTimerZeros((secs - mins * 60).toLocaleString());
//ADD FOR VALID TIME
if (date > 0) {
$w("#day").text = dayDisplay;
$w("#hour").text = hourDisplay;
$w("#minute").text = minuteDisplay;
$w("#second").text = secondsDisplay;
$w("#discountText").hide();
$w("#box5, #box6, #box7, #box8").style.backgroundColor = "rgba(10, 10, 10, 0.80)";
// $w("#countDownTimer").show()
//SET COUNTDOWN TO DEFAULT IF THE TIME IS REACHED😍// ADD FOR INVALID TIME
} else if (date < 0) {
$w("#day").text = "00";
$w("#hour").text = "00";
$w("#minute").text = "00";
$w("#second").text = "00";
$w("#discountText").show();
$w("#box5, #box6, #box7, #box8").style.backgroundColor = "rgba(245, 49, 49)";
// $w("#countDownTimer").hide()
}
}
//ADD A ZERO IN FRONT IF VALUE IS LESS THAN 10🚀
function checkTimerZeros(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
//END ▶