Amazon-project/index.html at main · Favadh/Amazon-project · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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 products-grid-js">

      </div>
    </div>


    <script type = "module" src="/scripts/amazon.js"> </script>   <!-- this <script> tag is the entry point. -->
    <!-- type = "module" let the "amazon.js" file to get variables out of other files (which doesn't loaded with <script> tag).

      modules is a great way to organize our code.

      how to create a module:
      1)create a file
      2)don't load the file with <script> tag.

      how to get variable out of a file/module:
      1)add type = "module" attribute
      2)export
      3)import

      in here we assign the attribute type = "module" to "amazon.js" <script> tag so we can access variables from other files,
      and we export the variables from the file we want which here is "cart.js",
      then we import the variable "cart" from the file "cart.js" in the "amazon.js".


      pros:
      * it avoids naming conflicts.
      * don't have to worry about order of files, in script tag we should arrange the files in a order, but in modules you don't need an order.
      -->


  </body>
</html>