JavaScript 30- Day 26 Study Notes

https://javascript30.com/

Day 26 of JavaScript 30 by Wes Bos involved setting up a dropdown element that followed along a navigation bar. The element was customized for each item in the menu.

We set up three list items inside an unordered list that made up the navigation bar. They included a dropdown CSS class that contained properties for opacity and display. A new CSS property, to me, is the will-change property that hints to the browser to expect an element change later on.

.dropdown {
  opacity: 0;
  will-change: opacity;
  display: none;

Bos added two sub-classes that will provide the change.

.trigger-enter .dropdown {
   display: block;
}
.trigger-enter-active .dropdown {
   opacity: 1;
}

In the script tag, the usual setting of variables and adding event listeners. Then a function to handle a mouse event and activate the two sub-classes.

function handleEnter(){
   this.classList.add('trigger-enter');
   setTimeout(() => {
      if(this.classList.contains('trigger-enter')) {
      this.classList.add('trigger-enter-active')
   }
},150);

To custom fit the dropdown window to fit each element, we needed to obtain the coordinates from the viewport. Bos had used the getBoundingClientReact method earlier in the course, this obtains the measurements of the container. In this case, both the dropdown and nav elements.

const dropdown = this.querySelector('.dropdown');
const dropdownCoords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();

Set the proper coordinates into a variable.

const coords = {
   height: dropdownCoords.height,
   width: dropdownCoords.width,
   top: dropdownCoords.top - navCoords.top,
   left: dropdownCoords.left - navCoords.left,
};

Now, we can resize the container using the setProperty method and template literals.

background.style.setProperty('width', `${coords.width}px`);
background.style.setProperty('height', `${coords.height}px`);
background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);

Finally, we used another function to handle the mouse leaving the container.

function handleLeave(){
this.classList.remove('trigger-enter', 'trigger-enter-active');
background.classList.remove('open');
}

The program resulted in a nice effect as you moved the mouse from element to element on the navigation bar.

Follow my study notes as I progress through JavaScript 30.

JavaScript 30–01 Drum Kit

JavaScript 30- Day 15 Study Notes