diff --git a/Scripts/Checkout/orderSummary.js b/Scripts/Checkout/orderSummary.js new file mode 100644 index 00000000..45cb1d1c --- /dev/null +++ b/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/dayjs@1.11.10/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+` +
+
+ Delivery date: ${dateStringf} +
+ +
+ + +
+
+ ${matchingProduct.name} +
+
+ $${formatCurrency(matchingProduct.priceCents)} +
+
+ + Quantity: ${item.quantity} + + + Update + + + Delete + +
+
+ +
+
+ Choose a delivery option: +
+ + ${deliveryOptionsHTML(matchingProduct, item)} +
+
+
+ `; + }); + + 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+= `
+ +
+
+ ${dateString} +
+
+ ${priceString} Shipping +
+
+
` + + }); + + 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(); + }); + }); + +} + + diff --git a/Scripts/Checkout/paymentSummary.js b/Scripts/Checkout/paymentSummary.js new file mode 100644 index 00000000..1b07ba18 --- /dev/null +++ b/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 =` + +
+ Order Summary +
+ +
+
Items (3):
+
+ $${formatCurrency(productPriceCents)} +
+
+ +
+
Shipping & handling:
+
$${formatCurrency(shippingPriceCents)}
+
+ +
+
Total before tax:
+
+ $${formatCurrency(totalBeforeTax)} +
+
+ +
+
Estimated tax (10%):
+
$${formatCurrency(taxCents)}
+
+ +
+
Order total:
+
$${formatCurrency(totalCents)}
+
+ + + + + `; + document.querySelector('.js-payment-summary') + .innerHTML=paymentSummaryHTML; +} \ No newline at end of file diff --git a/Scripts/amazon.js b/Scripts/amazon.js new file mode 100644 index 00000000..cd9c2b9f --- /dev/null +++ b/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+=` +
+
+ +
+ +
+ ${product.name} +
+ +
+ +
+ ${product.rating.count} +
+
+ +
+ $${formatCurrency(product.priceCents)} +
+ +
+ +
+ +
+ +
+ + Added +
+ + +
` + +}); + + + +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); + + }); + + + }); + diff --git a/Scripts/checkout.js b/Scripts/checkout.js new file mode 100644 index 00000000..3e6485c0 --- /dev/null +++ b/Scripts/checkout.js @@ -0,0 +1,6 @@ +import { renderOrderSummary } from "./Checkout/orderSummary.js"; +import { renderPaymentSummary} from "./Checkout/paymentSummary.js"; + + +renderOrderSummary(); +renderPaymentSummary(); \ No newline at end of file diff --git a/Scripts/utils/money.js b/Scripts/utils/money.js new file mode 100644 index 00000000..26efed37 --- /dev/null +++ b/Scripts/utils/money.js @@ -0,0 +1,5 @@ +export function formatCurrency(priceCents){ + return (Math.round(priceCents) /100).toFixed(2); +} + +export default formatCurrency; \ No newline at end of file diff --git a/amazon.html b/amazon.html index d9f431b6..492707ce 100644 --- a/amazon.html +++ b/amazon.html @@ -45,161 +45,18 @@ -
3
+
Cart
-
-
-
- -
- -
- Black and Gray Athletic Cotton Socks - 6 Pairs -
- -
- -
- 87 -
-
- -
- $10.90 -
- -
- -
- -
- -
- - Added -
- - -
- -
-
- -
- -
- Intermediate Size Basketball -
- -
- -
- 127 -
-
- -
- $20.95 -
- -
- -
- -
- -
- - Added -
- - -
- -
-
- -
- -
- Adults Plain Cotton T-Shirt - 2 Pack -
- -
- -
- 56 -
-
- -
- $7.99 -
- -
- -
- -
- -
- - Added -
- - -
+
+
+ + diff --git a/checkout.html b/checkout.html index da3f2497..a1ec9a23 100644 --- a/checkout.html +++ b/checkout.html @@ -43,193 +43,18 @@
Review your order
-
-
-
- Delivery date: Tuesday, June 21 -
- -
- - -
-
- Black and Gray Athletic Cotton Socks - 6 Pairs -
-
- $10.90 -
-
- - Quantity: 2 - - - Update - - - Delete - -
-
- -
-
- Choose a delivery option: -
-
- -
-
- Tuesday, June 21 -
-
- FREE Shipping -
-
-
-
- -
-
- Wednesday, June 15 -
-
- $4.99 - Shipping -
-
-
-
- -
-
- Monday, June 13 -
-
- $9.99 - Shipping -
-
-
-
-
-
- -
-
- Delivery date: Wednesday, June 15 -
- -
- - -
-
- Intermediate Size Basketball -
-
- $20.95 -
-
- - Quantity: 1 - - - Update - - - Delete - -
-
- -
-
- Choose a delivery option: -
- -
- -
-
- Tuesday, June 21 -
-
- FREE Shipping -
-
-
-
- -
-
- Wednesday, June 15 -
-
- $4.99 - Shipping -
-
-
-
- -
-
- Monday, June 13 -
-
- $9.99 - Shipping -
-
-
-
-
-
+
+
-
-
- Order Summary -
- -
-
Items (3):
-
$42.75
-
- -
-
Shipping & handling:
-
$4.99
-
- -
-
Total before tax:
-
$47.74
-
- -
-
Estimated tax (10%):
-
$4.77
-
- -
-
Order total:
-
$52.51
-
- - +
+ +
+ + + b \ No newline at end of file diff --git a/data/cart.js b/data/cart.js new file mode 100644 index 00000000..60c149f7 --- /dev/null +++ b/data/cart.js @@ -0,0 +1,70 @@ +export let cart= JSON.parse(localStorage.getItem('cart')); + +if(!cart) { + cart = [{ + productId:'04701903-bc79-49c6-bc11-1af7e3651358', + quantity:4, + deliveryOptionId:'1' + },{ + productId:'58b4fc92-e98c-42aa-8c55-b6b79996769a', + quantity:1, + deliveryOptionId:'2' + }]; +} + + + +function saveToStorage(){ + localStorage.setItem('cart',JSON.stringify(cart)); +} + + +export function addToCart(productId){ + let matchingItem; + + cart.forEach((item)=>{ + if(productId===item.productId){ + matchingItem=item; + } + }); + + if(matchingItem){ + matchingItem.quantity+=1 + }else{ + cart.push({ + productId:productId, + quantity:1, + deliveryoptionId:'2', + }); + + + } + saveToStorage(); + } + +export function removeFromCart(productId){ +const newCart=[]; + + cart.forEach((item)=>{ + if(item.productId !== productId){ + newCart.push(item); + } + }); + cart = newCart; + saveToStorage(); + } + +export function updateDeliveryOption(productId,deliveryOptionId){ + let matchingItem; + + cart.forEach((item)=>{ + if(productId===item.productId){ + matchingItem=item; + } + }); + + matchingItem.deliveryOptionId=deliveryOptionId; + saveToStorage(); + + } + \ No newline at end of file diff --git a/data/deliveryOptions.js b/data/deliveryOptions.js new file mode 100644 index 00000000..29fcc73b --- /dev/null +++ b/data/deliveryOptions.js @@ -0,0 +1,26 @@ +export const deliveryOptions=[{ + id:'1', + deliveryDays:7, + priceCents:0, + +},{ + id:'2', + deliveryDays:3, + priceCents:499 +},{ + id:'3', + deliveryDays:1, + priceCents:999 +}]; + +export function getDeliveryOption(deliveryOptionId){ + let deliveryOption; + + deliveryOptions.forEach((option)=>{ + if(option.id === deliveryOptionId){ + deliveryOption = option; + } + }); + + return deliveryOption || deliveryOptions[0]; +} \ No newline at end of file diff --git a/data/products.js b/data/products.js index 61a7fdf7..2c08bad2 100644 --- a/data/products.js +++ b/data/products.js @@ -1,4 +1,19 @@ -const products = [ +export function getProduct(productId){ + let matchingProduct; + + products.forEach((product)=>{ + + if(product.id===productId){ + matchingProduct=product; + } + + }); + + return matchingProduct; +} + + +export const products = [ { id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6", image: "images/products/athletic-cotton-socks-6-pairs.jpg", diff --git a/tests/moneyTest.js b/tests/moneyTest.js new file mode 100644 index 00000000..6a881b2e --- /dev/null +++ b/tests/moneyTest.js @@ -0,0 +1,29 @@ +import {formatCurrency} from '../Scripts/utils/money.js'; + + + +console.log('Test suite:FormatCurrency'); + +console.log('convert cents into dollars'); + +if (formatCurrency(2095)==='20.95'){ + console.log('passed'); +} else { + console.log('failed'); +} + +console.log('works with 0') + +if(formatCurrency(0)=='0.00'){ss + console.log('passed'); +} else { + console.log('failed') +} + +console.log('rounds upto nearest cent') + +if(formatCurrency(2000.5)==='20.01'){ + console.log('passed'); +}else{ + console.log('failed') +} \ No newline at end of file diff --git a/tests/tests.html b/tests/tests.html new file mode 100644 index 00000000..d7e2d06b --- /dev/null +++ b/tests/tests.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file