Develop Reference

Troubleshooting JS Shipping Countdown Timer

Is you'll probably be able to tell I'm a complete JS rookie but I've spent my day working on this code to display a shipping timer, compiled from bits of various other posts on SO (thanks!).
It seemed to be going well until I completed adding all the functionality I needed and now it's not working. When you first run the snippet it works correctly but as soon as it ticks the "day" value displays incorrectly (it should display 'tomorrow' but it switches to 'today') and the timer itself has stopped counting down.
I can't figure out for the life of me where I messed it up so looking for some assistance if possible! Thanks in advance.
JSFiddle: http://jsfiddle.net/c3otusv6/
(function() {
var start = new Date();
start.setHours(14, 0, 0);
var maybePluralize = function maybePluralize(count, noun) {
var suffix = arguments.length <= 2 || arguments[2] === undefined ? 's' : arguments[2];
return count + ' ' + noun + (count !== 1 ? suffix : '');
};
var now = new Date();
var day = now.getDay();
function tick() {
if (day >= 1 && day <= 5 && now < start) {
document.getElementById('ddate').innerHTML = 'today';
} else if (day >= 1 && day <= 4 && now >= start || day == 7) {
document.getElementById('ddate').innerHTML = 'tomorrow';
} else if (day == 5 && now >= start || day == 6) {
document.getElementById('ddate').innerHTML = 'Monday';
}
if (day == 6 || day == 5 && now > start || day == 7 && now < start) {
document.getElementById('countdown').innerHTML = "now";
} else {
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() + 1);
}
var remain = (start - now) / 1000;
var hh = Math.floor(remain / 60 / 60 % 60);
var mm = Math.floor(remain / 60 % 60);
document.getElementById('countdown').innerHTML = "in the next <strong>" + maybePluralize(hh, 'hour') + " " + maybePluralize(mm, 'min') + "</strong>";
setTimeout(tick, 1000);
}
}
document.addEventListener('DOMContentLoaded', tick);
})();

If you need to have the function called every second, you need to use setInterval. setTimeout just runs the given function once after the specified number of seconds.
I have made small edit to you fiddle, to make it run every second.
As for the "day" value being incorrect, I think you need to check your if statements. I quite dont understand your business logic.
Also note - Sunday is given by '0' in getDay. And I see you using day == 7, so you might want to check that and do the necessary adjustments. I guess you need to -1 from all your if statements for day.
http://jsfiddle.net/wm9kj8yb/
(function() {
var start = new Date();
var now = new Date();
var day = now.getDay();
start.setHours(14, 0, 0);
function maybePluralize(count, noun) {
var suffix = arguments.length <= 2 || arguments[2] === undefined ? 's' : arguments[2];
return count + ' ' + noun + (count !== 1 ? suffix : '');
};
function tick() {
now = new Date();
day = now.getDay();
if (day >= 1 && day <= 5 && now < start) {
document.getElementById('ddate').innerHTML = 'today';
} else if (day >= 1 && day <= 4 && now >= start || day == 7) {
document.getElementById('ddate').innerHTML = 'tomorrow';
} else if (day == 5 && now >= start || day == 6) {
document.getElementById('ddate').innerHTML = 'Monday';
}
if (day == 6 || day == 5 && now > start || day == 7 && now < start) {
document.getElementById('countdown').innerHTML = "now";
} else {
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() + 1);
}
var remain = (start - now) / 1000;
var ss = Math.floor(remain % 60);
remain = Math.floor(remain / 60);
var mm = remain % 60;
remain = Math.floor(remain / 60);
var hh = remain % 60;
document.getElementById('countdown').innerHTML = "in the next <strong>" + maybePluralize(hh, 'hour') + " " + maybePluralize(mm, 'min') + " " + " " + maybePluralize(ss, 'sec') + "</strong>";
}
}
document.addEventListener('DOMContentLoaded', function() {
setInterval(tick, 1000);
});
})();
Order <span id='countdown'></span> for dispatch <span id='ddate'></span>

A dynamic delivery time counter for WooCommerce as a shortcode

I've created a shortcode for Wordpress using a javascript counter.
Back End - Counter works fine:
Front End - Counter doesn't work (no console errors...):
My code for the shortcode:
// Delivery Counter Time
function bb__delivery_counter_function() {
?>
<script type='text/javascript'>
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
var timerRunning = setInterval(
function countDown() {
var target = 12; // 12:00hrs is the cut-off point
var now = new Date();
//Put this in a variable for convenience
var weekday = now.getDay();
if(weekday == 0){//Sunday? Add 24hrs
target += 24;
}//keep this before the sunday
if(weekday == 6){//It's Saturday? Add 48hrs
target += 48;
}
//If between Monday and Friday,
//check if we're past the target hours,
//and if we are, abort.
if((weekday>=1) && (weekday<=5)){
if (now.getHours() > target) { //stop the clock
target += 24;
}
}
var hrs = (target - 1) - now.getHours();
if (hrs < 0) hrs = 0;
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
document.getElementById('countdownTimer').innerHTML = str;
}, 1000
);
}
</script>
<?php
return '<div id="countdownTimer"></div>';
}
add_shortcode('bb__delivery_counter', 'bb__delivery_counter_function');
When I add the shortcode in Elementor theme everything works fine in the "back end" so the counter counts in the Elementor Admin view.
But if I try to access the page through the front end, the Javascript doesn't work. Any ideas why this is happening?

