Countdown (JavaScript)

JavaScript has a function called Date() which can either return todays date (24th September 2018 as I write this) or be used to set a date. August 2019 has an important event for me, so I decided to use JavaScript to create a countdown that counts how many days are left until the 1st August 2019.

Whilst creating the countdown I had a little fun showing off the various methods that can be used with Date()

// geektechstuff

// JavaScript Countdown

// This line uses the new Date function to get today’s date

var dateToday = new Date();

// getDate() can then display the date of the month

var dayOfMonth = dateToday.getDate();

// getMonth() can then display the numerical month of the year

var dateMonth = dateToday.getMonth();

// getFullYear() can then display the year

var dateYear = dateToday.getFullYear();

// Just GeekTechStuff checking the outputs of the above

console.warn(dateToday);

console.warn(dayOfMonth);

console.warn(dateMonth);

console.warn(dateYear);

// Entering the event date to countdown to

// Date is entered as month date, year

// The time can also be entered e.g. August, 1 2019 09:00:00

var dateOfEvent = new Date (‘August 1, 2019’);

console.warn(dateOfEvent);

// Working out the difference between the two dates using subtraction

var differenceBetweenDates = dateOfEvent.getTime() – dateToday.getTime();

// Converting the difference into a human standard of time, in this case days

var days = Math.floor(differenceBetweenDates / (1000 * 60 * 60 * 24));

console.warn(days);

The date set by new Date() is the current date as per the devices system date/time. So if this is run on a device with an incorrect system date/time then it will report back an incorrect countdown figure.

Counting Other Intervals

I am counting down the days, however it can also be used to countdown other intervals by altering the formula on the line:

var days = Math.floor(differenceBetweenDates / (1000 * 60 * 60 * 24));

For hours:

var hours = Math.floor((differenceBetweenDates % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

For minutes:

var minutes = Math.floor((differenceBetweenDates % (1000 * 60 * 60)) / (1000 * 60));

For seconds:

var seconds = Math.floor((differenceBetweenDates % (1000 * 60)) / 1000);

Updating a Web Page Element

The above could used to update a text countdown on webpage using document elements, e.g.

var countDownUpdate = document.getElementById(‘countDown’);

countDownUpdate.textContent = days+’ left until the big event!’;

This would get the element ID ‘countDown’ and then update it with the number of days left.

2 responses to “Countdown (JavaScript)”

Functions (JavaScript) – Geek Tech Stuff

September 25, 2018

[…] am revisiting my JavaScript Countdown to turn elements of it into JavaScript […]

LikeLike
Updating Web Text Content (JavaScript) – Geek Tech Stuff

September 27, 2018

[…] original Countdown blog post mentioned that the JavaScript could be used to update content on a webpage (e.g. the […]

LikeLike