Develop Reference

Need to rebuild my countdown to output day(s) hour(s) etc

Countdown works fine but I need to output Text for exaple...
If 1 day is show then output Day if more days then Days, the same with hours, minutes and seconds..
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
function updateClock() {
const t = getTimeRemaining(endtime);
document.querySelector('.days').innerHTML = t.days;
document.querySelector('.hours').innerHTML = t.hours;
document.querySelector('.mins').innerHTML = t.minutes;
document.querySelector('.secs').innerHTML = ('0' + t.seconds).slice(-2);
if(t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
const countdown = "November 18 2022 19:00:00";
initializeClock("#codo", countdown);
1 Days 2 Hours 1 Minute 30 Seconds
I tried eg:
if(days > 1) { var day = 'Days'; } else { var day = 'Day'; }
But where exactly do I have to install it to output the text, I've tried a few things but non-stop initialize error given.

updateClock sets the output, specifically the 4 lines begining with document.querySelector. They set the content of 4 elements in your HTML.
function updateClock() {
const t = getTimeRemaining(endtime);
/* determine plural/singular word */
const days = t.days>1?" days":" day"
const hours = t.hours>1?" hours":" hour"
const minutes = t.minutes>1?" minutes":" minute"
const seconds = t.seconds>1?" seconds":" second"
/* append word to value */
document.querySelector('.days').innerHTML = t.days + days;
document.querySelector('.hours').innerHTML = t.hours + hours;
document.querySelector('.mins').innerHTML = t.minutes + minutes;
document.querySelector('.secs').innerHTML = ('0' + t.seconds).slice(-2) + seconds;
if(t.total <= 0) {
clearInterval(timeinterval);
}
}
innerHTML as the name suggests, sets the HTML inside the element. (as a string).
element.innerHTML = `Hello <div class="smallWord">World</div>`

count down for some reason does not let random form be sent

I have a count down that whenever it is running, it blocks a form on the page and does not let the form be sent. Why is this happening ? I'll leave my javascript code below. Whenever I activate and try to click the form submit button from any page, the button just does nothing, I debugged it and I got to this part of the code, I don't understand how this javascript code can solve my forms.
<script type="text/javascript">// <![CDATA[
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = jQuery('.' + id);
for (let index = 0; index < endtime.length; index++) {
var element = endtime[index];
atualDate = new Date();
deadlineDate = new Date(element);
if (atualDate.getTime() < deadlineDate.getTime()) {
break;
}
}
function updateClock() {
var t = getTimeRemaining(element);
console.log(clock);
if (t.total > 0) {
jQuery(clock).find('.days').html(t.days);
jQuery(clock).find('.hours').html(('0' + t.hours).slice(-2));
jQuery(clock).find('.minutes').html(('0' + t.minutes).slice(-2));
jQuery(clock).find('.seconds').html(('0' + t.seconds).slice(-2));
} else {
jQuery(clock).find('.days').html('0');
jQuery(clock).find('.hours').html('00');
jQuery(clock).find('.minutes').html('00');
jQuery(clock).find('.seconds').html('00');
}
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
const deadline = ["2022-09-14 09:02:00", "2022-09-14 10:36:00", "2022-11-14 10:37:00"];
initializeClock('countdown', deadline);
// ]]></script>

How can I make a countdown timer without days?

I'm looking for a way to have a countdown timer that displays more than 24 hours instead of displaying days when there is more than one day left. In short, it shows 26:04:32 instead of 01:02:04:32.
I was working with this, but got stuck.
<script>
(function () {
var deadline = '2022/09/07 00:00';
function pad(num, size) {
var s = "0" + num;
return s.substr(s.length - size);
}
// fixes "Date.parse(date)" on safari
function parseDate(date) {
const parsed = Date.parse(date);
if (!isNaN(parsed)) return parsed
return Date.parse(date.replace(/-/g, '/').replace(/[a-z]+/gi, ' '));
}
function getTimeRemaining(endtime) {
let total = parseDate(endtime) - Date.parse(new Date())
let seconds = Math.floor((total / 1000) % 60)
let minutes = Math.floor((total / 1000 / 60) % 60)
let hours = Math.floor((total / (1000 * 60 * 60)) % 24)
let days = Math.floor(total / (1000 * 60 * 60 * 24))
return { total, days, hours, minutes, seconds };
}
function clock(id, endtime) {
let days = document.getElementById(id + '-days')
let hours = document.getElementById(id + '-hours')
let minutes = document.getElementById(id + '-minutes')
let seconds = document.getElementById(id + '-seconds')
var timeinterval = setInterval(function () {
var time = getTimeRemaining(endtime);
if (time.total <= 0) {
clearInterval(timeinterval);
} else {
days.innerHTML = pad(time.days, 2);
hours.innerHTML = pad((time.hours, 2) + (24 * (time.days, 2)), 2);
minutes.innerHTML = pad(time.minutes, 2);
seconds.innerHTML = pad(time.seconds, 2);
}
}, 1000);
}
clock('js-clock', deadline);
})();
</script>

Just don't modulo (%) the hours with 24, and get rid of everything related to days:
let hours = Math.floor((total / (1000 * 60 * 60))); // will happily go > 24

How to avoid negative value in clock counter

I have made a countdown clock for quiz module so whenever the counter ends up I get a negative value. After the end of the timer I am getting -1 :-1 and I want it as 00:00.
I thought there would be an error in the total time but I am not able to figure out the error
I have tried this logic but it's not working
<script>
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if($('.minutes').text() == '00' && $('.seconds').text() == '00')
{
if(score == 0)
{
// Wrap every letter in a span
document.getElementById("congrats").innerHTML = "Better Luck Next time"; //When all the words are solved, greeting is displayed
document.getElementById("part1").hidden = false;
document.getElementById("goodjob").hidden = false;
document.getElementById("part2").hidden = false;
document.getElementById("button5").disabled = true;
document.getElementById("totscore").innerHTML = "Total correct answer " + score;
document.getElementById("totcoins").innerHTML = "Total coins achieved " + score;
document.getElementById("coins").hidden = false;
document.getElementById("my_audio").pause();
setTimeout(function(){
document.getElementById("drop").play();
}, 1000)
}
else if(score == 5){
document.getElementById("congrats").innerHTML = "Congratulations You solved all three piece words"; //When all the words are solved, greeting is displayed
document.getElementById("part1").hidden = false;
document.getElementById("goodjob").hidden = false;
document.getElementById("part2").hidden = false;
document.getElementById("totscore").innerHTML = "Total correct answer " + score;
document.getElementById("totcoins").innerHTML = "Total coins achieved " + score;
document.getElementById("coins").hidden = false;
document.getElementById("my_audio").pause();
setTimeout(function(){
document.getElementById("drop").play();
}, 1000)
}
}
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 20 * 1000);
initializeClock('clockdiv', deadline);
</script>
My HTML Code
<nav class="navbar navbar-light bg-light fixed-top">
<div class="row" style="width:100%">
<div class="col-md-6">
<div id="clockdiv">
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="score-box" id="scoring">
Your Score is 0
</div>
</div>
</div>
</nav>

Your function runs once more after reaching 0, thus resulting in -1.
You can fix it quickly by making a check in the function to get the remaining time:
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
minutes = minutes < 0? 0 : minutes; //Check if they are lower than 0, if yes, set them to 0
seconds = seconds < 0? 0 : seconds;
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

First of all, don't use the string you put in the html to verify a number, use actual numbers. I'm referring to
if($('.minutes').text() == '00' && $('.seconds').text() == '00')
Avoid doing this.
You put a value inside the object you return from getTimeRemaining that represent the actual difference in milliseconds between the dates. Why not use that?
if (t.total <= 0) {
...
}
You need to check this before you put the time in the HTML.
EDIT: you're actually doing this at the end of updateClock, just check it before printing, and if <= 0 manually set the html to read 00:00.
function updateClock() {
var t = getTimeRemaining(endtime);
if (t.total <= 0) {
clearInterval(timeinterval);
minutesSpan.innerHTML = '00';
secondsSpan.innerHTML = '00';
if(score == 0) {
...
}
....
} else {
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
}

js countdown clock reloads every time browser is refreshed, how can I prevent this?

The following code produces a countdown clock for 15 days and counts down day, hour, minute, second. But, every time the browser is reloaded the clock restarts? What do I need to to do to change this?
<script>function
getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);</script>

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); this is not a static/const value. it's changing every time page load. so you have to find a way to have a static endTime value. as #de-bugged said you can get that either server-side or store in local storage or use const variable
like : const endTime = "Thu Jul 26 2018 11:11:38 GMT+0530 (India Standard Time)";
or like : const endTime = 1532583817343 //timestamp

Here is an example of how you can do it. Do not use this code though. Its not meant for production :)
I used localstorage here but you can also use session storage, cookies, server side solutions, and const
<div id="clockdiv">
<span class="days"></span>
<span class="hours"></span>
<span class="minutes"></span>
<span class="seconds"></span>
</div>
<script>function
getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
}
var deadLineTime = parseInt(localStorage.getItem('deadLineTime')) || false;
if(!deadLineTime){
deadLineTime = Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000;
localStorage.setItem('deadLineTime', deadLineTime);
}
var deadline = new Date(deadLineTime2);
initializeClock('clockdiv', deadline);
</script>