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!

--

--

--

https://www.linkedin.com/in/itskushagra

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Today’s Panic: Arrow Function Syntax

Gmail compose dialog box in Angular 8.

My Experiences in Group Project

Day12 of #100DaysOfCode

In this article, I will be showing you how you can add dynamic search functionality to your…

Uploading Images/Files with Multer in Node.js

How JavaScript works: parallelism vs concurrency in JavaScript, what’s the difference?

INTRODUCTION TO RECURSION

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
Kushagra Kesav

Kushagra Kesav

https://www.linkedin.com/in/itskushagra

More from Medium

Day16 of #100DaysOfCode

CREATING THE GAME OF X AND O

My Front-End Path

My (Beginner) Experience With Flex and Grid Layout

Boxes