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.

Retired physician, writer, aspiring website designer and developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store