Untitled

class ShoppingCart extends HTMLElement {
    constructor() {
      super();
  
      // Create a shadow DOM
      this.attachShadow({ mode: 'open' });
  
      // Set up the initial structure of the component
      this.shadowRoot.innerHTML = `
          <style>
            .items-box {
                  width: 300px;
                  height: 350px;
                  display:flex;
                  flex-direction: column;
                  
            }
            ul{
              list-style-type: none;
              margin: 15px;
              padding:0;
              
            }
            ul li {
              margin-bottom: 10px;
          }
  
            header {
              display: flex;
              align-items: center;
              justify-content:center;
            }

            h1 {
                font-size: 20px;
                font-weight; bold;
                margin-bottom: 15px;
              }
    
              p {
                font-size 18px;
                margin-bottom 15px;
              }
    
              ul button {
                position: absolute;
                right: 0;
                margin-right: 15px;
                margin-top:0px;
                background-color: red;
                color: white;
                padding: 3px 5px;
                border: none;
                border-radius: 2px;
                cursor: pointer;
                font-size: 12px;
                opacity:50%;
                
              }

              footer {
                margin-top: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                
              }
              
              .pay-button {
                background-color: red;
                color: white;
                padding: 10px 20px;
                border: none;
                cursor: pointer;
                font-size: 16px;
                opacity:50%;
                margin-top: auto;
                margin-bottom: 20px;
                
              }

              .payment{
                position: absolute;
                background-color:white;
                top:50px;
                left:2px;
                width: 99%;
                height: 80%;
                text-align: center;
              }
             
              .payment p {
                font-weight: bold;
                margin-top: 50px
              }
    
              img{
                width: 100px;
                height: 100px;
              }
              
              .hidden{
                display: none;
              }
            </style>
            <div class="items-box">
              <header>
                <h1>Shopping Cart</h1>
              </header>
              <ul id="cart-list"></ul>
              <footer>
                <p>Total: <span id="total-price">0.00</span> kr</p>
                <button class="pay-button">Pay Here</button>
              </footer>
            </div>
            <div class="payment hidden">
               <p>Payment Successful</p>   
               <img src="images/check.png" alt="Background image"> 
            </div>
            
          `;
      }
    
      connectedCallback() {
        // When the component is connected to the DOM, update the cart
        this.updateCart();
        // Event listener for removing an item from the cart
        this.addEventListener('removeItem', (event) => {
          this.removeItemFromCart(event.detail.itemId);
        });
        this.addEventListener("makePayment", (event) => {
            this.makePayment(event);
          }
          )
      
        }
      
        updateCart() {
          let shoppingCart = JSON.parse(localStorage.getItem('shoppingCart')) || [];
          const cartList = this.shadowRoot.getElementById('cart-list');
          const totalPriceElement = this.shadowRoot.getElementById('total-price');
          const payButton = this.shadowRoot.querySelector(".pay-button");
          cartList.innerHTML = ''; // Clear the existing list

          let totalPrice = 0;
    shoppingCart.forEach(cartItem => {
      const li = document.createElement('li');

      // Display item name, quantity, and price
      li.textContent = `${cartItem.name} (Qty: ${cartItem.quantity}) - ${cartItem.quantity * cartItem.price} kr  `;

      // Add a remove button for each item
      const removeButton = document.createElement('button');
      removeButton.textContent = 'Remove';
      removeButton.addEventListener('click', () => {
        this.dispatchEvent(new CustomEvent('removeItem', { detail: { itemId: cartItem.id } }));
      });

      li.appendChild(removeButton);
      cartList.appendChild(li);

      // Update total price
      totalPrice += cartItem.quantity * cartItem.price;
    });

    // Display the total price
    totalPriceElement.textContent = totalPrice;

    payButton.addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('makePayment'));
    });

  }

  removeItemFromCart(itemId) {
    let shoppingCart = JSON.parse(localStorage.getItem('shoppingCart')) || [];
    const cartItemIndex = shoppingCart.findIndex(cartItem => cartItem.id === itemId);

    if (cartItemIndex !== -1) {
      const cartItem = shoppingCart[cartItemIndex];

      cartItem.quantity = Math.max(cartItem.quantity - 1, 0);

      if (cartItem.quantity === 0) {
        shoppingCart.splice(cartItemIndex, 1);
      }

      localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
      this.updateCart();
    }

  }

  //function for payment
  makePayment() {
    let shoppingCart = [];
    localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
    const payment = this.shadowRoot.querySelector(".payment");
    payment.classList.remove("hidden");

  }
}

// Define the custom element
customElements.define('shopping-cart', ShoppingCart);