3-update css with variales (done)

corneliugaina · Jun 3, 2019 · 1ea3aeb · 1ea3aeb
1 parent 461e5b7
commit 1ea3aeb
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 1 deletion.
diff --git a/2-css+js-clock/index.html b/2-css+js-clock/index.html
@@ -80,7 +80,7 @@
                 const hourDegrees = ((mins / 12) * 360) + 90;
                 hourHand.style.transform = `rotate(${hourDegrees}deg)`;
             }
-            setInterval(setDate,1000);
+            setInterval(setDate,2000);
         </script>
     </body>
 </html>
diff --git a/3-update-css-with-js/index.html b/3-update-css-with-js/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <meta charset="UTF-8">
+    <title>Scoped CSS Variables and JS</title>
+    </head>
+    <body>
+        <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
+        <div class="controls">
+            <label for="spacing">Spacing:</label>
+            <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px" >
+
+            <label for="blur">Blur:</label>
+            <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+
+            <label for="base">Base Color</label>
+            <input id="base" type="color" name="base" value="#ffc600">
+        </div>
+        <img src="https://www.spacex.com/sites/spacex/files/spacex_default.jpg">
+
+        <style>
+            :root {
+                --base: yellow;
+                --spacing: 10px;
+                --blur: 10px;
+            }
+
+            img {
+                padding: var(--spacing);
+                background: var(--base);
+                filter: blur(var(--blur));
+            }
+
+            .hl {
+                color: var(--base);
+
+            }
+
+            /*
+                misc styles, nothing to do with CSS variables
+            */
+            body {
+                text-align: center;
+                background: #193549;
+                color: white;
+                font-family: 'helvetica neue', sans-serif;
+                font-weight: 100;
+                font-size: 50px;
+            }
+            .controls {
+                margin-bottom: 50px;
+            }
+
+            a { 
+                color: var(--base);
+                text-decoration: none;
+            }
+
+            input {
+                width: 100px;
+            }
+        </style>
+
+        <script>
+            const inputs = document.querySelectorAll('.controls input');
+
+            // la fonction pour appliquer une valeur à la variable (set propriety)
+            function handleUpdate() {
+                const suffix = this.dataset.sizing || '';
+                document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); 
+                console.log(this.name);
+            }
+
+            inputs.forEach(input => input.addEventListener('change', handleUpdate));
+            inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+
+        </script>
+    </body>
+</html>
diff --git a/4-array-cardio-day1/index.html b/4-array-cardio-day1/index.html
@@ -0,0 +1,47 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+    <meta charset="UTF-8">
+    <title>Array Cardio 💪</title>
+    </head>
+    <body>
+        <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
+    <script>
+    // Get your shorts on - this is an array workout!
+    // ## Array Cardio Day 1
+    // Some data we can work with
+    const inventors = [
+        { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
+        { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
+        { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
+        { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
+        { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
+        { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
+        { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
+        { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
+        { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
+        { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
+        { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
+        { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
+    ];
+    const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+    // Array.prototype.filter()
+    // 1. Filter the list of inventors for those who were born in the 1500's
+    // Array.prototype.map()
+    // 2. Give us an array of the inventors' first and last names
+    // Array.prototype.sort()
+    // 3. Sort the inventors by birthdate, oldest to youngest
+    // Array.prototype.reduce()
+    // 4. How many years did all the inventors live?
+    // 5. Sort the inventors by years lived
+    // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
+    // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
+    // 7. sort Exercise
+    // Sort the people alphabetically by last name
+    // 8. Reduce Exercise
+    // Sum up the instances of each of these
+    const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+    </script>
+    </body>
+</html>