S

Scripts/Checkout/orderSummary.js

@@ -0,0 +1,163 @@
+import {cart, removeFromCart, updateDeliveryOption} from '../../data/cart.js';
+import {products, getProduct} from '../../data/products.js';
+import { formatCurrency } from '../utils/money.js';
+import { deliveryOptions, getDeliveryOption } from '../../data/deliveryOptions.js';
+import dayjs from 'https://unpkg.com/[email protected]/esm/index.js';
+import { renderPaymentSummary } from './paymentSummary.js';
+
+
+let cartSummaryHTML='';
+
+
+export function renderOrderSummary(){
+
+
+  cart.forEach((item)=>{
+
+      const productId=item.productId;
+
+      const matchingProduct=getProduct(productId);
+
+
+
+
+    const deliveryOptionId=item.deliveryOptionId;
+
+  const deliveryOption=getDeliveryOption(deliveryOptionId);
+
+    const today=dayjs();
+    const deliveryDate=today.add(
+      deliveryOptions.deliveryDays,
+      'days'
+    );
+
+  const dateStringf=deliveryDate.format(
+    'dddd,MMMM D'
+  );
+
+      cartSummaryHTML=cartSummaryHTML+`
+      <div class="cart-item-container js-cart-item-container-${matchingProduct.id}">
+              <div class="delivery-date">
+                Delivery date: ${dateStringf}
+              </div>
+
+              <div class="cart-item-details-grid">
+                <img class="product-image"b 
+                  src="${matchingProduct.image}">
+
+                <div class="cart-item-details">
+                  <div class="product-name">
+                    ${matchingProduct.name}
+                  </div>
+                  <div class="product-price">
+                    $${formatCurrency(matchingProduct.priceCents)}
+                  </div>
+                  <div class="product-quantity">
+                    <span>
+                      Quantity: <span class="quantity-label">${item.quantity}</span>
+                    </span>
+                    <span class="update-quantity-link link-primary">
+                      Update
+                    </span>
+                    <span class="delete-quantity-link link-primary js-delete-link" 
+                      data-product-id="${matchingProduct.id}">
+                      Delete
+                    </span>
+                  </div>
+                </div>
+
+                <div class="delivery-options">
+                  <div class="delivery-options-title">
+                    Choose a delivery option:
+                  </div>
+
+                  ${deliveryOptionsHTML(matchingProduct, item)}
+                </div>
+              </div>
+            </div>
+      `;
+  });
+
+  function deliveryOptionsHTML(matchingProduct, item){
+
+    let html='';
+
+    deliveryOptions.forEach((deliveryOption)=>{
+      const today=dayjs();
+      const deliveryDate=today.add(
+        deliveryOption.deliveryDays,
+        'days'
+      );
+
+      const dateString=deliveryDate.format(
+        'dddd,MMMM D'
+      );
+
+      const priceString=deliveryOption.priceCents
+      ===0
+      ? 'FREE '
+      : `$${formatCurrency(deliveryOption.priceCents)}-`;
+
+      const isChecked=deliveryOption.id===item.deliveryOptionId
+
+
+        html+= `<div class="delivery-option js-delivery-option"
+                    data-product-id="${matchingProduct.id}"
+                    data-delivery-option-id="${deliveryOption.id}">
+              <input type="radio" 
+                ${isChecked ? 'checked': ' '}
+                class="delivery-option-input"
+                name="delivery-option-${matchingProduct.id}">
+              <div>
+                <div class="delivery-option-date">
+                  ${dateString}
+                </div>
+                <div class="delivery-option-price">
+                  ${priceString} Shipping
+                </div>
+              </div>
+            </div>`
+
+    });
+
+    return html;
+
+  }
+
+
+  document.querySelector('.js-order-summary')
+    .innerHTML=cartSummaryHTML;
+
+
+
+  document.querySelectorAll('.js-delete-link')
+    .forEach((link)=>{
+      link.addEventListener('click',()=>{
+        const productId=link.dataset.productId;
+        removeFromCart(productId);
+
+
+        const container=document.querySelector(
+          `.js-cart-item-container-${productId}`);
+
+          container.remove();
+
+          renderPaymentSummary();
+
+      });
+
+    });
+
+    document.querySelectorAll('.js-delivery-option')
+      .forEach((element)=>{
+        element.addEventListener('click',()=>{
+          const {productId,deliveryOptionId}=element.dataset;
+          updateDeliveryOption(productId,deliveryOptionId);
+
+          renderPaymentSummary();
+        });
+      });
+
+}
+
+

Scripts/Checkout/paymentSummary.js

