JavaScript30 — Day 20

Programming a navigation menu highlight/hover feature!

Today’s project was the foundation for a larger navigation project I’ll tackle later in the week. It reminds me of how a spotlight works on stage — it pins on to a feature and calls focus to it, but can move around and never disappears while in motion. The movement of the spotlight is part of the drama — where will it settle?

Bits

• Today’s project relied heavily on the .getBoundingClientRect() method. We used it within a function and applied it to “this”, which initially confused me, until I logged “this” to the console. Since we attach the highlightLink function to the “triggers” variable through an event listener, “this” refers to whichever element within “triggers” the mouse is hovering over. So, if we hovered over the “home” link in the navigation menu, .getBoundingClientRect() would retrieve all of the rectangle properties of that element — pictured below is the result of the following code: const linkCoords = this.getBoundingClientRect(); / console.log(linkCoords); .

• I felt a little shaky on the CSS transform property, specifically the translate values, although I’ve addressed them before! I returned to CodePen to create a short exercise using CSS transform to move a <div> element diagonally across a page. The next step would be… figuring out how to move it back!

Blindspots

• The overall concept in JS that is still confounding me is knowing which information to store in a variable, or an array, or an object/class, and why. I feel like so far I’ve familiarized myself with a lot of pieces of JS, but I haven’t yet learned how to put the puzzle together in an efficient and effective way. It’s hard not to be impatient — I wish I were there, and able to think fluently in JS already!
• Initially, I thought we’d be able to create this mobile highlighting effect by creating a function that applied a CSS class (of a white background with rounded edges) to each link, and adding an event listener for mouseover, which would trigger the addition of the background class. However, I was continuously thrown an error message that told me “addEventListener is not a function”. I did a bunch of research and thought I’d found the answer — querySelectorAll returns a Node list, and you can’t apply an event listener to multiple elements in a Node list at once. Next, I tried transforming the Node list into an array, and using the forEach() array method inside functions to address array items individually. That didn’t work either! You can imagine my confusion when I noticed that in the solution code, it wasn’t even necessary to transform the Node list into an array, and that you can use forEach() on a Node list. I think where I went awry was trying to use the variable containing the Node list inside of a function? That’s the only logical difference I can spot between my various code-attempts and the solution code.

My unsuccessful attempt!

I really dove in on a lot of topics from today’s project, and did a ton of documentation reading — it has left me with no time for a breakdown! I will make a point to get back to it tomorrow. In the meantime, my commented code is here!