Skip to content

I have tried to replicate the website with some added features. Still the order part is not dynamic. Working on it. #9

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 23 commits into
base: main
Choose a base branch
from
Open

I have tried to replicate the website with some added features. Still the order part is not dynamic. Working on it. #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
526d77b
added dynamic html and added product.js
sakib078 May 25, 2024
edac8fd
database change, added cart feature to add items, quantity increase b…
sakib078 May 26, 2024
09748fc
added class messege to added-to-cart & made the cart-quentity dynamic…
sakib078 May 27, 2024
518b649
created module for cart and product.js using import and export.
sakib078 May 27, 2024
793439e
generated the html for checkout page.
sakib078 May 27, 2024
d206654
implemented the remove(delete) feature for the checkout page and cre…
sakib078 May 28, 2024
309f26f
saved the cart locally to display the added items in the checkout page.
sakib078 May 28, 2024
130a856
added update cart(link) property to change the quantity of the select…
sakib078 May 28, 2024
ee41024
added a real time delivery and the time calculation from the day item…
sakib078 May 29, 2024
18e9bdd
re-generated the code for dynamically changes of the checkout page.
sakib078 May 29, 2024
de32c68
created the order summary mechanism to calculate the final cost using…
sakib078 May 29, 2024
678a2b3
organized the code , also fixed some minor bugs(updating the cart qua…
sakib078 May 30, 2024
3264842
added jasmin testing system and removed the default testcases.
sakib078 May 30, 2024
fc13f41
tested addTocart, Fromatcurrancy, still left with ordersummary and be…
sakib078 May 31, 2024
3a58e6e
created the OOP version of the cart.
sakib078 Jun 2, 2024
2dabf82
converted the cart.js stuff into class for generating objects.
sakib078 Jun 2, 2024
5595470
refactor: Convert localStorageKey to private member in Cart class
sakib078 Jun 2, 2024
5f456c2
replaced product into classes.
sakib078 Jun 2, 2024
d4e5bd4
use of inheritane and polymorphism.
sakib078 Jun 2, 2024
977175a
implemented the fetch and HTTPS method to get the data from simon's b…
sakib078 Jun 3, 2024
6f014c0
implemented error handling code for checkout.js abd products.js
sakib078 Jun 5, 2024
82ba7f8
create order using the beckend.
sakib078 Jun 5, 2024
a88ff01
generated the HTML for the order.html. and made the page interactive.
sakib078 Jun 5, 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
11 changes: 11 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"livePreview.defaultPreviewPath": "/checkout.html",
"workbench.editor.openSideBySideDirection": "right",
"screencastMode.keyboardOptions": {
"showCommandGroups": true
},
"workbench.editor.enablePreview": false,
"files.autoSave": "onFocusChange",
"editor.experimentalInlineEdit.enabled": false,
"workbench.editor.enablePreviewFromQuickOpen": false
}
19 changes: 19 additions & 0 deletions Sakib-amazon-project.code-workspace
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"folders": [
{
"name": "Sakib-amazon-project",
"path": "."
}
],
"settings": {
"livePreview.defaultPreviewPath": "/amazon.html",
"workbench.editor.openSideBySideDirection": "right",
"screencastMode.keyboardOptions": {
"showCommandGroups": true
},
"workbench.editor.enablePreview": false,
"files.autoSave": "onFocusChange",
"editor.experimentalInlineEdit.enabled": false,
"workbench.editor.enablePreviewFromQuickOpen": false
}
}
249 changes: 59 additions & 190 deletions amazon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,205 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<title>Amazon Project</title>

<!-- This code is needed for responsive design to work.
<head>
<title>Amazon Project</title>

<!-- This code is needed for responsive design to work.
(Responsive design = make the website look good on
smaller screen sizes like a phone or a tablet). -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Load a font called Roboto from Google Fonts. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

<!-- Here are the CSS files for this page. -->
<link rel="stylesheet" href="styles/shared/general.css">
<link rel="stylesheet" href="styles/shared/amazon-header.css">
<link rel="stylesheet" href="styles/pages/amazon.css">
</head>
<body>
<div class="amazon-header">
<div class="amazon-header-left-section">
<a href="amazon.html" class="header-link">
<img class="amazon-logo"
src="images/amazon-logo-white.png">
<img class="amazon-mobile-logo"
src="images/amazon-mobile-logo-white.png">
</a>
</div>

<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="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-text">Cart</div>
</a>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Load a font called Roboto from Google Fonts. -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

<!-- Here are the CSS files for this page. -->
<link rel="stylesheet" href="styles/shared/general.css">
<link rel="stylesheet" href="styles/shared/amazon-header.css">
<link rel="stylesheet" href="styles/pages/amazon.css">
</head>

<body>
<div class="amazon-header">
<div class="amazon-header-left-section">
<a href="amazon.html" class="header-link">
<img class="amazon-logo" src="images/amazon-logo-white.png">
<img class="amazon-mobile-logo" src="images/amazon-mobile-logo-white.png">
</a>
</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="amazon-header-middle-section">
<input class="search-bar" type="text" placeholder="Search">

<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>
<button class="search-button">
<img class="search-icon" src="images/icons/search-icon.png">
</button>
</div>

<div class="product-name limit-text-to-2-lines">
Adults Plain Cotton T-Shirt - 2 Pack
</div>
<div class="amazon-header-right-section">
<a class="orders-link header-link" href="orders.html">
<span class="returns-text">Returns</span>
<span class="orders-text">& Orders</span>
</a>

<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>
<a class="cart-link header-link" href="checkout.html">
<img class="cart-icon" src="images/icons/cart-icon.png">
<div class="cart-quantity js-cart-quality">0</div>
<div class="cart-text">Cart</div>

<div class="product-price">
$7.99
</div>
</a>
</div>
</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="main">
<div class="products-grid js-product-grid">

<div class="product-spacer"></div>
</div>
</div>

<!-- <div class="footer">
<div class="footer-links">
<a href="about.html" class="footer-link">About</a>
<a href="contact.html" class="footer-link">Contact</a>
<a href="privacy.html" class="footer-link">Privacy</a>
<a href="terms.html" class="footer-link">Terms</a>
</div>
</div> -->

<div class="added-to-cart">
<img src="images/icons/checkmark.png">
Added
</div>
<!-- Here are the JavaScript files for this page. -->
<script type="module" src="scripts/amazon.js"> </script>
</body>

<button class="add-to-cart-button button-primary">
Add to Cart
</button>
</div>
</div>
</div>
</body>
</html>
</html>
Loading