Here's how I built a feature which allows a cart modal to fade in when it's clicked.
First, I want to create a class with all my styles, and then to trigger in JS, give the first class a display: none. I then create a second class named (-visible) and give it a display: flex;.
It looks like this:
.dropdown-cart{
background: #fafafa;
height: 57vh;
width: 25%;
top: 91px;
right: 0px;
position: fixed;
display: none; (Here's where I hide the cart)
padding-left: 4%;
z-index: 1;
animation-duration: 1s;
animation-name: fadein; (Here is where the effect will come in)
}
.dropdown-cart-visible{
display: flex; (Here's where the cart is visible)
padding-left: 4%;
}
In JS, I made sure to create variables that would help me target the index I was looking for.
Basically, I created a variable for the cart icon and the modal itself, so when you click on the icon, it will fade in, and if you click again, it will fade out. Here's what it looks like.
let dropdowncart =
document.getElementsByClassName('dropdown-cart')[0]
let carticon =
document.getElementsByClassName('cart')[0]
let showdropdown = function () {
dropdowncart.classList.add('dropdown-cart-visible')
pagefade.classList.add('fadecart-fadein')
console.log('hello')
}
let hidedropdown = function () {
dropdowncart.classList.remove('dropdown-cart-visible')
pagefade.classList.remove('fadecart-fadein')
console.log('goodbye')
}
carticon.addEventListener('click', function () {
showdropdown();
})
closeicon.addEventListener('click', function () {
hidedropdown();
})
To sum it up,
1) Create your classes in CSS, and hide the original class, since you don't want it shown until clicked.
2) Create a second class of -visible, and that's what you'll use to create variables in JS.
Top comments (0)