Day 46: async await

edyoda · Dec 2, 2022 · f729aea · f729aea
1 parent eec9399
commit f729aea
Show file tree

Hide file tree

Showing 5 changed files with 318 additions and 1 deletion.
diff --git a/javascript/Day45/script.js b/javascript/Day45/script.js
@@ -126,7 +126,7 @@ function addRowsIntoTable(){
         </tr>
     `; //html format string
 
-    const tr = $(newRow); // convert string into DOM element
+    const tr = $(newRow); // convert string into DOM element object
 
     table.append(tr);
     })

diff --git a/javascript/Day46/index.html b/javascript/Day46/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Shoplane</title>
+
+    <link href="./style.css" rel="stylesheet" />
+    <script
+    src="https://code.jquery.com/jquery-3.6.1.js"
+    integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
+    crossorigin="anonymous"
+  ></script>
+  </head>
+  <body>
+    <h1>Welcome to Shoplane</h1>
+    <section id="clothing" class="container">
+      <p>Clothing for Men and Women</p>
+      <div class="products-list"></div>
+    </section>
+    <section id="accesories" class="container">
+      <p>Accessories for Men and Women</p>
+      <div class="products-list"></div>
+    </section>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/javascript/Day46/product.html b/javascript/Day46/product.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css" />
+    <script
+      src="https://code.jquery.com/jquery-3.6.1.js"
+      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
+      crossorigin="anonymous"
+    ></script>
+    <title>Shoplane | Product</title>
+</head>
+<body>
+    <h1>Product</h1>
+    <div id="product-container" class="show">
+        <img  src="" class="product-preview"/>
+        <p class="product-title"></p>
+        <p class="product-description"></p>
+        <p class="product-brand"></p>
+        <p class="product-price"></p>
+        <div class="product-gallery">
+
+        </div>
+    </div>
+    <div id="product-not-found" class="hide">
+        <h2>Product not found</h2>
+        <a href="./index.html"> Go to Home Page</a>
+    </div>
+    <button id="add-to-cart-btn" class="hide">
+        Add to cart
+    </button>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/javascript/Day46/script.js b/javascript/Day46/script.js
@@ -0,0 +1,190 @@
+const BASE_URL = `https://5d76bf96515d1a0014085cf9.mockapi.io`;
+
+// .com
+// .org
+// .in
+// .ac
+// .io
+// .dev
+
+function generateCard(item) {
+  let { pathname } = location;
+  pathname = pathname.replace("index.html", "product.html");
+
+  return `
+  <a href="${pathname}?id=${item.id}" class="card" data-id=${item.id}>
+    <article>
+      <img
+      src=${item.preview}
+      />
+      <p class="title">${item.name}</p>
+      <p class="brand">${item.brand}</p>
+      <p class="price">Rs ${item.price}</p>
+    </article>
+  </a>
+          `;
+}
+
+function createCard(item) {
+  const card = generateCard(item);
+  return $(card);
+}
+
+function createList(array, id) {
+  const listContainer = $(`#${id} > .products-list`);
+  for (let i = 0; i < array.length; i++) {
+    const card = createCard(array[i]);
+    listContainer.append(card);
+  }
+}
+
+function getJqueryCall() {
+  $.get(`${BASE_URL}/product`, (res) => {
+    if (res.status === 200) {
+      return res;
+    }
+  }).fail((err) => {
+    console.log(err.responseJSON);
+    if (err.status === 400) {
+      console.log("Bad Request");
+    } else if (err.status === 401) {
+      console.log("You are not authorised user");
+    } else if (err.status === 404) {
+      console.log("Wrong API");
+    } else {
+      console.log("Something went wrong, Try again later!");
+    }
+  });
+}
+
+function getJqueryAjaxCall() {
+  $.ajax({
+    type: "GET",
+    url: `${BASE_URL}/product`,
+    success: function (res) {
+      if (res.status === 200) {
+        return res;
+      }
+    },
+    error: function (err) {
+      console.log(err.responseJSON);
+      if (err.status === 400) {
+        console.log("Bad Request");
+      } else if (err.status === 401) {
+        console.log("You are not authorised user");
+      } else if (err.status === 404) {
+        console.log("Wrong API");
+      } else {
+        console.log("Something went wrong, Try again later!");
+      }
+    },
+  });
+}
+
+function postJqueryAjax() {
+  const requestObj = {
+    title: "foo",
+    body: "bar",
+    userId: 1,
+  };
+
+  $.ajax({
+    type: "POST",
+    url: "https://jsonplaceholder.typicode.com/posts",
+    data: requestObj,
+    success: function (res) {
+      console.log(res);
+    },
+    error: function (err) {
+      console.log(err);
+    },
+  });
+}
+
+async function getProductList() {
+  try {
+    const response = await $.get(`${BASE_URL}/product`);
+    return response;
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+async function initProducts() {
+  try {
+    const productList = await $.get(`${BASE_URL}/product`);
+
+    //make an api call to get productList;
+
+    const clothings = productList.filter((item) => !item.isAccessory);
+    const accessories = productList.filter((item) => item.isAccessory);
+
+    createList(clothings, "clothing");
+    createList(accessories, "accesories");
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+async function getProductData() {
+  const params = new URLSearchParams(location.search);
+  const productId = params.get("id");
+  try {
+    const productDetails = await $.get(`${BASE_URL}/product/${productId}`);
+
+    const productContainer = document.getElementById("product-container");
+    const notFoundContainer = document.getElementById("product-not-found");
+    const atcBtn = document.getElementById("add-to-cart-btn");
+
+    if (productDetails) {
+      //fill detials in page
+
+      const {
+        name,
+        photos,
+        preview,
+        price: productPrice,
+        brand: productBrand,
+        description: desc,
+      } = productDetails;
+
+      //chage the webapage title
+      document.title = name;
+
+      notFoundContainer.classList.replace("show", "hide");
+      productContainer.classList.replace("hide", "show");
+      atcBtn.classList.replace("hide", "show");
+
+      const image = productContainer.querySelector(".product-preview");
+      const title = productContainer.querySelector(".product-title");
+      const description = productContainer.querySelector(
+        ".product-description"
+      );
+      const brand = productContainer.querySelector(".product-brand");
+      const price = productContainer.querySelector(".product-price");
+
+      const mainImage = photos.length ? photos[0] : preview;
+
+      image.setAttribute("src", mainImage);
+      title.innerHTML = name;
+      description.innerHTML = desc;
+      brand.innerHTML = productBrand;
+      price.innerHTML = productPrice;
+    } else {
+      // show product not found
+      notFoundContainer.classList.replace("hide", "show");
+      atcBtn.classList.replace("show", "hide");
+      productContainer.classList.replace("show", "hide");
+    }
+  } catch (e) {}
+}
+
+$(document).ready(() => {
+  const { pathname } = location;
+
+  if (pathname.includes("index.html")) {
+    initProducts();
+  } else if (pathname.includes("product.html")) {
+    getProductData();
+  }
+});
diff --git a/javascript/Day46/style.css b/javascript/Day46/style.css
@@ -0,0 +1,63 @@
+.container {
+    margin: 20px;
+  }
+  .products-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .card {
+    width: 17%;
+    cursor: pointer;
+    min-width: 120px;
+    text-decoration: none;
+    color: black;
+  }
+
+  .card:hover {
+    box-shadow: 2px 4px 4px #ccc;
+  }
+  .card img {
+    width: 100%;
+    height: 200px;
+  }
+  .card .title {
+    font-size: 14px;
+    margin-top: 4px;
+    margin-bottom: 0px;
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+
+  .card .brand {
+    font-size: 10px;
+    color: gray;
+    margin-top: 4px;
+    margin-bottom: 0px;
+    margin-left: 4px;
+    margin-right: 4px;
+  }
+  .card .price {
+    font-size: 12px;
+    color: green;
+    margin: 4px;
+  }
+
+  .hide{
+      display: none;
+  }
+  .show{
+      display: block;
+  }
+ .product-preview{
+     height: 320px;
+     width: 240px;
+ }
+  @media (max-width: 496px) {
+    .card {
+      width: 45%;
+    }
+  }
+
+