JavaScript 30- Day 22 Study Notes
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.