/clock-javascript

Primary LanguageJavaScript

clock-javascript

Digital and analog clock done with JS and CSS.

Tricky things

HTML:

Split functionality selectors

  • Custom data attributes to select elements from JavaScript.
  • CSS Classes to select elements from CSS.
  • Script tag with defer property. Load script after html renders.

CSS:

  • @import font from google fonts.
  • Display Flex.
  • Colors with linear-gradient.
  • CSS variables. var().
  • Transform property.

JS:

  • Select html elements with querySelector thanks to the custom data attributes.
  • setInterval to tick the clock.

TO-DO

  • Host with GitHub Pages.