Vanilla JS

Day 1-Drum Kit @Sept 14 2019

• querySelector()
• template literals(template strings) ${placeholder}
• addEventListener('somecondition', thendo)
• classList.add/remove()
• transform: scale(float number)
• transition: float time

---

Day 2-Clock @Sept 15 2019

• .class { transform (center point, rotate deg), transition ( timing function, customize in chrome ease-in-and-out)}
• new Date().getSeconds/min/hr()
• degree conversion
• setInterval(function, timeout) to animate

Day 3-CSS Controller @Sept 17 2019

• :root -- root element of the document
• in CSS, var(--some-name); then can be used as --some-name: some_value;
• .forEach();
• addEventListener('event',some_function)
• add suffix e.g 'px' to a value and used in CSS property: documentElement.style.setProperty('target_property', add_some_value);