There are some mistakes in your code. You need to buffer the Javascript to return it as it should be for a shortcode and now JS wait until DOM is loaded using jQuery (as jQuery library is already loaded in WordPress/WooCommerce). Also I have simplified a bit your code:
// Delivery Counter Time
add_shortcode('bb__delivery_counter', 'shortcode_delivery_counter_func');
function shortcode_delivery_counter_func() {
ob_start(); // Start buffering
?>
<script type='text/javascript'>
jQuery(function($) {
function pad(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
setInterval( function() {
var target = 12, // 12:00hrs is the cut-off point
now = new Date(),
weekday = now.getDay();
if (weekday == 6) { // On Saturday: Adds 48hrs
target += 48;
}
// On sundays | And from monday to Friday after the cut-off : Adds 24hrs
else if ( weekday == 0 || now.getHours() > target ) {
target += 24;
}
var hrs = (target - 1) - now.getHours(),
mins = 59 - now.getMinutes(),
secs = 59 - now.getSeconds();
if (hrs < 0) hrs = 0;
if (mins < 0) mins = 0;
if (secs < 0) secs = 0;
$('#countdownTimer').html( pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>' );
}, 1000 );
});
</script>
<?php
return '<div id="countdownTimer"></div>' . ob_get_clean(); // return buffered JS with html
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.

Making this JS countdown handle minutes

I have a countdown script that enables me to see how much time there is left until a specific date and time in any given timezone. The script has improved alot from its original state (Much thanks to this community) but it still has some flaws.
The script is currently only able to countdown to a specific hour (Like 2015/12/12 18:00) but NOT to a specific minute (Like 2015/12/12 18:25).
I would like to be able to also specify any given minute of the hour (var minute), but I dont know how. Would greatly apreciate if anyone could help me out.
Edit: The timezone variable (var tz) must be taken into account.
Edit2: Solved the issue I got with the first answer, with this: toDate.setMinutes(minutes-(tz*60));
Full script below:
////////// CONFIGURE THE COUNTDOWN SCRIPT HERE //////////////////
var month = '11'; // '*' for next month, '0' for this month or 1 through 12 for the month
var day = '10'; // Offset for day of month day or + day
var hour = 14; // 0 through 23 for the hours of the day
var tz = -5; // Offset for your timezone in hours from UTC
var lab = 'tzcd'; // The id of the page entry where the timezone countdown is to show
function start() {displayTZCountDown(setTZCountDown(year,month,day,hour,tz),lab);}
// ** The start function can be changed if required **
window.onload = start;
////////// DO NOT EDIT PAST THIS LINE //////////////////
function setTZCountDown(year,month,day,hour,tz)
{
// props to Luke Woodward at Stackoverflow
var now = new Date();
var countdownToYear = now.getFullYear();
var countdownToMonth = now.getMonth();
var countdownToDay = now.getDate();
if (month === '*') {
countdownToMonth += 1;
} else if (month > 0) {
if (month <= now.getMonth()) {
countdownToYear += 1;
}
countdownToMonth = month - 1;
}
if (day.substr(0,1) === '+') {
var day1 = parseInt(day.substr(1), 10);
countdownToDay += day1;
} else {
countdownToDay = day;
}
var toDate = new Date(countdownToYear, countdownToMonth, countdownToDay);
// props to Luke Woodward at Stackoverflow^
toDate.setHours(hour);
toDate.setMinutes(0-(tz*60));
toDate.setSeconds(0);
var fromDate = new Date();
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function displayTZCountDown(countdown,tzcd)
{
if (countdown < 0) document.getElementById(tzcd).innerHTML = "<li>0<br><span class='tzcd-format'>day</span></li><li>0<br><span class='tzcd-format'>hours</span></li><li>0<br><span class='tzcd-format'>minutes</span></li><li>0<br><span class='tzcd-format'>seconds</span></li>";
else {var secs = countdown % 60;
if (secs < 10) secs = '0'+secs;
var countdown1 = (countdown - secs) / 60;
var mins = countdown1 % 60;
if (mins < 10) mins = '0'+mins;
countdown1 = (countdown1 - mins) / 60;
var hours = countdown1 % 24;
var days = (countdown1 - hours) / 24;
document.getElementById(tzcd).innerHTML = "<li>" + days + "<br><span class='tzcd-format'>day" + (days == 1 ? '' : 's') + '</span></li>' + "<li>" + hours + "<br><span class='tzcd-format'>hours</span></li> " + "<li>" + mins + "<br><span class='tzcd-format'>minutes</span></li>" +"<li>"+secs+ "<br><span class='tzcd-format'>seconds</span></li>";
setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
}
}

I wasn't able to test it but this should be it:
////////// CONFIGURE THE COUNTDOWN SCRIPT HERE //////////////////
var month = '11'; // '*' for next month, '0' for this month or 1 through 12 for the month
var day = '10'; // Offset for day of month day or + day
var hour = 14; // 0 through 23 for the hours of the day
var tz = -5; // Offset for your timezone in hours from UTC
var minutes = '10';
var lab = 'tzcd'; // The id of the page entry where the timezone countdown is to show
function start() {displayTZCountDown(setTZCountDown(year,month,day,hour,tz),lab);}
// ** The start function can be changed if required **
window.onload = start;
////////// DO NOT EDIT PAST THIS LINE //////////////////
function setTZCountDown(year,month,day,hour,tz)
{
// props to Luke Woodward at Stackoverflow
var now = new Date();
var countdownToYear = now.getFullYear();
var countdownToMonth = now.getMonth();
var countdownToDay = now.getDate();
if (month === '*') {
countdownToMonth += 1;
} else if (month > 0) {
if (month <= now.getMonth()) {
countdownToYear += 1;
}
countdownToMonth = month - 1;
}
if (day.substr(0,1) === '+') {
var day1 = parseInt(day.substr(1), 10);
countdownToDay += day1;
} else {
countdownToDay = day;
}
var toDate = new Date(countdownToYear, countdownToMonth, countdownToDay);
// props to Luke Woodward at Stackoverflow^
toDate.setHours(hour);
toDate.setMinutes(minutes);
toDate.setSeconds(0);
var fromDate = new Date();
fromDate.setMinutes(fromDate.getMinutes() + fromDate.getTimezoneOffset());
var diffDate = new Date(0);
diffDate.setMilliseconds(toDate - fromDate);
return Math.floor(diffDate.valueOf()/1000);
}
function displayTZCountDown(countdown,tzcd)
{
if (countdown < 0) document.getElementById(tzcd).innerHTML = "<li>0<br><span class='tzcd-format'>day</span></li><li>0<br><span class='tzcd-format'>hours</span></li><li>0<br><span class='tzcd-format'>minutes</span></li><li>0<br><span class='tzcd-format'>seconds</span></li>";
else {var secs = countdown % 60;
if (secs < 10) secs = '0'+secs;
var countdown1 = (countdown - secs) / 60;
var mins = countdown1 % 60;
if (mins < 10) mins = '0'+mins;
countdown1 = (countdown1 - mins) / 60;
var hours = countdown1 % 24;
var days = (countdown1 - hours) / 24;
document.getElementById(tzcd).innerHTML = "<li>" + days + "<br><span class='tzcd-format'>day" + (days == 1 ? '' : 's') + '</span></li>' + "<li>" + hours + "<br><span class='tzcd-format'>hours</span></li> " + "<li>" + mins + "<br><span class='tzcd-format'>minutes</span></li>" +"<li>"+secs+ "<br><span class='tzcd-format'>seconds</span></li>";
setTimeout('displayTZCountDown('+(countdown-1)+',\''+tzcd+'\');',999);
}
}

Reverse a list of HTML paragraph via Javascript

I'm using Javascript (no jQuery) to create a list of paragraphs to get the best time to go to sleep (based on the REM sleep cycle) and show it on a page, here's the code.
function sleepnow() {
var result = '';
var a = new Date();
var hour = a.getHours();
var minutes = a.getMinutes() + 14;
if (minutes > 60) {
minutes = minutes - 60;
hour = hour + 1;
}
for (var counter = 0; counter < 6; counter++) {
if (minutes < 30) {
minutes = minutes + 30;
} else {
minutes = minutes - 30;
hour = hour + 1;
}
hour = hour + 1;
if (hour >= 24) {
if (hour === 24) {
hour = 0;
} else if (hour === 25) {
hour = 1;
}
}
if (hour > 9) {
result = result + '<p>' + hour;
} else {
result = result + '<p>0' + hour;
}
if (minutes > 9) {
result = result + ':' + minutes + '</p>';
} else {
result = result + ':0' + minutes + '</p>';
}
}
document.getElementById('sleepnow').innerHTML = result;
}
How can I reverse that list to show the farther one first and so on? I tried for an hour with .reverse() but I can't get it to work, it just flips everything, < p > tags included, breaking everything.

I'd separate the data from the html a little more. Instead of building a string, build an array of times. Then you can loop through it in reverse order when you build the html string.
1. create data structure, contains only numbers, no html (model)
2. convert data to html (view)
var html = '';
for (var counter = YOURDATA.length-1; counter >= 0; counter--) {
var t = YOURDATA[counter];
html += ' build your string ' + t + '...';
}
Also this case should be fine, but be careful with special characters in the raw data (&<>\""). Generally you should escape all the data, for an html context.

First of all: The answer is: By using an intermediate accumulator string variable currentOne which accumulates normally and by accumulating in the other order in the result: result = currentOne + result instead of result = result + currentOne. Enjoy:
function sleepnow() {
var result = '';
var a = new Date();
var hour = a.getHours();
var minutes = a.getMinutes() + 14;
if (minutes > 60) {
minutes = minutes - 60;
hour = hour + 1;
}
for (var counter = 0; counter < 6; counter++) {
var currentOne = "";
if (minutes < 30) {
minutes = minutes + 30;
} else {
minutes = minutes - 30;
hour = hour + 1;
}
hour = hour + 1;
if (hour >= 24) {
if (hour === 24) {
hour = 0;
} else if (hour === 25) {
hour = 1;
}
}
if (hour > 9) {
currentOne = currentOne + '<p>' + hour;
} else {
currentOne = currentOne + '<p>0' + hour;
}
if (minutes > 9) {
currentOne = currentOne + ':' + minutes + '</p>';
} else {
currentOne = currentOne + ':0' + minutes + '</p>';
}
result = currentOne + result;
}
document.getElementById('sleepnow').innerHTML = result;
}
Secondly: Please don't make external links without describing what's on the other side thoroughly. External links can expire, become irrelevant, etc.
Third: You made quite a mess in that code right there :)

For-loop logic for dynamically creating a time based on an Index

So I've got 43 Radio buttons. When one of them is selected, it returns their index number. It's zero-based, so its 0-42. Each index corresponds to a particular time. 0 is 8:00am and 42 is 10:00pm, each index increase the time for 20 minutes. Essentially, I'm trying to generate the time I need without having to manually create if-statements for each index. Here's the broken code I have so far.
function decipherIndex(radx) {
var actime = "";
var hr = 8;
var min = 0;
var day = "am";
for (i=0;i<radx;i++) {
min = min + 20;
if (min = 60) {
hr = hr + 1;
min = 0;
}
if (hr = 13) {
hr = 0;
day = "pm";
}
}
actime = hr + ":" + min + day;
alert(actime);
}
Hopefully someone can help me work through my logic here. radx is the index that's getting passed to the function.

if (min = 60) {
hr = hr + 1;
min = 0;
}
if (hr = 13) {
hr = 0;
day = "pm";
}
You're assigning with the =, so min and hr will always be 0 and day will always be "pm". Use == or === to compare:
if (min == 60) {
hr = hr + 1;
min = 0;
}
if (hr == 13) {
hr = 0;
day = "pm";
}
However, a loop isn't necessary; all you need is a little bit of math.
function decipherIndex(i) {
var t = 60 * 8 + i * 20;
var min = t % 60;
var hr = t / 60 | 0;
return hr % 12 + ':' + (min < 10 ? '0' : '') + min + (hr >= 12 ? ' PM' : ' AM');
}