22, 23, 24 challenges

Author: Ánderson Méndez Abello

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

@@ -26,7 +26,27 @@
     </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();
+      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(trigger => trigger.addEventListener('mouseenter', highlightLink));
+
   </script>
 </body>
 </html>

23 - Speech Synthesis/index-START.html

@@ -35,6 +35,47 @@ <h1>The Voiceinator 5000</h1>
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector('#speak');
   const stopButton = document.querySelector('#stop');
+
+  msg.text = document.querySelector('textarea').textContent;
+
+  function populateVoices() {
+    voices = this.getVoices();
+    voicesDropdown.innerHTML = voices
+      .map(voice => `<option value="${voice.name}">${voice.name} ${voice.lang}</option>`).join('');    
+  }
+
+  function changeVoice(event) {    
+    console.log(voices);
+    msg.voice = voices.find(voice => voice.name === this.value);
+    console.log(msg.voice);
+    toogle();
+  }
+
+  function toogle(startOver = true) {
+
+    speechSynthesis.cancel();
+
+    if (startOver) {
+      speechSynthesis.speak(msg);
+    }
+
+  }
+
+  function setOption(){
+    
+    console.log(this.name, this.value);
+    msg[this.name] = this.value;
+    toogle();
+
+  }
+
+
+  speechSynthesis.addEventListener('voiceschanged', populateVoices);
+  voicesDropdown.addEventListener('change', changeVoice);
+  options.forEach(option => option.addEventListener('change', setOption));
+  speakButton.addEventListener('click', toogle);
+  stopButton.addEventListener('click', () => toogle(false));
+
 </script>
 
 </body>

24 - Sticky Nav/index-START.html

@@ -65,7 +65,7 @@ <h1>A story about getting lost.</h1>
       document.body.style.paddingTop = 0;
       document.body.classList.remove('fixed-nav');
     }
-  }
+  }     
 
   window.addEventListener('scroll', fixNav);
 </script>