Finish 03-CSS Variables

JodiWarren · JodiWarren · commit 42076381de72 · 2018-12-24T12:58:54.000Z
diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html
@@ -33,6 +33,10 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       font-family: 'helvetica neue', sans-serif;
       font-weight: 100;
       font-size: 50px;
+      --spacing: 10px;
+      --blur: 10px;
+      --base-color: #ffc600;
+
     }
 
     .controls {
@@ -42,6 +46,18 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
     input {
       width: 100px;
     }
+
+    img {
+      box-shadow: var(--spacing) var(--spacing) 10px 10px var(--base-color);
+      filter: blur(var(--blur));
+      will-change: filter;
+      z-index: 1;
+      transform: translate3d(0,0,0);
+    }
+
+    .hl {
+      color: var(--base-color);
+    }
   </style>
 
   <script src="script.js"></script>
diff --git a/03 - CSS Variables/script.js b/03 - CSS Variables/script.js
@@ -0,0 +1,16 @@
+var $ = function (selector) { return document.querySelector(selector); };
+var body = $('body');
+var spacingInput = $('#spacing');
+var blurInput = $('#blur');
+var baseInput = $('#base');
+var appendpx = function (value) { return value + "px"; };
+var string = function (value) { return "" + value; };
+function setListener(element, propertyName, valueCallback) {
+    element.addEventListener('input', function () {
+        body.style.setProperty(propertyName, valueCallback(element.value));
+    });
+}
+;
+setListener(spacingInput, '--spacing', appendpx);
+setListener(blurInput, '--blur', appendpx);
+setListener(baseInput, '--base-color', string);
diff --git a/03 - CSS Variables/script.ts b/03 - CSS Variables/script.ts
@@ -0,0 +1,37 @@
+const $ = (selector) => document.querySelector(selector);
+
+const body = $('body');
+const spacingInput = $('#spacing');
+const blurInput = $('#blur');
+const baseInput = $('#base');
+
+const appendpx = (value) => `${value}px`;
+const string = (value) => `${value}`;
+
+function setListener(
+    element: HTMLInputElement,
+    propertyName: string,
+    valueCallback: (value: number | string) => string
+) {
+    element.addEventListener('input', () => {
+        body.style.setProperty(propertyName, valueCallback(element.value));
+    })
+};
+
+setListener(
+    spacingInput,
+    '--spacing',
+    appendpx
+);
+
+setListener(
+    blurInput,
+    '--blur',
+    appendpx
+);
+
+setListener(
+    baseInput,
+    '--base-color',
+    string
+);
