SuperSimpleDev · Asharib706 · Apr 2, 2024 · Apr 2, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+It is the amazon project made by the help of SuperSimpleDev tutorial on <b>Javascript Full Course</b>
diff --git a/amazon.html b/amazon.html
@@ -1,205 +1,63 @@
 <!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="product-container">
-          <div class="product-image-container">
-            <img class="product-image"
-              src="images/products/intermediate-composite-basketball.jpg">
-          </div>
+    <div class="amazon-header-middle-section">
+      <input class="search-bar" type="text" placeholder="Search">
 
-          <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>
+      <button class="search-button">
+        <img class="search-icon" src="images/icons/search-icon.png">
+      </button>
+    </div>
 
-          <div class="product-price">
-            $7.99
-          </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 js-cart-quantity"></div>
+        <div class="cart-text">Cart</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-products-grid">
 
-          <div class="product-spacer"></div>
+    </div>
+  </div>
 
-          <div class="added-to-cart">
-            <img src="images/icons/checkmark.png">
-            Added
-          </div>
+  <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>
diff --git a/backend-practice.js b/backend-practice.js
@@ -0,0 +1,6 @@
+const xhr =new XMLHttpRequest();
+xhr.addEventListener('load',()=>{
+  console.log(xhr.response);
+});
+xhr.open('GET','https://supersimplebackend.dev');
+xhr.send();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		It is the amazon project made by the help of SuperSimpleDev tutorial on <b>Javascript Full Course</b>