I am trying to create a website where you can buy some sneakers, when the cart is clicked I want a div showing “your cart is empty” or the number of the items in the cart. my problem is it shows behind the carousel instead of over the carousel. I’m attaching the pictures of how it suppose ti look and how my one looks:
This is my HTL code:
<header>
<div id="header">
<div id="navLogo">
<div id="nav">
<div id="navMenu">
<button type="button" class="btn" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
<image id="navIcon" src="./images/icon-menu.svg"></image></button>
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="nav-menu">
<div class="modal-body">
<button type="button" class="btn" data-mdb-dismiss="modal"><image id="closeImg" src="./images/icon-close.svg"></image></button>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link" href="#">Collections</a>
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
<li class="nav-item">
<a class="nav-link" href="#">Women</a>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--End Modal-->
</div>
<div id="logo">
<img id="logoImg" src="./images/logo.svg"/>
</div>
</div>
<div id="cartAvatar">
<button id="cartIcon">
<img id="cart" src="./images/icon-cart.svg"/>
<span id="cartIconNumber">0</span>
</button>
<!--CART EMPTY-->
<div class= "cart-Empty">
<div class="cart-Title" >
<h4>Cart</h4>
</div>
<div class="cart-Cont">
<h4> Your cart is empty</h4>
</div>
</div>
<!--CART FULL-->
<div class="cartFull">
<div class="cartContent">
<div class="cart-Title">
<h4>Cart</h4>
</div>
<div class="cart-img">
<img id="imgCart" class='cart-item' src="./images/image-product-1-thumbnail.jpg" class="shopping-cart-image">
</div>
<div class="cart-item">
<div class = "cart-name">
<h6>Autumn Limited Edition...</h6>
</div>
<div class="numbers">
<div class="cart-prize">
<p id="sneakers.prize"> </p>
</div>
<div class="cart-amount">
<p id="quantityFromStorage"></p>
</div>
<div class="cart-total">
<p id="prizeFromStorage"><p>
</div>
<div class="cart-delete">
<button class= "delete" type="button"><img src="./images/icon-delete.svg" class="shopping-cart-image"></button>
</div>
<span id="checkout">Checkout</span>
</div>
</div>
</div>
<!--END FOR CART-->
</header>
<body>
<div id="mainContainer">
<div id="myCarousel">
<div id="fullCarousel">
<!--Carousel wrapper -->
<div id="carouselSneakers" class="carousel slide carousel-slide" data-mdb-ride="carousel">
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/image-product-1.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-2.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-3.jpg" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="./images/image-product-4.jpg" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Controls -->
<div id="controls">
<button class="carousel-control-prev" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="prev" > <img class="controls" src="./images/icon-previous.svg">
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carouselSneakers"
data-mdb-slide="next"> <img class="controls" src="./images/icon-next.svg">
</button>
</div>
<!--Thumbnails-->
<div class="carousel-indicators">
<button id="imgdes"type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1">
<img src="./images/image-product-1-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="1" aria-label="Slide 2">
<img src="./images/image-product-2-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="2" aria-label="Slide 3">
<img src="./images/image-product-3-thumbnail.jpg" class="img-fluid" />
</button>
<button id="imgdes" type="button" data-mdb-target="#carouselSneakers" data-mdb-slide-to="3" aria-label="Slide 4">
<img src="./images/image-product-4-thumbnail.jpg" class="img-fluid" />
</button>
</div>
</div>
</div>
</div>
<!--Modal carousel-->
<div id="myModal" class="modal-carousel">
<div id=closeModal><img id=closeCarousel src="./images/icon-close.svg"/></div>
</div>
This is my css
/* CART EMPTY */
.cart-Empty{
display:none;
border-radius:30px;
width: 50%;
height:60vh;
width: fit-content;
margin-top: 80px;
z-index: 999;
}
.cart-Title{
border-bottom: solid hsl(0, 0%, 75%);
margin-left:10px;
margin-right: 10px;
width: 200px;
}
.cart-Cont{
color:hsl(0, 0%, 75%);
text-align: center;
padding-top: 25%;
padding-bottom: 25%;
width :200px;
}
/* CART FULL*/
.cartFull{
display: none;
position:absolute;
z-index: 9999;
}
.cartContent{
display: flex;
flex-direction: row;
position:absolute;
margin-top: 20px;
}
#imgCart{
height: 80px;
margin-left: 20px;
border-radius: 10%;
}
.numbers{
display:flex;
flex-direction: row;
}
.cart-item{
display: flex;
flex-direction: column;
margin-left: 20px;
color:hwb(0 75% 25%);
align-items:baseline;
align-content: center;
justify-items: flex-start;
}
.cart-total{
color:black;
width: fit-content;
}
.delete{
margin-left: 40px;
border: none;
background-color: white;
}
#checkout{
margin:20px;
background-color:hsl(26, 100%, 55%);
border-radius: 15px;
border: none;
height: 70px;
color:white;
width:100%;
}
/* CAROUSEL */
.carouselSneakers{
height: 80vh;
border: solid 1px;
width: 30px;
background-color: white;
border-radius: 50px;
padding:8px;
}
.carousel-inner{
position: inherit;
}
.carousel-indicators{
display:none;
}
.controls{
background-color: white;
border-radius: 50px;
padding:8px;
}
And this is my JS code, I know is pure javascript
IS very basic but I’m just starting and learning by myself
cartIcon.addEventListener("click", cartIconClicked)
function cartIconClicked(event){
const buttonClicked = event.target;
cartIconNumber.innerText == 0 ?
cartEmpty.classList.toggle("cart-Empty"): cartFull.classList.toggle("cartFull");
quantityFromStorage = localStorage.getItem('quantity');
prizeFromStorage = localStorage.getItem('prize');
totalPrize.innerText = prizeFromStorage;
squantity.innerText= "X" + quantityFromStorage;
sprize.innerText ="$" + sneakers.prize + ".00";
cartFull
.querySelector('.delete')
.addEventListener('click', removeShoppingItem);
function removeShoppingItem(event){
const buttonDelete = event.target;
cartIconNumber.innerText > 0 ?
cartFull.classList.toggle("cartFull") : null;
cartIconNumber.innerHTML = 0;
cartIconNumber.style.display="none";
}
}
Can someone tell me how can I put the cart on top of the carousel?? thank you!!!