I want the date to change from the first date to the second date. At the start, it should display 'Starts:' in bold followed by the remaining time. Once it switches to the second date, it should show 'Ends:' in bold and then the remaining time. When both countdown timers reach zero, I would like it to show a message saying the event has ended. Here is my current progress.
<script>
// Set the dates we're counting down to
var countDownDate = new Date("July 23, 2020 21:07:00").getTime();
var countDownDate2 = new Date("July 23, 2020 21:08:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distances between now and the count down dates
var distance = countDownDate - now;
var distance2 = countDownDate2 - now;
var selectedDistance;
if (distance < 0 && distance2 > 0) {
selectedDistance = distance2;
} else {
selectedDistance = distance;
}
// Calculate days, hours, minutes, and seconds
var days = Math.floor(selectedDistance / (1000 * 60 * 60 * 24));
var hours = Math.floor((selectedDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((selectedDistance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((selectedDistance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = "Starts: " + days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Change to the next expiration.
if (distance < 0 && distance2 > 0) {
function changeDate() {
selectedDistance = distance2;
}
}
// If the count down is over, show some text
if (distance2 < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}}, 1000);
</script>