JavaScript 30- Day 22 Study Notes

https://javascript30.com/

Day 22 of JavaScript 30 by Wes Bos involved setting up a cool feature to use on a navigation bar. As you moved the mouse across the bar, the tabs will highlight. The size of the highlight changes to fit the wording as the mouse moves to a different tab.

Bos created two variables. One to select the HTML tab. The other to add the highlight.

const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

A function obtained the bounding coordinates and matched them up with the target to be highlighted.

function highlightLink() {
   const linkCoords = this.getBoundingClientRect();
   //compensate for scroll offset
   const coords = {
      width: linkCoords.width,
      height: linkCoords.height,
      top: linkCoords.top + window.scrollY,
      left: linkCoords.left + window.scrollX
   };

We added the coordinates using template literals.

highlight.style.width = `${coords.width}px`;
highlight.style.height = `${coords.height}px`;
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}

Used an event listener to detect the mouse entering the tab area and initiate the program.

triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));

I liked the feature and look forward to using it in a future creation.

Follow my study notes as I progress through JavaScript 30.

JavaScript 30–01 Drum Kit