Completed lessons 16 and 17

xWalk in the park, baby.

Author: rmion

16 - Mouse Move Shadow/index-start.html

@@ -31,6 +31,35 @@ <h1 contenteditable>🔥WOAH!</h1>
   </style>
 
 <script>
+  const hero = document.querySelector('.hero');
+  const text = hero.querySelector('h1');
+  const walk = 100; // 100px
+  function shadow(e) {
+    // Boo, old ES5 way
+    // const width = hero.offsetWidth;
+    // const height = hero.offsetHeight;
+    // Yay, object destructuring in ES6
+    const { offsetWidth: width, offsetHeight: height } = hero;
+    let { offsetX: x, offsetY: y } = e;
+
+    if (this !== e.target) {
+      x = x + e.target.offsetLeft;
+      y = y + e.target.offsetTop;
+    }
+
+    const xWalk = Math.round((x / width * walk) - (walk / 2));
+    const yWalk = Math.round((y / width * walk) - (walk / 2));
+
+    console.log(xWalk, yWalk);
+
+    text.style.textShadow = `
+      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
+      ${xWalk * -1}px ${yWalk}px 0 rgba(0,0,255,0.7),
+      ${yWalk}px ${xWalk * -1}px 0 rgba(255,0,0,0.7),
+      ${yWalk * -1}px ${xWalk}px 0 rgba(0,255,255,0.7)
+    `;
+  }
+  hero.addEventListener('mousemove', shadow);
 </script>
 </body>
 </html>

17 - Sort Without Articles/index-START.html

@@ -43,8 +43,18 @@
   <ul id="bands"></ul>
 
 <script>
-const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
+  const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
 
+  function strip(bandName) {
+    return bandName.replace(/^(a |the |an )/i, '').trim();
+  }
+
+  const sortedBands = bands.sort((a,b) => strip(a) > strip(b) ? 1 : -1);
+
+  document.getElementById('bands').innerHTML =
+    sortedBands
+      .map(band => `<li>${band}</li>`)
+      .join('');
 
 </script>