Digital Clock - Visual Analog

• Simple Project
• HTML, CSS, JS

Tutorial For Analog Clock Here:

https://www.youtube-nocookie.com/embed/Ki0XXrlKlHY?playlist=Ki0XXrlKlHY&autoplay=1&iv_load_policy=3&loop=1&modestbranding=1&start=

My Changes:

• Overall:

  • Analog Clock
  • Digital Clock

• CSS:

  • played with hsl
  • middle button of hands did not align the same - had to tweak it

What I Learned:

• Emmet shortcut: div.number.number$*12{$}*12 = the div is class of number with class of incremented number for specified length (12) with the incremented number of specified length (12) in the between div space {} NOTE: My Emmet did not like the extra *12 on the end. When I removed it, it worked as expected.

• CSS: hsl = hue, saturation, lightness https://www.w3schools.com/css/css_colors_hsl.asp: Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white orange favorite is hsl(20, 100%, 50%), hsl(40, 100%, 50%) purple favorite is hsl(258, 100%, 50%), hsl(248, 53%, 58%)

• CSS: perfect circle border-radius: 50%;

• CSS: positioning

  • for child to be absolute, parent = relative
  • transform: translateX(-50%) -for an object to be moved backward 50% of its width

Future Updates: