https://github.com/nibble-4bits/vanillajs-analog-clock

An analog clock made with plain HTML, plain CSS, plain Javascript and a bit of math
https://github.com/nibble-4bits/vanillajs-analog-clock

clock clockface css html javascript vanilla-css vanilla-html vanilla-js

Last synced: about 1 month ago
JSON representation

An analog clock made with plain HTML, plain CSS, plain Javascript and a bit of math

• Host: GitHub
• URL: https://github.com/nibble-4bits/vanillajs-analog-clock
• Owner: nibble-4bits
• License: mit
• Created: 2021-05-14T22:49:57.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-06-02T03:15:15.000Z (over 1 year ago)
• Last Synced: 2023-06-02T04:22:18.947Z (over 1 year ago)
• Topics: clock, clockface, css, html, javascript, vanilla-css, vanilla-html, vanilla-js
• Language: JavaScript
• Homepage: https://nibble-4bits.github.io/vanillajs-analog-clock/
• Size: 8.79 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vanilla JS Analog Clock

An analog clock made with plain HTML, plain CSS, plain Javascript and a bit of math.

## Why?

I first thought of this project after watching [this](https://www.youtube.com/watch?v=E4RyStef-gY) coding challenge by Daniel Shiffman of [The Coding Train YouTube Channel](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw).

I wondered if I could do something similar but without any external libraries, just using the power of the trinity of web languages: HTML, CSS and Javascript.

And well, this repo is the result of that idea!

## Live Demo

https://nibble-4bits.github.io/vanillajs-analog-clock/

## Built With

- HTML

- CSS

  - [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

  - [Media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries)

  - [Flexbox layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)

  - [Grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

- Javascript

  - [Document.querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)

  - [Style declarations](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)

  - [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)

  - [Event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)

## License

[MIT](https://choosealicense.com/licenses/mit/)