JavaScript’s Date(), setInterval() and .style property

The clock project from JavaScript30 made use of several CSS properties and JavaScript methods that I’ve used infrequently in other projects. When I was building out the project and then adding onto it after, I ended up delving into their documentation to understand how they operate. This is some of what I learned:

Date()

The Date() constructor creates a new Date object representing a single moment in time. When called without any arguments, it returns the current date and time. Initially, we use it to get a new date value and save it to a const:

const now = new Date()

As of the time of this writing, that code returns: Fri Jan 13 2023 00:10:50 GMT-0800 (Pacific Standard Time). It’s Friday the 13th! From there, in order to position the clock hands, we created new variables to store the date’s seconds, minutes and hours. This information was extracted with methods attached to the Date() object:

const seconds = now.getSeconds()
const mins = now.getMinutes()
const hours = now.getHours()

I used the data returned from that to position the analog clock hands and to render the time using numbers in the digital clock that I added to the bottom of the project. In addition to that, I used several other methods to get the calendar date, which I appended below the digital clock:

const month = now.getMonth()
const date = now.getDate()
const year = now.getFullYear()

I had to massage the values returned by these methods a little before rendering them onscreen by creating functions to format the time, day and month. For time, I wrote a function that appended a “0” to an hour, minute or second if it was less than 10, so that my digital clock used two digits for each field. I used that same function on the date in the calendar date.

I wrote another function that converted 24-hour time to 12-hour time for the digital clock. The .hours() method returns a value from 0 – 23. To correct this, just subtract 12 from any value greater than 12.

My last two formatting functions translated the day of the week and the month from numbers into names. For example “0” becomes “Sun”, “1” becomes “Mon” and so on for the days of the week and “0” becomes “Jan”, “1” becomes “Feb” and so on for the month.

setInterval()

setInterval() is a method that repeatedly calls a function or evaluates an expression at specified intervals (in milliseconds). This was the main execution code in the clock application. After setting up the functions that got the Date() and set its returned data into individual variables and formatted them, setInterval() called the function that makes everything go once every second. It looked like this:

setInterval(setDate, 1000)

1,000 milliseconds is equal to 1 second, so it essentially caused the program to re-render every second with a new Date() and its extracted values. This was the little engine that could.

element.style.transform()

Finally, we have the .style.transform() method. This is essentially the JavaScript way of modifying the CSS transform property on an HTML element. .style essentially holds all of the properties available in CSS to style HTML elements. The one that we focused on during this project was:

element.style.transform = `rotate(${someValue}deg)`

For example, to change the seconds hand, I used:

secondHand.style.transform = `rotate(${secondsDegrees}deg)`

setInterval() saw to it that the value was refreshed every second (as were all of the other date values, so the minutes and hours were refreshed as well, as were even longer-lasting parts of Date() like the day, month and year) and used to determine the angle to position each clock hand on the clock face. Only the seconds hand actually moved every second. The data for the other hands refreshed, but their position changed at their own intervals (every minute and every hour – surprise!).

The main .transform property that we adjusted was the rotate() property, but other .transform properties and other .style properties, like .transition, were also used in the actual CSS for the project. I’ll discuss the CSS in another post, including the .transform from here, because although we’re using JavaScript to update the property data, it’s better grouped together as its own post (separation of concerns strikes again!).

Leave a comment