diff --git a/2-copy-of-code/lesson-18/orders.html b/2-copy-of-code/lesson-18/orders.html index 3256795..34c039e 100755 --- a/2-copy-of-code/lesson-18/orders.html +++ b/2-copy-of-code/lesson-18/orders.html @@ -54,137 +54,10 @@
Your Orders
-
-
- -
-
-
-
Order Placed:
-
August 12
-
-
-
Total:
-
$35.06
-
-
- -
-
Order ID:
-
27cba69d-4c3d-4098-b42d-ac7fa62b7664
-
-
- -
-
- -
- -
-
- Black and Gray Athletic Cotton Socks - 6 Pairs -
-
- Arriving on: August 15 -
-
- Quantity: 1 -
- -
- -
- - - -
- -
- -
- -
-
- Adults Plain Cotton T-Shirt - 2 Pack -
-
- Arriving on: August 19 -
-
- Quantity: 2 -
- -
- -
- - - -
-
-
- -
- -
-
-
-
Order Placed:
-
June 10
-
-
-
Total:
-
$41.90
-
-
- -
-
Order ID:
-
b6b6c212-d30e-4d4a-805d-90b52ce6b37d
-
-
- -
-
- -
- -
-
- Intermediate Size Basketball -
-
- Arriving on: June 17 -
-
- Quantity: 2 -
- -
- -
- - - -
-
-
+
+ + diff --git a/2-copy-of-code/lesson-18/scripts/orders.js b/2-copy-of-code/lesson-18/scripts/orders.js new file mode 100644 index 0000000..af92c5a --- /dev/null +++ b/2-copy-of-code/lesson-18/scripts/orders.js @@ -0,0 +1,86 @@ +import {getProduct, loadProductsFetch} from '../data/products.js'; +import {orders} from '../data/orders.js'; +import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js'; +import formatCurrency from './utils/money.js'; + +async function loadPage() { + await loadProductsFetch(); + + let ordersHTML = ''; + + orders.forEach((order) => { + const orderTimeString = dayjs(order.orderTime).format('MMMM D'); + + ordersHTML += ` +
+
+
+
+
Order Placed:
+
${orderTimeString}
+
+
+
Total:
+
$${formatCurrency(order.totalCostCents)}
+
+
+ +
+
Order ID:
+
${order.id}
+
+
+ +
+ ${productsListHTML(order)} +
+
+ `; + }); + + function productsListHTML(order) { + let productsListHTML = ''; + + order.products.forEach((productDetails) => { + const product = getProduct(productDetails.productId); + + productsListHTML += ` +
+ +
+ +
+
+ ${product.name} +
+
+ Arriving on: ${ + dayjs(productDetails.estimatedDeliveryTime).format('MMMM D') + } +
+
+ Quantity: ${productDetails.quantity} +
+ +
+ +
+ + + +
+ `; + }); + + return productsListHTML; + } + + document.querySelector('.js-orders-grid').innerHTML = ordersHTML; +} + +loadPage();