Skip to content

18l Solution #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SuperSimpleDev wants to merge 1 commit into
base: 18l
Choose a base branch
from
+89 −130
Open

18l Solution #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 3 additions & 130 deletions 2-copy-of-code/lesson-18/orders.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,137 +54,10 @@
<div class="main">
<div class="page-title">Your Orders</div>

<div class="orders-grid">
<div class="order-container">

<div class="order-header">
<div class="order-header-left-section">
<div class="order-date">
<div class="order-header-label">Order Placed:</div>
<div>August 12</div>
</div>
<div class="order-total">
<div class="order-header-label">Total:</div>
<div>$35.06</div>
</div>
</div>

<div class="order-header-right-section">
<div class="order-header-label">Order ID:</div>
<div>27cba69d-4c3d-4098-b42d-ac7fa62b7664</div>
</div>
</div>

<div class="order-details-grid">
<div class="product-image-container">
<img src="images/products/athletic-cotton-socks-6-pairs.jpg">
</div>

<div class="product-details">
<div class="product-name">
Black and Gray Athletic Cotton Socks - 6 Pairs
</div>
<div class="product-delivery-date">
Arriving on: August 15
</div>
<div class="product-quantity">
Quantity: 1
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html?orderId=123&productId=456">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>

<div class="product-image-container">
<img src="images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg">
</div>

<div class="product-details">
<div class="product-name">
Adults Plain Cotton T-Shirt - 2 Pack
</div>
<div class="product-delivery-date">
Arriving on: August 19
</div>
<div class="product-quantity">
Quantity: 2
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>
</div>
</div>

<div class="order-container">

<div class="order-header">
<div class="order-header-left-section">
<div class="order-date">
<div class="order-header-label">Order Placed:</div>
<div>June 10</div>
</div>
<div class="order-total">
<div class="order-header-label">Total:</div>
<div>$41.90</div>
</div>
</div>

<div class="order-header-right-section">
<div class="order-header-label">Order ID:</div>
<div>b6b6c212-d30e-4d4a-805d-90b52ce6b37d</div>
</div>
</div>

<div class="order-details-grid">
<div class="product-image-container">
<img src="images/products/intermediate-composite-basketball.jpg">
</div>

<div class="product-details">
<div class="product-name">
Intermediate Size Basketball
</div>
<div class="product-delivery-date">
Arriving on: June 17
</div>
<div class="product-quantity">
Quantity: 2
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>
</div>
</div>
<div class="orders-grid js-orders-grid">
</div>
</div>

<script type="module" src="scripts/orders.js"></script>
</body>
</html>
86 changes: 86 additions & 0 deletions 2-copy-of-code/lesson-18/scripts/orders.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 += `
<div class="order-container">
<div class="order-header">
<div class="order-header-left-section">
<div class="order-date">
<div class="order-header-label">Order Placed:</div>
<div>${orderTimeString}</div>
</div>
<div class="order-total">
<div class="order-header-label">Total:</div>
<div>$${formatCurrency(order.totalCostCents)}</div>
</div>
</div>

<div class="order-header-right-section">
<div class="order-header-label">Order ID:</div>
<div>${order.id}</div>
</div>
</div>

<div class="order-details-grid">
${productsListHTML(order)}
</div>
</div>
`;
});

function productsListHTML(order) {
let productsListHTML = '';

order.products.forEach((productDetails) => {
const product = getProduct(productDetails.productId);

productsListHTML += `
<div class="product-image-container">
<img src="${product.image}">
</div>

<div class="product-details">
<div class="product-name">
${product.name}
</div>
<div class="product-delivery-date">
Arriving on: ${
dayjs(productDetails.estimatedDeliveryTime).format('MMMM D')
}
</div>
<div class="product-quantity">
Quantity: ${productDetails.quantity}
</div>
<button class="buy-again-button button-primary">
<img class="buy-again-icon" src="images/icons/buy-again.png">
<span class="buy-again-message">Buy it again</span>
</button>
</div>

<div class="product-actions">
<a href="tracking.html?orderId=${order.id}&productId=${product.id}">
<button class="track-package-button button-secondary">
Track package
</button>
</a>
</div>
`;
});

return productsListHTML;
}

document.querySelector('.js-orders-grid').innerHTML = ordersHTML;
}

loadPage();