Day26 of #100DaysOfCode

#CodeTogether Day 26/100

Hii folks 🙌

Today I have completed the 26th video of JavaScript30!

Project 26: Stripe Follow Along Dropdown

Source: https://javascript30.com

Learnings:

We have been tasked to set 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;
  }

We then added two sub-classes that will provide the change.

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

In the script tag, we included the usual set of variables and added the event listeners. Then we created a function to handle a mouse event and activate the two sub-classes.

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

To custom fit the dropdown window to fit each element, we were required to obtain the coordinates from the viewport. So, we used the getBoundingClientReact method to obtain the measurements of the container. In this case, we used 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 Along Dropdown

Today I Learned (T-I-L):

• Various CSS stuff,
• Mouse Handling event and activating the classes linked to it!

That is all for Day26 ✅

Thanks for reading, See you tomorrow!