@@ -0,0 +1,67 @@
+import {cart} from '../../data/cart.js'
+import { getProduct } from '../../data/products.js';
+import { getDeliveryOption } from '../../data/deliveryOptions.js';
+import {formatCurrency} from '../utils/money.js'
+
+
+export function renderPaymentSummary(){
+    let productPriceCents = 0;
+    let shippingPriceCents =0;
+
+    cart.forEach((item)=>{
+        const product= getProduct(item.productId);
+        productPriceCents+=product.priceCents * item.quantity;
+
+        const deliveryOption=getDeliveryOption(item.deliveryOptionId);
+        shippingPriceCents+=deliveryOption.priceCents;
+
+    });
+
+    const totalBeforeTax =productPriceCents+shippingPriceCents;
+    const taxCents =totalBeforeTax*0.1;
+    const totalCents=totalBeforeTax+taxCents;
+
+    const paymentSummaryHTML =`
+
+            <div class="payment-summary-title">
+                Order Summary
+            </div>
+
+            <div class="payment-summary-row">
+                <div>Items (3):</div>
+                <div class="payment-summary-money">
+                $${formatCurrency(productPriceCents)}
+                </div>
+            </div>
+
+            <div class="payment-summary-row">
+                <div>Shipping &amp; handling:</div>
+                <div class="payment-summary-money">$${formatCurrency(shippingPriceCents)}</div>
+            </div>
+
+            <div class="payment-summary-row subtotal-row">
+                <div>Total before tax:</div>
+                <div class="payment-summary-money">
+                $${formatCurrency(totalBeforeTax)}
+                </div>
+            </div>
+
+            <div class="payment-summary-row">
+                <div>Estimated tax (10%):</div>
+                <div class="payment-summary-money">$${formatCurrency(taxCents)}</div>
+            </div>
+
+            <div class="payment-summary-row total-row">
+                <div>Order total:</div>
+                <div class="payment-summary-money">$${formatCurrency(totalCents)}</div>
+            </div>
+
+            <button class="place-order-button button-primary">
+                Place your order
+            </button>
+
+
+    `;
+    document.querySelector('.js-payment-summary')
+        .innerHTML=paymentSummaryHTML;
+}

Scripts/amazon.js

@@ -0,0 +1,106 @@
+import {cart, addToCart} from '../data/cart.js';
+import {products} from '../data/products.js';
+import { formatCurrency } from './utils/money.js';
+
+
+
+
+
+let productsHTML='';
+
+products.forEach((product)=>{
+    productsHTML+=`
+        <div class="product-container">
+            <div class="product-image-container">
+                <img class="product-image"
+                src="${product.image}">
+            </div>
+
+            <div class="product-name limit-text-to-2-lines">
+                ${product.name}
+            </div>
+
+            <div class="product-rating-container">
+                <img class="product-rating-stars"
+                src="images/ratings/rating-${product.rating.stars*10}.png">
+                <div class="product-rating-count link-primary">
+                ${product.rating.count}
+                </div>
+            </div> 
+
+            <div class="product-price">
+                $${formatCurrency(product.priceCents)}
+            </div>
+
+            <div class="product-quantity-container">
+                <select>
+                <option selected value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+                <option value="4">4</option>
+                <option value="5">5</option>
+                <option value="6">6</option>
+                <option value="7">7</option>
+                <option value="8">8</option>
+                <option value="9">9</option>
+                <option value="10">10</option>
+                </select>
+            </div>
+
+            <div class="product-spacer"></div>
+
+            <div class="added-to-cart">
+                <img src="images/icons/checkmark.png">
+                Added
+            </div>
+
+            <button class="add-to-cart-button button-primary js-add-cart"
+              data-product-id="${product.id}">
+                Add to Cart
+            </button>
+            </div>`
+
+});
+
+
+
+document.querySelector('.js-products-grid').
+innerHTML=productsHTML;
+
+
+
+function updateCartQuantity(){
+
+  let cartQuantity=0;
+
+
+      cart.forEach((item)=>{
+        cartQuantity+=item.quantity
+      })
+
+      document.querySelector('.cart-quantity').innerHTML=cartQuantity;
+
+}
+
+
+document.querySelectorAll('.js-add-cart')
+  .forEach((button)=>{
+    button.addEventListener('click',()=>{
+      const productId=button.dataset.
+      productId;
+      addToCart(productId);
+      updateCartQuantity();
+
+
+
+
+
+
+      console.log(cartQuantity)
+      console.log(cart);
+
+    });
+
+
+  });
+

Scripts/checkout.js

@@ -0,0 +1,6 @@
+import { renderOrderSummary } from "./Checkout/orderSummary.js";
+import { renderPaymentSummary} from "./Checkout/paymentSummary.js";
+
+
+renderOrderSummary();
+renderPaymentSummary();

Scripts/utils/money.js

@@ -0,0 +1,5 @@
+export function formatCurrency(priceCents){
+    return (Math.round(priceCents) /100).toFixed(2);
+}
+
+export default formatCurrency;