Highlights on making a CSS & JS clock, based on Wes Bos's 30 Day Vanilla JS challenge

_0.es6-string-literals.js

/**
 * In the `person.sayHello` function, we are using an ES6 template literal
 * to dynamically create a string
 */
var person = {
  first: 'Michael',
  last: 'Hull',
  sayHello: function() {
    console.log( `Hi, my name is ${this.first} ${this.last}` );
  },
};
person.sayHello();

_1.styling-clock-hands.css

/* the seconds-hand is usually red, long, and thin */
#second-hand {
  background: red;
  height: 2px;
  width: 49%;
}

/* the minutes-hand is usually thicker than seconds-hand
   and also slightly shorter */
#minute-hand {
  background: white;
  height: 5px;
  width: 45%;
  border-radius: 8px;
}

/* the hours-hand is usually short and wide */
#hour-hand {
  background: white;
  height: 8px;
  width: 30%;
  border-radius: 5px;
}

_2.continuous-minute-hand-motion.js

/* Here is the original code, which changes the minute 
   hand position once per minute */
minsHand.style.transform = ( mins / 60 ) * 360;

/* And here is an alteration which updates the minute hand
   every single second, based on how many seconds have passed 
   within the current minute */
minsHand.style.transform = ( mins + ( seconds / 60 ) ) / 60 * 360;

_3.continuous-hour-hand-motion.js

/* Here is the original code, which updates the hour hand
   once per hour, on the hour */
hourHand.style.transform = ( hour / 12 ) * 360;

/* And here is an alteration which updates the hour hand
   every single second, based on how many seconds have passed 
   within the current minute AND how many minutes have passed
   within the current hour */
hourHand.style.transform = ( hours + ( minutes / 60 ) + ( seconds / 3600 ) ) / 12 * 360

_4.clock-and-hands-objects.js

var clock = {

  element: document.querySelector('#clock'),
  seconds: 0,
  minutes: 0,
  hours: 0,

  /**
   * Initialize the clock on page load
   */
  init: function() {

    /**
     * Get DOM elements and create clock hand objects
     */
    this.hands = {
      second: clock.element.querySelector('#second-hand'),
      minute: clock.element.querySelector('#minute-hand'),
      hour: clock.element.querySelector('#hour-hand'),  
    };

    this.update( new Date() );

    /* the hands start out invisible, so they don't 'jump' into
       position on page load. Thus, we need to make them visible */
    for( var hand in this.hands ) {
      this.hands[hand].style.display = 'block';
    }
  },

  /**
   * Callback to update the clock each second
   */
  update: function( time ) {

    this.seconds = time.getSeconds();
    this.minutes = time.getMinutes();
    this.hours = time.getHours();
    
    this.setSecondHand();
    this.setMinuteHand();
    this.setHourHand();
  },

  /**
   * Set the seconds hand
   */
  setSecondHand: function() {
    const degrees = this.seconds / 60 * 360;
    this.rotateHand( this.hands.second, degrees );
  },

  /**
   * Set the minutes hand
   */
  setMinuteHand: function() {
    const degrees = ( this.minutes + this.seconds / 60 ) / 60 * 360;
    this.rotateHand( this.hands.minute, degrees );
  },

  /**
   * Set the hours hand
   */
  setHourHand: function() {
    const degrees = ( this.hours + this.minutes / 60 + this.seconds / 3600 ) / 12 * 360;
    this.rotateHand( this.hands.hour, degrees );
  },

  /**
   * Rotate a clock hand by a given amount
   */
  rotateHand: function( hand, degrees ) {
    degrees += 90;
    hand.style.transform = `rotate(${degrees}deg)`;
  },
};

clock.init();
setInterval( () => clock.update( new Date ), 1000 );