A New Vue On JavaScript30 - 02 JS and CSS Clock
Tags: anewvueonjs30, vue, javascript30, javascript
Published: 2018-08-17 18:19:49

---
title: A New Vue On JavaScript30 - 02 JS and CSS Clock
published: true
tags: ANewVueOnJS30,Vue,JavaScript30,JavaScript
canonical_url: https://davefollett.io/2018/08/17/a-new-vue-on-javascript30-02-js-and-css-clock/
cover_image: https://davefollett.io/2018/08/17/a-new-vue-on-javascript30-02-js-and-css-clock/js-and-css-clock.jpg
series: A New Vue On JavaScript30
---

This article is part of the [A New Vue On JavaScript30](/t/anewvueonjs30) series that explores re-implementing [#JavaScript30](https://JavaScript30.com) projects using [Vue](https://vuejs.org). Today we will be working with the second of Wes Bos’s ([@wesbos](https://twitter.com/wesbos)) [#JavaScript30](https://JavaScript30.com) 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](/davefollett/a-new-vue-on-javascript30---01-javascript-drum-kit-1k7f), 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](https://github.com/davefollett/JavaScript30/blob/master/00%20-%20Getting%20Started/index-VUE.html) from my [getting started](/davefollett/a-new-vue-on-javascript30---getting-started-4o61) 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.

{% gist https://gist.github.com/davefollett/96cd23dd5554eb334f5e579f104378f8 %}

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.

{% gist https://gist.github.com/davefollett/d3bcca548119c7cc56a6401bbf769f40 %}

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

{% gist https://gist.github.com/davefollett/e2e7f9b94f3181fb389b1ac43f13d157 %}

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.

{% gist https://gist.github.com/davefollett/db1f90d48e46720a93bcb121f70753ca %}

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.

![](https://davefollett.io/2018/08/17/a-new-vue-on-javascript30-02-js-and-css-clock/clock-flow.png)

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

{% codesandbox yvyqm83lnz initialpath=02%20-%20JS%20and%20CSS%20Clock%2Findex-VUE.html module=%2F02%20-%20JS%20and%20CSS%20Clock%2Findex-VUE.html %}

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](https://github.com/davefollett/JavaScript30) of the official [#JavaScript30 GitHub repository](https://github.com/wesbos/JavaScript30) which is located at:

- [https://github.com/davefollett/JavaScript30](https://github.com/davefollett/JavaScript30)

## Up Next

Next in the [A New Vue On JavaScript30](/t/anewvueonjs30) series is:

{% link /davefollett/a-new-vue-on-javascript30---03-css-variables-kbf %}