Complete Day 22 - Follow Along Link Highlighter

Author: AngelaRead

22 - Follow Along Link Highlighter/index-FINISHED.html

@@ -27,7 +27,28 @@
     </div>
 
   <script>
-    // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink(){
+      const linkCoords = this.getBoundingClientRect();
+      console.log(linkCoords);
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX,
+      }
+
+      highlight.style.width =  `${coords.width}px`;
+      highlight.style.height =  `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
+    }
+
+    triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>

… Along Link Highlighter/index-START.html …Follow Along Link Highlighter/index.html22 - Follow Along Link Highlighter/index-START.html renamed to 22 - Follow Along Link Highlighter/index.html 22 - Follow Along Link Highlighter/index-START.html renamed to 22 - Follow Along Link Highlighter/index.html

@@ -11,10 +11,10 @@ body {
   margin: 0; /* Important! */
   font-family: sans-serif;
   background:
-    linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
-    linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
-    linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
+    linear-gradient(45deg, rgb(26, 194, 255) 0%, hsla(340, 100%, 55%, 0) 70%),
+    linear-gradient(135deg, rgb(106, 131, 161) 10%, hsla(225, 95%, 50%, 0) 80%),
+    linear-gradient(225deg, rgb(61, 154, 182) 10%, hsla(140, 90%, 50%, 0) 80%),
+    linear-gradient(315deg, rgb(77, 106, 156) 100%, hsla(35, 95%, 55%, 0) 70%);
 }
 
 .wrapper {
@@ -34,10 +34,10 @@ a {
 
 .highlight {
   transition: all 0.2s;
-  border-bottom: 2px solid white;
+  border-bottom: 2px solid rgb(27, 40, 65);
   position: absolute;
   top: 0;
-  background: white;
+  background: rgb(193, 244, 255);
   left: 0;
   z-index: -1;
   border-radius: 20px;