├── css
    └── style.css
├── js
    └── app.js
└── index.html


/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   overflow-x: hidden;
 3 |   font-family: "Montserrat", sans-serif;
 4 | }
 5 | .search-field {
 6 |   border: none;
 7 |   border-radius: 50px;
 8 |   padding: 5px;
 9 |   outline: none;
10 | }
11 | .search-field:hover {
12 |   outline: none;
13 |   border: none;
14 | }
15 | .search-box {
16 |   border: 1px solid rgb(3, 118, 211);
17 |   width: 281px;
18 |   border-radius: 5px;
19 |   margin: auto;
20 |   margin-top: 50px;
21 |   border-right: none;
22 | }
23 | .search-button {
24 |   padding: 10px 50px;
25 |   border-radius: 25px;
26 |   margin-left: 20px;
27 | }
28 | #all-products {
29 |   display: grid;
30 |   grid-template-columns: repeat(3, 1fr);
31 |   /* border: 1px solid black; */
32 |   text-align: center;
33 |   width: 100%;
34 |   margin: auto;
35 |   align-items: center;
36 |   justify-content: center;
37 | }
38 | .single-product {
39 |   padding: 10px;
40 |   transition: 0.6s;
41 | }
42 | .single-product:hover {
43 |   box-shadow: 4px 4px 7px gray;
44 |   border-radius: 10px;
45 |   border: 1px solid cyan;
46 | }
47 | .product-image {
48 |   width: 150px;
49 |   height: 150px;
50 | }
51 | .cart {
52 |   width: 350px;
53 |   /* border: 1px solid green; */
54 |   padding: 10px;
55 |   box-shadow: 10px 10px 20px gray;
56 |   border-radius: 5px;
57 |   margin-right: 30px;
58 |   position: fixed;
59 | }
60 | .cart-main {
61 |   padding-right: 30px;
62 | }
63 | .circle {
64 |   width: 28px;
65 |   height: 28px;
66 |   display: flex;
67 |   justify-content: center;
68 |   align-items: center;
69 |   border-radius: 50%;
70 |   background-color: green;
71 | }
72 | 
73 | @media only screen and (max-width: 768px) {
74 |   #all-products {
75 |     display: grid;
76 |     grid-template-columns: repeat(1, 1fr);
77 |   }
78 |   .cart {
79 |     width: 300px;
80 |     /* border: 1px solid green; */
81 |     padding: 10px;
82 |     box-shadow: 10px 10px 20px gray;
83 |     border-radius: 5px;
84 |     margin-right: 30px;
85 |     position: fixed;
86 |   }
87 |   .cart-main {
88 |     padding-right: 10px;
89 |   }
90 | }
91 | @media only screen and (max-width: 468px) {
92 |   #all-products {
93 |     display: grid;
94 |     grid-template-columns: repeat(1, 1fr);
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
  1 | const arr = [];
  2 | 
  3 | const loadProducts = (url) => {
  4 |    fetch(url)
  5 |       .then((res) => res.json())
  6 |       .then((data) => {
  7 |          arr.push(data);
  8 |          showProducts(data);
  9 |       });
 10 | };
 11 | 
 12 | loadProducts('https://fakestoreapi.com/products');
 13 | 
 14 | // show all product in UI
 15 | const showProducts = (products) => {
 16 |    
 17 |    setInnerText('total_products', products.length);
 18 | 
 19 |    document.getElementById("all-products").innerHTML = "";
 20 | 
 21 |    const allProducts = products.slice(0, 10).map((pd) => pd);
 22 |    for (const product of allProducts) {
 23 |       const image = product.images;
 24 |       const div = document.createElement('div');
 25 |       div.classList.add('product');
 26 |       div.innerHTML = `<div class="single-product">
 27 |       <div>
 28 |     <img class="product-image" src=${image}></img>
 29 |       </div>
 30 |       <h3>${product.title}</h3>
 31 |       <p>Category: ${product.category}</p>
 32 |       <h2>Price: $ ${product.price}</h2>
 33 | 
 34 |       <button onclick="showProductDetails(${product.id})" id="details-btn"    data-bs-toggle="modal"
 35 |       data-bs-target="#exampleModal" class="btn btn-outline-secondary mb-2 rounded-1 mt-1">Details</button>
 36 |       
 37 |       <button onclick="addToCart(${product.id},${product.price})" id="addToCart-btn" class="buy-now btn btn-success border-0 w-100 rounded-0 bg-main py-2">Add to cart</button>
 38 |       `;
 39 |       document.getElementById('all-products').appendChild(div);
 40 |    }
 41 | };
 42 | 
 43 | let count = 0;
 44 | 
 45 | const addToCart = (id, price) => {
 46 |    count = count + 1;
 47 |    updatePrice('price', value);
 48 | 
 49 |    updateTaxAndCharge();
 50 |    document.getElementById('total-Products').innerText = count;
 51 | };
 52 | 
 53 | const showProductDetails = (product_id) => {
 54 |    console.log(product_id);
 55 |    fetch(`https://fakestoreapi.com/products/${product_id}`)
 56 |       .then((res) => res.json())
 57 |       .then((data) => showProductDetailsInModal(data));
 58 | };
 59 | 
 60 | const showProductDetailsInModal = (product_details) => {
 61 |    console.log(product_details);
 62 |    setInnerText('exampleModalLabel', product_details.title);
 63 |    setInnerText('product_id', product_details.id);
 64 |    setInnerText('modal_body', product_details.description);
 65 |    setInnerText('rating', product_details.rating.rate);
 66 | };
 67 | 
 68 | const getInputValue = (id) => {
 69 |    const element = document.getElementById(id).innerText;
 70 |    const converted = parseInt(element);
 71 |    return converted;
 72 | };
 73 | 
 74 | // main price update function
 75 | const updatePrice = (id, value) => {
 76 |    const convertedOldPrice = getInputValue(id);
 77 |    const convertPrice = parseInt(value);
 78 |    const total = convertedOldPrice + convertPrice;
 79 |    document.getElementById(id).innerText = Math.round(total);
 80 | };
 81 | 
 82 | // set innerText function
 83 | const setInnerText = (id, value) => {
 84 |    document.getElementById(id).innerText = Math.round(value);
 85 | };
 86 | 
 87 | // update delivery charge and total Tax
 88 | const updateTaxAndCharge = () => {
 89 |    const priceConverted = getInputValue('price');
 90 |    if (priceConverted > 200) {
 91 |       setInnerText('delivery-charge', 30);
 92 |       setInnerText('total-tax', priceConverted * 0.2);
 93 |    }
 94 |    if (priceConverted > 400) {
 95 |       setInnerText('delivery-charge', 50);
 96 |       setInnerText('total-tax', priceConverted * 0.3);
 97 |    }
 98 |    if (priceConverted > 500) {
 99 |       setInnerText('delivery-charge', 60);
100 |       setInnerText('total-tax', priceConverted * 0.4);
101 |    }
102 | };
103 | 
104 | //grandTotal update function
105 | const updateTotal = () => {
106 |    const grandTotal =
107 |       getInputValue('price') +
108 |       getInputValue('delivery-charge') +
109 |       getInputValue('total-tax');
110 |    document.getElementById('total').innerText = grandTotal;
111 | };
112 | 
113 | // search by category
114 | document.getElementById("search-btn").addEventListener("click", function () {
115 |    const inputField = document.getElementById("input-value").value;
116 |    const searchedProduct = arr[0].find((p) =>
117 |      p.category.startsWith(`${inputField}`)
118 |    );
119 |    showProducts(searchedProduct);
120 |  });
121 | 
122 | 
123 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |    <head>
  4 |       <meta charset="UTF-8" />
  5 |       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |       <title>FakeStore</title>
  8 |       <link rel="stylesheet" href="./css/style.css" />
  9 |       <!-- Latest compiled and minified CSS -->
 10 |       <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
 11 |     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> -->
 12 | 
 13 |       <!-- CSS only -->
 14 |       <link
 15 |          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
 16 |          rel="stylesheet"
 17 |          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
 18 |          crossorigin="anonymous"
 19 |       />
 20 | 
 21 |       <link
 22 |          rel="stylesheet"
 23 |          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
 24 |       />
 25 | 
 26 |       <!-- google Montserrat  font  -->
 27 |       <link rel="preconnect" href="https://fonts.googleapis.com" />
 28 |       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 29 |       <link
 30 |          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap"
 31 |          rel="stylesheet"
 32 |       />
 33 |    </head>
 34 | 
 35 |    <body>
 36 |       <header>
 37 |          <div class="row my-5 justify-content-center">
 38 |             <div class="col-md-5">
 39 |                <div class="input-group mb-3">
 40 |                   <!-- need to add the input-group class to make it look ok -->
 41 |                   <input
 42 |                      type="text"
 43 |                      class="form-control"
 44 |                      placeholder="Search products"
 45 |                      aria-label="Search Products"
 46 |                      aria-describedby="basic-addon2"
 47 |                      id="input-value"
 48 |                   />
 49 |                   <button
 50 |                      class="input-group-text px-4 bg-success"
 51 |                      id="search-btn"
 52 |                   >
 53 |                      <i class="bi bi-search text-white fw-bold"></i>
 54 |                   </button>
 55 |                </div>
 56 |             </div>
 57 |          </div>
 58 |       </header>
 59 |       <main in class="main">
 60 |          <div class="my-5">
 61 |             <h2 class="text-center">
 62 |                Total Products:
 63 |                <span class="text-success" id="total_products"></span>
 64 |             </h2>
 65 |          </div>
 66 |          <div class="row">
 67 |             <div class="col-md-9 col-lg-9 col-sm-7">
 68 |                <div id="all-products" class="">
 69 |                   <h1></h1>
 70 |                </div>
 71 |             </div>
 72 | 
 73 |             <div class="col-md-3 col-lg-3 col-sm-5 cart-main">
 74 |                <div class="cart" id="my-cart">
 75 |                   <table class="table">
 76 |                      <thead>
 77 |                         <h1
 78 |                            class="text-center text-white bg-success py-1 rounded"
 79 |                         >
 80 |                            My-Cart <i class="bi bi-cart4"></i>
 81 |                         </h1>
 82 |                         <tr>
 83 |                            <th scope="col"></th>
 84 |                            <th scope="col"></th>
 85 |                            <th scope="col"></th>
 86 |                            <th scope="col"></th>
 87 |                         </tr>
 88 |                      </thead>
 89 |                      <tbody>
 90 |                         <tr>
 91 |                            <th>Total Added-Products:</th>
 92 |                            <!-- here will be no dollar sign -->
 93 |                            <td>$<span id="total-Products">0</span></td>
 94 |                            <td></td>
 95 |                            <td></td>
 96 |                         </tr>
 97 |                         <tr>
 98 |                            <th>Price:</th>
 99 |                            <td>$ <span id="price">0</span></td>
100 |                            <td></td>
101 |                            <td></td>
102 |                         </tr>
103 |                         <tr>
104 |                            <th>Delivery-Charge:</th>
105 |                            <td>$ <span id="delivery-charge">20</span></td>
106 |                            <td></td>
107 |                            <td></td>
108 |                         </tr>
109 |                         <tr>
110 |                            <th>Total-Tax:</th>
111 |                            <td>$ <span id="total-tax">0</span></td>
112 |                            <td></td>
113 |                            <td></td>
114 |                         </tr>
115 |                         <tr>
116 |                            <th scope="row">Total</th>
117 |                            <td colspan="2">$ <span id="total">0</span></td>
118 |                            <td></td>
119 |                         </tr>
120 |                      </tbody>
121 |                   </table>
122 |                   <div class="parces text-center">
123 |                      <button class="btn btn-success text-center">
124 |                         Buy Now
125 |                      </button>
126 |                   </div>
127 |                </div>
128 |             </div>
129 |          </div>
130 |       </main>
131 |       <footer></footer>
132 |       <!-- modal section -->
133 | 
134 |       <!-- Modal -->
135 |       <div
136 |          class="modal fade"
137 |          id="exampleModal"
138 |          tabindex="-1"
139 |          aria-labelledby="exampleModalLabel"
140 |          aria-hidden="true"
141 |       >
142 |          <div class="modal-dialog">
143 |             <div class="modal-content">
144 |                <div class="modal-header">
145 |                   <h5 class="modal-title text-success" id="exampleModalLabel">
146 |                      Modal title
147 |                   </h5>
148 |                   <button
149 |                      type="button"
150 |                      class="btn-close"
151 |                      data-bs-dismiss="modal"
152 |                      aria-label="Close"
153 |                   ></button>
154 |                </div>
155 |                <div class="ms-3 my-3">
156 |                   <strong> Product id: <span id="productId"></span> </strong>
157 |                </div>
158 | 
159 |                <div class="modal-body text-secondary" id="modal_body"></div>
160 |                <div class="p-4 d-flex">
161 |                   <strong class="me-2">Rating</strong>
162 |                   <span
163 |                      id="rating"
164 |                      class="text-white p-2 circle"
165 |                   ></span>
166 |                </div>
167 |                <div class="modal-footer">
168 |                   <button
169 |                      type="button"
170 |                      class="btn btn-secondary"
171 |                      data-bs-dismiss="modal"
172 |                   >
173 |                      Close
174 |                   </button>
175 |                </div>
176 |             </div>
177 |          </div>
178 |       </div>
179 | 
180 |       <!-- Bootstrap javascript  file  -->
181 |       <script
182 |          src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
183 |          integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
184 |          crossorigin="anonymous"
185 |       ></script>
186 |       <!-- Custom javascript file -->
187 |       <script src="./js/app.js"></script>
188 |    </body>
189 | </html>
190 | 


--------------------------------------------------------------------------------