So I wanted to add a countdown to my website. This is what I have so far. The problem is that is doesn't show the javascript coding to the html. Maybe there is a problem in the javascript coding because I dont think that it has sm to do with the html file.
const countdown = () => {
const countDate = new Date("November 7, 2021 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;
};
setInterval(countdown, 1000);
<section class="coming-soon">
<div>
<h3>Bis zum EMS...</h3>
<div class="countdown">
<div class="container-day">
<h4 class="day">Time</h4>
<h4>Day</h4>
</div>
<div class="container-hour">
<h4 class="hour">Time</h4>
<h4>Hour</h4>
</div>
<div class="container-minute">
<h4 class="minute">Time</h4>
<h4>Minute</h4>
</div>
<div class="container-second">
<h4 class="second">Time</h4>
<h4>Second</h4>
</div>
</div>
</div>
</section>
it doesnt work but I haven't figured out why. Can sm help?
Here's a sample pulled from what I use on a site. It uses jQuery, moment js, moment timezone, and moment timezone with data. https://jsfiddle.net/mdzLhvqw/1/
<div class="timer"></div>
<script>
$(function(){
let end=moment("2021-11-07T00:00:00").tz('America/New_York');
let timer=setInterval(function(){
let now=moment().tz('America/New_York');
let diff=moment.duration(end.diff(now));
let days=diff.get("days")<1?'':(diff.get("days")>1?diff.get("days")+'days ':diff.get("days")+"day ");
let hr=diff.get("hours")<2?diff.get("hours")+'hr ':diff.get("hours")+'hrs ';
let mn=diff.get("minutes")<2?diff.get("minutes")+"min ":diff.get("minutes")+"mins ";
let sec=diff.get("seconds")<2?diff.get("seconds")+"sec":diff.get("seconds")+"secs";
$(".timer").text(days+hr+mn+sec);
if(now>=end){
clearInterval(timer);
}
},1000);
});
</script>