From 5ed7b4b2ed888e8be9860eb6be561fd57f480b26 Mon Sep 17 00:00:00 2001 From: Michael Fleming Date: Fri, 9 Dec 2016 15:58:26 -0600 Subject: [PATCH 1/2] drum kit complete --- 01 - JavaScript Drum Kit/index-START.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..77a3270875 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,24 @@ From d3aa8e7d17152f96696d22986aa719b62b70723e Mon Sep 17 00:00:00 2001 From: Michael Fleming Date: Mon, 12 Dec 2016 15:47:10 -0600 Subject: [PATCH 2/2] completes css variables, updates clock --- 02 - JS + CSS Clock/index-START.html | 30 +++++++++ 03 - CSS Variables/index-START.html | 96 +++++++++++++++++----------- 2 files changed, 89 insertions(+), 37 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..20a3e8b8fb 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,12 +61,42 @@ background:black; position: absolute; top:50%; + transform: rotate(90deg); + transform-origin: 100%; + transition: all .05s; + transition-timing-function: cubic-bezier(0,0,0,2.7); } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..f108f669f0 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,59 +1,81 @@ + - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - + + + const inputs = document.querySelectorAll('.controls input'); + inputs.forEach(input => { + input.addEventListener('change', handleUpdate); + input.addEventListener('mousemove', handleUpdate); + }); + function handleUpdate(e) { + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); + } + + +