https://github.com/gerhynes/js-and-css-clock

An analog clock built with JavaScript and CSS for Wes Bos' JavaScript 30 course.
https://github.com/gerhynes/js-and-css-clock

javascript javascript30

Last synced: 10 months ago
JSON representation

An analog clock built with JavaScript and CSS for Wes Bos' JavaScript 30 course.

• Host: GitHub
• URL: https://github.com/gerhynes/js-and-css-clock
• Owner: gerhynes
• Created: 2017-10-03T07:48:22.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-18T22:01:23.000Z (about 8 years ago)
• Last Synced: 2025-01-31T11:49:40.426Z (12 months ago)
• Topics: javascript, javascript30
• Language: CSS
• Homepage: https://gk-hynes.github.io/js-and-css-clock/
• Size: 2.93 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [JavaScript and CSS Clock](https://gk-hynes.github.io/js-and-css-clock/)

An analog clockface built with JavaScript for Wes Bos' [JavaScript 30](https://javascript30.com/) course.

[![Screenshot of JavaScript clock](https://screenshots.firefoxusercontent.com/images/60e26703-4af6-4f40-9716-5c10b11e4712.png)](https://gk-hynes.github.io/js-and-css-clock/)

## Notes

### CSS

Set the hands to start at 12 o clock using ```transform: rotate(90deg);```.

By default elements rotate at their centre. Set the hands to rotate from their right end using ```transform-origin: 100%;```. 

Give the hands a realistic 'tick' using a cubic-bezier transition-timing function: ```transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);```.

### JavaScript

Use a setInterval function to run the ```setDate()``` function every second. 

Use ```new Date();``` and ```now.getSeconds();``` etc. to gte the current time. 

Convert seconds, minutes and hours to degrees by dividing them by 60 or 12 and then multiplying the result by 360. Add 90 to offset the original move to 12 o clock. 

The hands glitch when the second handreaches 12 as the second hand goes backwards to try to start again. Avoid this by using an if statement to set ```hand.style.transition = "none"``` if the seconds hand is at 90 degrees.