Skip to content

Instantly share code, notes, and snippets.

@mhull
Last active December 17, 2016 21:28
Show Gist options
  • Save mhull/1d96520bc2b675beaf7db0b877645be6 to your computer and use it in GitHub Desktop.
Save mhull/1d96520bc2b675beaf7db0b877645be6 to your computer and use it in GitHub Desktop.
Highlights on making a CSS & JS clock, based on Wes Bos's 30 Day Vanilla JS challenge
/**
* 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();
/* 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;
}
/* 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;
/* 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
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 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment