A New Vue On JavaScript30 - 02 JS and CSS Clock

This article is part of the A New Vue On JavaScript30 series that explores re-implementing #JavaScript30 projects using Vue. Today we will be working with the second of Wes Bos’s (@wesbos) #JavaScript30 projects titled: 02 - JS and CSS Clock. It’s a cool looking analog clock that uses a setInterval() callback to control the clock hands by rotating them based on the current time.

Key Vue Concepts

The following Vue concepts are discussed in this article:

• Style binding with :style (shorthand for v-bind:style)
• data reactivity
• mounted lifecycle hook

Vue Implementation

Unlike A New Vue On JavaScript30 - 01 JavaScript Drum Kit, I only created one Vue implementation this time but I followed a similar pattern. First, I inserted the code from the original #JavaScript30 project into their corresponding Vue locations in my base starter file from my getting started article:

• The HTML section fit inside the root <div id="app">
• The functions went into the methods section
• The JavaScript that executed upon page load was placed into the mounted function
• The <style> section was moved into my Vue version unchanged
• The computed and watch sections were not needed so they were removed

With those changes we can get pretty close to a working clock but not quite. The querySelector() calls don’t have a place to go; without those, the rotation transforms aren’t going to work. To fix this I made just a couple of changes. First, I added three fields to the Vue Instance data object: secondsDegrees, minsDegrees, and hourDegrees. These will hold the values in degrees for each clock hand.

Next, I changed the setDate method to update those data fields. Note the usage of this to reference the proper data fields within the Vue instance.

Then, I added a method transformHandStyle that returns the transform style using degrees as its input.

And finally, I used Vue’s :style binding to set the clock hands to the result of the transformHandStyle method that is passed the corresponding data field.

Now let’s take a look at what the core of what the implementation looks like. I’ve annotated it to show how how it flows together.

1. When the Vue instance is mounted, the setDate method is called at intervals of 1 second (1000ms).
2. Inside the setDate function, the calculations for each hand is computed and set in the appropriate data field.
3. Changes to the secondsDegrees, minsDegrees, and hourDegrees data fields activate Vue’s reactivity system to trigger calling the transformHandStyle method which sets the clock hand style.
4. The transformHandStyle method returns the css transform that rotates the clock hand.

Putting It All Together

Overall, my Vue implementation isn’t drastically different than #JavaScript30, but I was able to use Vue’s style binding and reactivity system to remove all direct JavaScript DOM queries and manipulations.

I hope you enjoyed this article, feel free to message me with any questions, comments, or corrections. All code presented within this series is available in my fork of the official #JavaScript30 GitHub repository which is located at:

• https://github.com/davefollett/JavaScript30

Up Next

Next in the A New Vue On JavaScript30 series is:

A New Vue On JavaScript30 - 03 CSS Variables

Dave Follett ・ Sep 7 '18

#anewvueonjs30 #vue #javascript30 #javascript