build the animated cart using js , html , css ?

[apcode language=”html”]

<div class="cart-container">
  <div class="cart">
    <span class="item-count">0</span>
    <i class="fas fa-shopping-cart"></i>
  </div>
  <div class="cart-dropdown">
    <ul class="cart-items"></ul>
    <a href="#" class="checkout-btn">Checkout</a>
  </div>
</div>

[/apcode]

[apcode language=”css”]

.cart-container {
  position: relative;
}
 .cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 1.5rem;
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
 .cart:hover {
  background-color: #000;
  color: #fff;
}
 .cart-dropdown {
  position: absolute;
  bottom: 70px;
  right: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform: translateY(10px);
}
 .cart-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
 .cart-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
 .cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
 .cart-item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin-right: 10px;
}
 .checkout-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  text-decoration: none;
}
 .checkout-btn:hover {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

[/apcode]

[apcode language=”jscript”]

const cart = document.querySelector(".cart");
const cartDropdown = document.querySelector(".cart-dropdown");
const itemCount = document.querySelector(".item-count");
const cartItems = document.querySelector(".cart-items");
 let items = [];
 cart.addEventListener("click", () => {
  cartDropdown.classList.toggle("show");
});
 function addToCart(item) {
  let cartItem = items.find((itemObj) => itemObj.id === item.id);
  if (cartItem) {
    cartItem.quantity += 1;
  } else {
    items.push({ ...item, quantity: 1 });
  }
  updateCart();
}
 function updateCart() {
  let totalItems = 0;
  cartItems.innerHTML = "";
  items.forEach((item) => {
    totalItems += item.quantity;
    let cartItem = document.createElement("li");
    cartItem.classList.add("cart-item");
    cartItem.innerHTML = `
      <img src="${item.image}" alt="${item.name}" />
      <span>${   ${item.name}</span>
  <span>${item.quantity} x $${item.price}</span>
`;
cartItems.appendChild(cartItem);
});
itemCount.innerText = totalItems;
}
 const products = [
{
id: 1,
name: "Product 1",
price: 10.99,
image: "https://via.placeholder.com/50x50",
},
{
id: 2,
name: "Product 2",
price: 15.99,
image: "https://via.placeholder.com/50x50",
},
{
id: 3,
name: "Product 3",
price: 20.99,
image: "https://via.placeholder.com/50x50",
},
];
 products.forEach((product) => {
let productCard = document.createElement("div");
productCard.classList.add("product-card");
productCard.innerHTML = <img src="${product.image}" alt="${product.name}" /> <h3>${product.name}</h3> <span>$${product.price}</span> <button class="add-to-cart-btn">Add to Cart</button> ;
let addToCartBtn = productCard.querySelector(".add-to-cart-btn");
addToCartBtn.addEventListener("click", () => {
addToCart(product);
});
document.body.appendChild(productCard);
});

[/apcode]