amazon-clone/amazon.html at main · Prince-ES/amazon-clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
  <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 js-cart-quantity">0</div>
          <div class="cart-text">Cart</div>
        </a>
      </div>
    </div>

    <div class="main">
      <div class="products-grid js-products-grid">


      </div>
    </div>
  <!-- <script src = "data/cart.js"></script> -->
    <!--******************* IMP: CHECK COMMENTs *******************-->
    <!--<script src="data/products.js" ></script>this folder contents will also be available to the other files that are linked to this HTML file. for example the Product variable is being accessed by the js file below(src="../scripts/amazon.js") you can assume that this attached file's code is written here instead of linking and same for the below linked file.And yes the Order matters for example replacing both the files (this and below one) will not work because the lower linked file searches for the variable which is not declared and initialized yet. Although hoisting provides the declaration of variable but still without initializing if we access content it'll give error. -->
    <script type="module" src="../scripts/amazon.js"></script><!--the module thing allows us to avoid naming conflicts. for example we were accessing a variable named "cart" which were inside cart.js folder which we were accessing using script. but this allows us to easily create variable which are already created and gives error in  console. to avoid this we import the variable from the module in three steps: first add the html attribute "type= "module"" to the file which are importing that variable. then export the variable from that file using "export const cart = []" and import in the file u want using "import {cart} from 'path'(path in single quotes)" two more things to know about modules: put all the imports on the top of the file, and in order to use module we need to use live server. module also allows to not worry about the order of files -->
  </body>
</html>