I’ve been on a little bit of a journey over the last 6 months or so. I’ll explain in a future blog post but the short version is that I’ve expanded my skills to web development. I’ve been developing solutions to challenges I face as I learn more, and as I continue to update my Modi’in Bus project. I thought I’d start sharing some of those little solutions here on my blog, in addition to other helpful spaces.
I wanted to create a live date/time string for Modi’in Bus. My goal was to use JavaScript to insert a line that stated the current date and time. I searched for a few explanations of how to effectively use the JavaScript getDate() method (here is the MDN documentation).
Adding the date is relatively straightforward. I couldn’t find a clean solution for adding a clock that changes in real-time, until I found this great implementation by Eugenio Leon. The challenge with the time is that you want the live display to be dynamic, and not just update when you refresh.
The solution I came up with (with the help of the resources I mentioned) uses ES6 syntax, and seems to work pretty much as expected.
This is my solution. The script determines the current date and time, and inserts it into a div element with the class of container in my site code:
// The purpose of this block is to list the month names which will correspond with the corresponding numerical value of the particular month that is other derived from the getDate() method.
Date.prototype.monthName = function() {
const monthsOfYear = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return monthsOfYear[this.getMonth()];
}
// As with the previous block, this block states the days of the week so the script can match the named days of the week to corresponding numerical values.
Date.prototype.dayName = function() {
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
return daysOfWeek[this.getDay()];
}
function realtimeClock() {
const now = new Date(),
today = now.dayName(),
year = now.getFullYear(),
month = now.monthName(),
day = now.getDate(),
secs = ('0' + now.getSeconds()).slice(-2),
mins = ('0' + now.getMinutes()).slice(-2),
hours = now.getHours(),
container = document.querySelector('.clock');
container.innerHTML = `Today is ${today}, ${day} ${month} ${year}. The current time is ${hours}:${mins}:${secs}`;
requestAnimationFrame(realtimeClock);
};
requestAnimationFrame(realtimeClock);
I thought I’d share it because I couldn’t find anything that did the trick quite like this on StackOverflow.
Featured image by by Loic Djim on Unsplash
