Skip to content

Latest commit

 

History

History
41 lines (30 loc) · 1.45 KB

README.md

File metadata and controls

41 lines (30 loc) · 1.45 KB

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: