Skip to content

update amazon.html #11

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
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

update amazon.html #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
14ca74a
update amazon.html
Apr 6, 2025
49883c2
Generate html with js
Apr 6, 2025
ab6c6e5
add amazon.js
Apr 6, 2025
241a4ff
use products.js for input data
Apr 7, 2025
8657c60
"Add to cart" function enabled
Apr 7, 2025
f7995a2
"Cart quantity" feature enabled
Apr 7, 2025
ceb7aef
Using Module instead of <script> to load .js file
Apr 7, 2025
cbddaad
refactor code
Apr 7, 2025
609cd77
Generate html via js for cart summary
Apr 7, 2025
c81c44c
Fix price formating and radio selectors
Apr 7, 2025
70ea680
enable delivery options
Apr 10, 2025
53cb938
add function to delete item from cart
Apr 10, 2025
e632db5
save cart in localStorage
Apr 10, 2025
b8fd007
Enable realtime deliveryOptions
Apr 10, 2025
744b7bd
Enable choose delivery option
Apr 11, 2025
206f9a1
add renderOrderSummary()
Apr 11, 2025
7dbb603
refactor
Apr 11, 2025
0e9cdf6
Save data and generate HTML for payment summary
Apr 11, 2025
3aeae27
Mode-view-ontrol for payment summary
Apr 11, 2025
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
155 changes: 6 additions & 149 deletions amazon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Amazon Project</title>
<title>Amazon Project-yuxin</title>

<!-- This code is needed for responsive design to work.
(Responsive design = make the website look good on
Expand Down Expand Up @@ -45,161 +45,18 @@

<a class="cart-link header-link" href="checkout.html">
<img class="cart-icon" src="images/icons/cart-icon.png">
<div class="cart-quantity">3</div>
<div class="cart-quantity js-cart-quantity">0</div>
<div class="cart-text">Cart</div>
</a>
</div>
</div>

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

<div class="product-name limit-text-to-2-lines">
Black and Gray Athletic Cotton Socks - 6 Pairs
</div>

<div class="product-rating-container">
<img class="product-rating-stars"
src="images/ratings/rating-45.png">
<div class="product-rating-count link-primary">
87
</div>
</div>

<div class="product-price">
$10.90
</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">
Add to Cart
</button>
</div>

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

<div class="product-name limit-text-to-2-lines">
Intermediate Size Basketball
</div>

<div class="product-rating-container">
<img class="product-rating-stars"
src="images/ratings/rating-40.png">
<div class="product-rating-count link-primary">
127
</div>
</div>

<div class="product-price">
$20.95
</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">
Add to Cart
</button>
</div>

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

<div class="product-name limit-text-to-2-lines">
Adults Plain Cotton T-Shirt - 2 Pack
</div>

<div class="product-rating-container">
<img class="product-rating-stars"
src="images/ratings/rating-45.png">
<div class="product-rating-count link-primary">
56
</div>
</div>

<div class="product-price">
$7.99
</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">
Add to Cart
</button>
</div>
<div class="products-grid js-products-grid">
</div>
</div>

<script type="module" src="scripts/amazon.js"></script>

</body>
</html>
185 changes: 3 additions & 182 deletions checkout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,193 +43,14 @@
<div class="page-title">Review your order</div>

<div class="checkout-grid">
<div class="order-summary">
<div class="cart-item-container">
<div class="delivery-date">
Delivery date: Tuesday, June 21
</div>
<div class="order-summary js-order-summary">

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

<div class="cart-item-details">
<div class="product-name">
Black and Gray Athletic Cotton Socks - 6 Pairs
</div>
<div class="product-price">
$10.90
</div>
<div class="product-quantity">
<span>
Quantity: <span class="quantity-label">2</span>
</span>
<span class="update-quantity-link link-primary">
Update
</span>
<span class="delete-quantity-link link-primary">
Delete
</span>
</div>
</div>

<div class="delivery-options">
<div class="delivery-options-title">
Choose a delivery option:
</div>
<div class="delivery-option">
<input type="radio" checked
class="delivery-option-input"
name="delivery-option-1">
<div>
<div class="delivery-option-date">
Tuesday, June 21
</div>
<div class="delivery-option-price">
FREE Shipping
</div>
</div>
</div>
<div class="delivery-option">
<input type="radio"
class="delivery-option-input"
name="delivery-option-1">
<div>
<div class="delivery-option-date">
Wednesday, June 15
</div>
<div class="delivery-option-price">
$4.99 - Shipping
</div>
</div>
</div>
<div class="delivery-option">
<input type="radio"
class="delivery-option-input"
name="delivery-option-1">
<div>
<div class="delivery-option-date">
Monday, June 13
</div>
<div class="delivery-option-price">
$9.99 - Shipping
</div>
</div>
</div>
</div>
</div>
</div>

<div class="cart-item-container">
<div class="delivery-date">
Delivery date: Wednesday, June 15
</div>

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

<div class="cart-item-details">
<div class="product-name">
Intermediate Size Basketball
</div>
<div class="product-price">
$20.95
</div>
<div class="product-quantity">
<span>
Quantity: <span class="quantity-label">1</span>
</span>
<span class="update-quantity-link link-primary">
Update
</span>
<span class="delete-quantity-link link-primary">
Delete
</span>
</div>
</div>

<div class="delivery-options">
<div class="delivery-options-title">
Choose a delivery option:
</div>

<div class="delivery-option">
<input type="radio" class="delivery-option-input"
name="delivery-option-2">
<div>
<div class="delivery-option-date">
Tuesday, June 21
</div>
<div class="delivery-option-price">
FREE Shipping
</div>
</div>
</div>
<div class="delivery-option">
<input type="radio" checked class="delivery-option-input"
name="delivery-option-2">
<div>
<div class="delivery-option-date">
Wednesday, June 15
</div>
<div class="delivery-option-price">
$4.99 - Shipping
</div>
</div>
</div>
<div class="delivery-option">
<input type="radio" class="delivery-option-input"
name="delivery-option-2">
<div>
<div class="delivery-option-date">
Monday, June 13
</div>
<div class="delivery-option-price">
$9.99 - Shipping
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="payment-summary">
<div class="payment-summary-title">
Order Summary
</div>

<div class="payment-summary-row">
<div>Items (3):</div>
<div class="payment-summary-money">$42.75</div>
</div>

<div class="payment-summary-row">
<div>Shipping &amp; handling:</div>
<div class="payment-summary-money">$4.99</div>
</div>

<div class="payment-summary-row subtotal-row">
<div>Total before tax:</div>
<div class="payment-summary-money">$47.74</div>
</div>

<div class="payment-summary-row">
<div>Estimated tax (10%):</div>
<div class="payment-summary-money">$4.77</div>
</div>

<div class="payment-summary-row total-row">
<div>Order total:</div>
<div class="payment-summary-money">$52.51</div>
</div>

<button class="place-order-button button-primary">
Place your order
</button>
<div class="payment-summary js-payment-summary">
</div>
</div>
</div>
<script type="module" src="scripts/checkout.js"></script>
</body>
</html>
Loading