wesbos#16 my way

Author: brandonjunus

14 - JavaScript References VS Copying/index-START.html

@@ -47,7 +47,8 @@
     // how do we take a copy instead?
 
     // We will hopefully soon see the object ...spread
-
+    let person2 = {...person};
+    console.log(person2);
     // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
 
   </script>

16 - Mouse Move Shadow/index-finished.html

@@ -50,12 +50,12 @@ <h1 contenteditable>🔥WOAH!</h1>
 
     const xWalk = Math.round((x / width * walk) - (walk / 2));
     const yWalk = Math.round((y / height * walk) - (walk / 2));
-
+    
+    // ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
+    // ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+    // ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7)
     text.style.textShadow = `
-      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
-      ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
-      ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
-      ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
+      ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7)
     `;
 
   }

16 - Mouse Move Shadow/index-start.html

@@ -30,11 +30,24 @@ <h1 contenteditable>🔥WOAH!</h1>
 
   h1 {
     text-shadow: 10px 10px 0 rgba(0,0,0,1);
+    /* text-shadow: 100px 10px 0 rgba(255,0,255,0.7); */
     font-size: 100px;
   }
   </style>
 
 <script>
+  let text = document.querySelector('.hero h1');
+  var rect = text.getBoundingClientRect();
+  let {x: offsetWidth, y: offsetHeight} = rect;
+  let x, y;
+  window.addEventListener('mousemove', (e) => {
+    x = e.x;
+    y = e.y;
+    console.log(x, y)
+    // text.style.textShadow = `${x}px ${y}px 0 rgba(255,0,255,0.7);`
+    // text.style.cssText = `${x}px ${y}px 0 rgba(255,0,255,0.7);`
+    text.setAttribute('style', `text-shadow: ${x > offsetWidth ? -.025 * (x - offsetWidth): .025 * (offsetWidth - x)}px ${y > offsetHeight ? -.025 * (y - offsetHeight): .025 * (offsetHeight - y)}px 0 rgba(255,0,255,0.7);`);
+  })
 </script>
 </body>
 </html>