I’m new to html/css/js and i am trying to make a open and close cart for my pretend ecommerce website. The problem is when cart icon is onclick, it doesn’t open so I think it isn’t declared properly. I was following a tutorial on this until this part, I can’t figure out why.
Here’s the html:
<div class="header">
<div class="navbar">
<div class="logo">
<a href="/index.html"><h1>Homeflix</h1></a>
</div>
<nav>
<ul>
<li><a href="/shop.html">Shop</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Support</a></li>
<li><img src="/img/cart.png" width="20px" height="20px" id="cart-icon"></li>
</ul>
</nav>
<!--Cart-->
<div class="cart">
<h2 class="cart-title">Your Cart</h2>
<!--Cart Content-->
<div class="cart-content">
<div class="cart-box">
<img src="/img/smnwh.jpg" alt="" class="cart-img">
<div class="detail-box">
<div class="cart-product-title">Spider-man No Way Home</div>
<div class="cart-price">$75.00</div>
<input type="number" value="1" class="cart-quantity">
</div>
<!--Remove Cart-->
<i class="fa-solid fa-trash-can cart-remove"></i>
</div>
<!--Total-->
<div class="total">
<div class="total-title">Total</div>
<div class="total-price">$0</div>
</div>
<!--Buy Button-->
<button type="button" class="btn-buy">Buy Now</button>
<!--Cart Close-->
<i class="fa-solid fa-xmark" id="close-cart"></i>
</div>
</div>
</div>
Here’s my CSS:
.cart {
position:fixed;
top: 0;
right:-100%;
width:360px;
min-height: 100vh;
padding: 20px;
background: var(--bg-color);
box-shadow: -2px 0 4px hsl(0 4% 15% / 10%);
transition: 0.3s;
}
.cart:active {
right:0;
}
And here’s my JS:
let cartIcon = document.querySelector("#cart-icon");
let cart = document.querySelector(".cart");
let closeCart = document.querySelector("#close-cart");
cartIcon.onclick = () => {
console.log("pass");
cart.classList.add("active");
}
closeCart.onclick = () => {
console.log("close");
cart.classList.remove("active");
}