I have been provided with some JS which provides a function for counting down to dates within an array. I just need help invoking it. In other words, how do I execute this function and provide the correct HTML to display the countdown? I currently have a div with some HTML and the script, here it is:
<div class="container-full">
<div class="row">
<div class="col-md-12" id="countdown">
<h3>
<span id="next-term"></span> starts:
<span id="date_container"></span>
</h3>
<div id="countdown">
<div id="weeks_container" class="countdown_container">
<div id="weeks">0</div>
<div id="weeks-text">Weeks</div>
</div>
<div id="days_container" class="countdown_container">
<div id="days">0</div>
<div id="days-text">Days</div>
</div>
</div>
<span id="register-time-left-text">You still have <span id="register-time-left"></span> days left to register for <span id="live-term"></span>.
</span>
<script>
function countdownDate() {
//COUNTDOWN
var nextDate;
var nextTerm;
var liveDate;
var liveTerm;
var arrStartDates = new Array();
//For Testing
//arrStartDates[0] = new Date(2014,03,18);
arrStartDates[0] = new Date(2016, 0, 04);
arrStartDates[1] = new Date(2016, 01, 15);
arrStartDates[2] = new Date(2016, 03, 04);
arrStartDates[3] = new Date(2016, 04, 16);
arrStartDates[4] = new Date(2016, 06, 05);
arrStartDates[5] = new Date(2016, 07, 15);
arrStartDates[6] = new Date(2016, 09, 03);
arrStartDates[7] = new Date(2016, 10, 14);
arrStartDates[8] = new Date(2017, 0, 02);
arrStartDates[9] = new Date(2017, 01, 13);
arrStartDates[10] = new Date(2017, 03, 03);
arrStartDates[11] = new Date(2017, 04, 15);
arrStartDates[12] = new Date(2017, 06, 03);
arrStartDates[13] = new Date(2017, 07, 14);
arrStartDates[14] = new Date(2017, 09, 02);
arrStartDates[15] = new Date(2017, 10, 13);
arrStartDates[16] = new Date(2018, 0, 02);
arrStartDates[17] = new Date(2018, 01, 12);
arrStartDates[18] = new Date(2018, 03, 02);
arrStartDates[19] = new Date(2018, 04, 14);
arrStartDates[20] = new Date(2018, 06, 02);
arrStartDates[21] = new Date(2018, 07, 13);
arrStartDates[22] = new Date(2018, 09, 01);
arrStartDates[23] = new Date(2018, 10, 12);
var arrTermNames = new Array();
arrTermNames[0] = ("Winter Quarter 2016");
arrTermNames[1] = ("Winter Quarter 2016");
arrTermNames[2] = ("Spring Quarter 2016");
arrTermNames[3] = ("Spring Quarter 2016");
arrTermNames[4] = ("Summer Quarter 2016");
arrTermNames[5] = ("Summer Quarter 2016");
arrTermNames[6] = ("Fall Quarter 2016");
arrTermNames[7] = ("Fall Quarter 2016");
arrTermNames[8] = ("Winter Quarter 2017");
arrTermNames[9] = ("Winter Quarter 2017");
arrTermNames[10] = ("Spring Quarter 2017");
arrTermNames[11] = ("Spring Quarter 2017");
arrTermNames[12] = ("Summer Quarter 2017");
arrTermNames[13] = ("Summer Quarter 2017");
arrTermNames[14] = ("Fall Quarter 2017");
arrTermNames[15] = ("Fall Quarter 2017");
arrTermNames[16] = ("Winter Quarter 2018");
arrTermNames[17] = ("Winter Quarter 2018");
arrTermNames[18] = ("Spring Quarter 2018");
arrTermNames[19] = ("Spring Quarter 2018");
arrTermNames[20] = ("Summer Quarter 2018");
arrTermNames[21] = ("Summer Quarter 2018");
arrTermNames[22] = ("Fall Quarter 2018");
arrTermNames[23] = ("Fall Quarter 2018");
//determine what the date is today
today = new Date();
//Milliseconds per day
msPerDay = 24 * 60 * 60 * 1000;
for (var i = 0; i < arrStartDates.length; i++) {
if (today.getTime() < arrStartDates[i].getTime()) {
nextDate = arrStartDates[i];
nextTerm = arrTermNames[i];
liveDate = arrStartDates[i];
liveTerm = arrTermNames[i];
break;
}
}
for (var i = 0; i < arrStartDates.length; i++) {
if (today.getTime() < (arrStartDates[i].getTime() + (msPerDay * 3))) {
liveDate = arrStartDates[i];
liveTerm = arrTermNames[i];
break;
}
}
//do not edit this information
//Term Date
termTime = new Date(nextDate);
//Time from today to beginning of term
timeLeft = (termTime.getTime() - today.getTime());
//To get total number of days left, divide total time left by the time length of one day
e_daysLeft = (timeLeft / msPerDay);
//To get number of weeks left, divide total numbers of days by 7
e_wksLeft = (e_daysLeft / 7);
//Calculate amount of days left in current week and display number without decimals
daysLeft = Math.floor(e_daysLeft % 7);
//display number without decimals
wksLeft = Math.floor(e_wksLeft);
//define variables to write month, day, and year of current start date
y = nextDate.getFullYear();
//we add "1" to the month because in JavaScript, January is expressed as "0", not as "1".
m = nextDate.getMonth() + 1;
d = nextDate.getDate();
//Write results on page
$('#next-term').html(nextTerm);
$('#date_container').html(m + '/' + d + '/' + y);
$('#weeks').html(wksLeft);
$('#days').html(daysLeft);
$('#live-term').html(liveTerm);
//if weeks value is less than 10 add a "0" in front of remaining value
if (wksLeft <= 9) {
$('#weeks').html("  " + wksLeft);
}
if (nextDate != liveDate) {
liveDate = liveDate.getTime() + (msPerDay * 4);
termTime = new Date(liveDate);
timeLeft = (termTime.getTime() - today.getTime());
$('#register-time-left-text').css("display", "block");
$('#register-time-left').html(Math.floor((timeLeft / msPerDay)));
}
}
</script>
</div>
</div>
</div>
Not sure if I'm missing some key component, putting something in the wrong spot, or what. I haven't touched the provided JS, and am hoping to just get the right HTML ingredients to make it work if possible. Thank you.
You just need to add this:
$(function(){
countdownDate();
});
function countdownDate() {
//COUNTDOWN
var nextDate;
var nextTerm;
var liveDate;
var liveTerm;
var arrStartDates = new Array();
//For Testing
//arrStartDates[0] = new Date(2014,03,18);
arrStartDates[0] = new Date(2016, 0, 04);
arrStartDates[1] = new Date(2016, 01, 15);
arrStartDates[2] = new Date(2016, 03, 04);
arrStartDates[3] = new Date(2016, 04, 16);
arrStartDates[4] = new Date(2016, 06, 05);
arrStartDates[5] = new Date(2016, 07, 15);
arrStartDates[6] = new Date(2016, 09, 03);
arrStartDates[7] = new Date(2016, 10, 14);
arrStartDates[8] = new Date(2017, 0, 02);
arrStartDates[9] = new Date(2017, 01, 13);
arrStartDates[10] = new Date(2017, 03, 03);
arrStartDates[11] = new Date(2017, 04, 15);
arrStartDates[12] = new Date(2017, 06, 03);
arrStartDates[13] = new Date(2017, 07, 14);
arrStartDates[14] = new Date(2017, 09, 02);
arrStartDates[15] = new Date(2017, 10, 13);
arrStartDates[16] = new Date(2018, 0, 02);
arrStartDates[17] = new Date(2018, 01, 12);
arrStartDates[18] = new Date(2018, 03, 02);
arrStartDates[19] = new Date(2018, 04, 14);
arrStartDates[20] = new Date(2018, 06, 02);
arrStartDates[21] = new Date(2018, 07, 13);
arrStartDates[22] = new Date(2018, 09, 01);
arrStartDates[23] = new Date(2018, 10, 12);
var arrTermNames = new Array();
arrTermNames[0] = ("Winter Quarter 2016");
arrTermNames[1] = ("Winter Quarter 2016");
arrTermNames[2] = ("Spring Quarter 2016");
arrTermNames[3] = ("Spring Quarter 2016");
arrTermNames[4] = ("Summer Quarter 2016");
arrTermNames[5] = ("Summer Quarter 2016");
arrTermNames[6] = ("Fall Quarter 2016");
arrTermNames[7] = ("Fall Quarter 2016");
arrTermNames[8] = ("Winter Quarter 2017");
arrTermNames[9] = ("Winter Quarter 2017");
arrTermNames[10] = ("Spring Quarter 2017");
arrTermNames[11] = ("Spring Quarter 2017");
arrTermNames[12] = ("Summer Quarter 2017");
arrTermNames[13] = ("Summer Quarter 2017");
arrTermNames[14] = ("Fall Quarter 2017");
arrTermNames[15] = ("Fall Quarter 2017");
arrTermNames[16] = ("Winter Quarter 2018");
arrTermNames[17] = ("Winter Quarter 2018");
arrTermNames[18] = ("Spring Quarter 2018");
arrTermNames[19] = ("Spring Quarter 2018");
arrTermNames[20] = ("Summer Quarter 2018");
arrTermNames[21] = ("Summer Quarter 2018");
arrTermNames[22] = ("Fall Quarter 2018");
arrTermNames[23] = ("Fall Quarter 2018");
//determine what the date is today
today = new Date();
//Milliseconds per day
msPerDay = 24 * 60 * 60 * 1000;
for (var i = 0; i < arrStartDates.length; i++) {
if (today.getTime() < arrStartDates[i].getTime()) {
nextDate = arrStartDates[i];
nextTerm = arrTermNames[i];
liveDate = arrStartDates[i];
liveTerm = arrTermNames[i];
break;
}
}
for (var i = 0; i < arrStartDates.length; i++) {
if (today.getTime() < (arrStartDates[i].getTime() + (msPerDay * 3))) {
liveDate = arrStartDates[i];
liveTerm = arrTermNames[i];
break;
}
}
//do not edit this information
//Term Date
termTime = new Date(nextDate);
//Time from today to beginning of term
timeLeft = (termTime.getTime() - today.getTime());
//To get total number of days left, divide total time left by the time length of one day
e_daysLeft = (timeLeft / msPerDay);
//To get number of weeks left, divide total numbers of days by 7
e_wksLeft = (e_daysLeft / 7);
//Calculate amount of days left in current week and display number without decimals
daysLeft = Math.floor(e_daysLeft % 7);
//display number without decimals
wksLeft = Math.floor(e_wksLeft);
//define variables to write month, day, and year of current start date
y = nextDate.getFullYear();
//we add "1" to the month because in JavaScript, January is expressed as "0", not as "1".
m = nextDate.getMonth() + 1;
d = nextDate.getDate();
//Write results on page
$('#next-term').html(nextTerm);
$('#date_container').html(m + '/' + d + '/' + y);
$('#weeks').html(wksLeft);
$('#days').html(daysLeft);
$('#live-term').html(liveTerm);
//if weeks value is less than 10 add a "0" in front of remaining value
if (wksLeft <= 9) {
$('#weeks').html("  " + wksLeft);
}
if (nextDate != liveDate) {
liveDate = liveDate.getTime() + (msPerDay * 4);
termTime = new Date(liveDate);
timeLeft = (termTime.getTime() - today.getTime());
$('#register-time-left-text').css("display", "block");
$('#register-time-left').html(Math.floor((timeLeft / msPerDay)));
}
}
countdownDate();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-full">
<div class="row">
<div class="col-md-12" id="countdown">
<h3>
<span id="next-term"></span> starts:
<span id="date_container"></span>
</h3>
<div id="countdown">
<div id="weeks_container" class="countdown_container">
<div id="weeks">0</div>
<div id="weeks-text">Weeks</div>
</div>
<div id="days_container" class="countdown_container">
<div id="days">0</div>
<div id="days-text">Days</div>
</div>
</div>
<span id="register-time-left-text">You still have <span id="register-time-left"></span> days left to register for <span id="live-term"></span>.
</span>
</div>
</div>
</div>