Skip to content
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

Amazon clone project #6

Open
wants to merge 25 commits into
base: main
Choose a base branch
from
Open

Amazon clone project #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
9b22c71
add the starting files
vikrant-vikrant Jun 15, 2024
2788da5
generate HTML with js
vikrant-vikrant Jun 16, 2024
8d63474
use prodicts.js file
vikrant-vikrant Jun 16, 2024
cb2c5b8
Make add to card button interactive
vikrant-vikrant Jun 16, 2024
8233f32
Make the cart quantity interactive
vikrant-vikrant Jun 16, 2024
175e425
removing extra space
vikrant-vikrant Jun 16, 2024
c8f9841
Making cart more interactive
vikrant-vikrant Jun 17, 2024
79015c1
added Message
vikrant-vikrant Jun 17, 2024
9f0cdaa
final touchup
vikrant-vikrant Jun 17, 2024
3df101f
Use modules
vikrant-vikrant Jun 17, 2024
c1414fa
Move addToCart & updateCartQuantity
vikrant-vikrant Jun 17, 2024
7ec0f99
Final touch-Up
vikrant-vikrant Jun 18, 2024
1a7286d
Generate HTML for the order summary
vikrant-vikrant Jun 18, 2024
1ae5aca
Fix price formatting and radio selectors
vikrant-vikrant Jun 18, 2024
d4a6bf4
Delete products from cart when clicking delete
vikrant-vikrant Jun 19, 2024
5d5e104
Delete products from HTML when clicking delete
vikrant-vikrant Jun 19, 2024
51d3233
Save cart to localStorage
vikrant-vikrant Jun 19, 2024
b94e41c
Make cart more interactive
vikrant-vikrant Jun 19, 2024
7488f9e
improve some code
vikrant-vikrant Jun 21, 2024
92b762f
Make cart 0 when it's empty
vikrant-vikrant Jun 22, 2024
a5ac2d2
Make all things Interactive
vikrant-vikrant Jun 23, 2024
9a10806
Save data and generate HTML for delivery options
vikrant-vikrant Jun 25, 2024
62e0f74
Save data and generate HTML for delivery options
vikrant-vikrant Jun 25, 2024
8ec7412
updated
vikrant-vikrant Sep 8, 2024
1b690c2
improve
vikrant-vikrant Sep 15, 2024
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
157 changes: 6 additions & 151 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</title>

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

<div class="amazon-header-middle-section">
<input class="search-bar" type="text" placeholder="Search">

<button class="search-button">
<img class="search-icon" src="images/icons/search-icon.png">
</button>
</div>

<div class="amazon-header-right-section">
<a class="orders-link header-link" href="orders.html">
<span class="returns-text">Returns</span>
<span class="returns-text">Returns history</span>
<span class="orders-text">& Orders</span>
</a>

<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"></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="script/amazon.js"></script>

</body>
</html>
157 changes: 4 additions & 153 deletions checkout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
</div>

<div class="checkout-header-middle-section">
Checkout (<a class="return-to-home-link"
href="amazon.html">3 items</a>)
Checkout (<a class="return-to-home-link js-return-to-home-link"
href="amazon.html"></a>)
</div>

<div class="checkout-header-right-section">
Expand All @@ -43,157 +43,7 @@
<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="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="order-summary js-order-summary">

<div class="payment-summary">
<div class="payment-summary-title">
Expand Down Expand Up @@ -231,5 +81,6 @@
</div>
</div>
</div>
<script type="module" src="script\checkout.js"></script>
</body>
</html>
Loading