We Keep Coding

Why does this code do not work? (countdown)

I would like to write a code and a function that takes the name of the event and the date/time of the event and returns the time till the event. I would like to know what is wrong with the code.
<p style="color:red;font-size:20px;" id="C1_Counter"></p>
<script>
CD1(New_Year, "January 1, 2022 00:00:00")
function CD1(event_name, event_date) {
var C1 = "event_name = ";
var C1_Date = new Date(event_date).getTime();
var C1_Counter = document.getElementById("C1_Counter");
setInterval(() => countDown(C1, C1_Date, C1_Counter), 1000);
}
function countDown(x,time, elm) {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the time parameter
var distance = time - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element we got from the parameter elm
elm.innerHTML = x + days + " days " + hours + " hours "
+ minutes + " minutes " + seconds + " seconds ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
console.log(elm);
elm.innerHTML = "EXPIRED";
}
}
</script>

Currently, your code throws the error ReferenceError: New_Year is not defined (you can see it in the browser console). If I understand correctly, you just forgot the quotes around the string. So try to replace:
CD1(New_Year, "January 1, 2022 00:00:00")
with:
CD1("New_Year", "January 1, 2022 00:00:00")
Also, you need to interpolate an argument into a string. So try to replace:
var C1 = "event_name = ";
with:
var C1 = event_name + " = ";
or with:
var C1 = `${event_name} = `;

Restart counter every week

I would like to create a counter that reset every week, I found a code that more or less works, but when It goes to 0, it appears negative.... -1d -1h -2m -5s
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 29, 2021 20:21:0").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
//document.getElementById("demo").innerHTML = "GAME DAY";
if(distance < - 1000 * 60 * 60* 24){ // if its past the "game day"
// reset timer to next week
countDownDate += 1000 * 60 * 60 * 24 * 7
}
}
}, 1000);
</script>
<span id="demo"></span>

Instead of hard-coding the date, you need to calculate the next date based on the current date.
Something like this, though you'd be better of moving the magic numbers (5 and 20) into variables.
let getNextGameDayTime = function() {
let now = new Date();
let dayOfTheWeek = now.getDay();
let dayOffset = 5 - dayOfTheWeek; // Friday is the 5th day of the week
if (dayOffset < 0 || (dayOffset === 0 && now.getHours() > 20)) {
dayOffset += 7;
}
let result = new Date();
result.setDate(result.getDate() + dayOffset);
result.setHours(20);
result.setMinutes(0);
result.setSeconds(0);
result.setMilliseconds(0);
return result;
}
console.log(getNextGameDayTime());
As for not displaying the message for the hour after a countdown has finished, you could use the resulting distance for this.

Javascript Countdown Variable

I am trying to get the date to change to second date. On the first date, I would like it to show Starts: in bold and then the remaining time. I have it figured to change to a second date. When it changes to the second date, i want it to show Ends: in bold then the remaining time. When both countdown timers end, I want it to display text saying the event has ended. Here is what I have so far.
<script>
// Set the date 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 distance between now and the count down date
var distance = countDownDate - now;
var distance2 = countDownDate2 - now;
var a;
if (distance < 0 && distance2 >0) {
a = distance2;
} else {
a = distance;
}
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(a / (1000 * 60 * 60 * 24));
var hours = Math.floor((a % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((a % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((a % (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 another exp.
if (distance < 0 && distance2 >0) {
function changeDate() {
a = distance2;
}
}
// If the count down is over, write some text
if (distance2 < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}}, 1000);
</script>

It seems you basically have it figured out, if I'm understanding the question. You just need another variable for the Start/End label, and then use it when you set .innerHTML of the demo element.
<div id="demo"></div>
<script>
// Set the date we're counting down to
//var countDownDate = new Date("July 23, 2020 21:07:00").getTime();
var countDownDate = Date.now() + 5000; // using a shorter time for testing purposes;
// var countDownDate2 = new Date("July 23, 2020 21:08:00").getTime();
var countDownDate2 = Date.now() + 10000;
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
var distance2 = countDownDate2 - now;
var a;
var label = 'Starts: ';
if (distance < 0 && distance2 >0) {
a = distance2;
label = 'Ends: ';
} else {
a = distance;
}
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(a / (1000 * 60 * 60 * 24));
var hours = Math.floor((a % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((a % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((a % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = "<strong>" + label + "</strong>" + days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// Change to another exp.
if (distance < 0 && distance2 >0) {
function changeDate() {
a = distance2;
}
}
// If the count down is over, write some text
if (distance2 < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}}, 1000);
</script>

How to set a timer that keeps extending itself

I have build a popup with a timer. When the timer ends I want it to extend itself with another day. I have gone so far that it extends itself with 1 day for 1 time but then it quits.
Maybe you have any idea on how to proceed?
Thanks!
//Make countdown
var setInfiniteTime = '{{ $actiepopup->infiniteTime }}';
// Update the count down every 1 second
var x = setInterval(function() {
// Set the date we're counting down to
// Get todays date and time
var currentDate = new Date().getTime();
// get countdown time
var countDownDate = new Date(countDownTimeUntil).getTime();
// console.log('countdowndateBefore' + countDownDate);
// check in infinite time is set
if (setInfiniteTime == 'Yes') {
if (currentDate >= countDownDate) {
// var i;
// for (var i = 0; i < 999999; i++) {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000;
// console.log(i);
// }
}
}
// console.log('currentdate' + currentDate);
// console.log('countdowndate' + countDownDate);
// Find the distance between now and the count down date
var distance = countDownDate - currentDate;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="countdown"
$("#countdown").text(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
$("#countdown").text("Actie beeïndigd");
}
}, delayInMilliseconds);
Hope you have enough information!

SetInterval()
Also, just an advice, if you use boolean statements, just use true or false since it's way easier to work with
if (setInfiniteTime) {
setInterval(() => {
var countDownDate = new Date(countDownTimeUntil).getTime() + 86400000
}, 86400000)
}

Get Html text input value into a Javascript function

I'm creating a countdown timer for a user selected time. For that I have developed following function.
function countdownTimeStart(){
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
// Get to days date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
This works fine. But I want to get a user selected value from a text input instead of var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
Such as
<input type = "text" id = "picker-dates" value="08:30:20">
So can anyone help me to get this input value to my javascript function.

First get the time value from the input using the getElementById and then split that value with colon : to get the hour, minutes and seconds. With these value you can use setHours in the current date to set the time specified in the input.
function countdownTimeStart(){
var time = document.getElementById("picker-dates").value;
time = time.split(':');
var date = new Date();
var countDownDate = date.setHours(time[0],time[1],time[2]);
var x = setInterval(function() {
// Get to days date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo1").innerHTML = hours + ": "
+ minutes + ": " + seconds + " ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo1").innerHTML = "EXPIRED";
}
}, 1000);
}
countdownTimeStart();
<input type = "text" id = "picker-dates" value="14:30:20">
<div id='demo1'></div>

You can do like this, please have a look and if it doesn't work please let me know.
var selectedValue = document.getElementById("picker-dates").value;

use jquery: $('#picker-dates').val()