Day51: Tinder Application

edyoda · Dec 9, 2022 · ab825a3 · ab825a3
1 parent 53ddb49
commit ab825a3
Show file tree

Hide file tree

Showing 5 changed files with 519 additions and 0 deletions.
diff --git a/javascript/Day51/Tinder/ajax.js b/javascript/Day51/Tinder/ajax.js
@@ -0,0 +1,237 @@
+let currentUser = null;
+let pageNo = 1;
+let totalPages = 1;
+
+$(function () {
+  const page = location.pathname;
+  const isHome = page.includes("index");
+  const isProfile = page.includes("profile");
+  updateDomCounter();
+  if (isHome) {
+    $(".banner").slick({
+      infinite: true,
+      dots: true,
+      autoplay: true,
+      autoplaySpeed: 2000,
+    });
+
+    getUsers();
+    const addUserBtn = $("#add-user-btn");
+    addUserBtn.on({
+      click: createNewUser,
+    });
+
+    const loadMoreBtn = $("#load-more-btn");
+    loadMoreBtn.on({
+      click: loadMoreData,
+    });
+  }
+  if (isProfile) {
+    setCardDetails();
+    handleMatchButton();
+  }
+});
+
+const BASE_URL = "https://reqres.in/api";
+const END_POINTS = {
+  getUsers: "/users",
+  registerUSer: "/register",
+};
+function loadMoreData() {
+  getUsers(++pageNo);
+  if (pageNo === totalPages) {
+    $("#load-more-btn").hide();
+  }
+}
+function getUsers(pageNo = 1) {
+  $.get(
+    `${BASE_URL + END_POINTS.getUsers}?page=${pageNo}`,
+    function (data, status) {
+      // console.log(data, status);
+      creaList(data, status);
+    }
+  ).fail((e) => {
+    console.log(e);
+  });
+}
+
+function createCardTemplate(userDetails, index) {
+  const { avatar, email, first_name, id, last_name } = userDetails;
+  const pathName = location.pathname.replace("index", "profile");
+  return `
+    <a href="${pathName}?profile_id=${id}">
+    <div class="card" data-id=${id}>
+  <div class="card-img">
+    <img src=${avatar} />
+  </div>
+
+  <p><span>${first_name}</span><span>${last_name}</span></p>
+  <div class="card-footer">
+    <span>${email}</span>
+    <span
+      ><a href="mailto:${email}"><i class="fa-solid fa-envelope"></i></a
+    ></span>
+  </div>
+</div>
+</a>
+    `;
+}
+
+function createUserCard(userDetails) {
+  const cardTemplate = createCardTemplate(userDetails);
+
+  return $(cardTemplate);
+}
+
+function creaList(data, status) {
+  if (status === "success" && data.data) {
+    totalPages = data.total_pages;
+    const userList = data.data;
+
+    const jsonUser = JSON.stringify(userList);
+    localStorage.setItem("users", jsonUser);
+    const container = $("#user-list");
+    userList.forEach((item, index) => {
+      const card = createUserCard(item, index);
+
+      container.append(card);
+    });
+  }
+}
+
+const userDetails = {
+  username: "utkarsh_gupta_316",
+  email: "[email protected]",
+  password: "12313121",
+};
+
+function createNewUser(event) {
+  console.log(userDetails);
+  $.post(
+    `${BASE_URL + END_POINTS.registerUSer}`,
+    userDetails,
+    function (data, status) {
+      console.log(data, status);
+      console.log("User created succesfully");
+    }
+  ).fail((e) => {
+    console.log(e.responseJSON.error);
+  });
+}
+
+// apiCall('GET',url)
+// apiCall('POST',url,data)
+// apiCall('PUT',url,data)
+// apiCall('DELETE',url,data)
+
+function apiCall(type, url, data) {
+  $.ajax({
+    type: type,
+    url: url,
+
+    data: data,
+    success: function (response) {
+      console.log(response);
+    },
+    error: function (request, status, errorThrown) {
+      console.log(request, status, errorThrown);
+    },
+  });
+}
+
+function setCardDetails() {
+  const userId = getCurrentId();
+  // showLoader();
+  getUserDetails(userId)
+    .then((res) => {
+      setDomData(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+  // .finally(() => {
+  //   hideLoader();
+  // });
+
+  // const user = await asynAPICall(userId); // make current function async
+  // console.log(user);
+
+  // const allUsers = JSON.parse(localStorage.getItem("users"));
+  // const user = allUsers.find((i) => i.id === userId);
+}
+
+function getUserDetails(userID) {
+  return new Promise((resolve, reject) => {
+    $.get(
+      `${BASE_URL + END_POINTS.getUsers}/${userID}`,
+      function (data, status) {
+        if (data) {
+          resolve(data);
+        } else {
+          reject("Not getting data");
+        }
+      }
+    ).fail((e) => {
+      console.log(e);
+      reject(e);
+    });
+  });
+}
+function asynAPICall(userID) {
+  return $.get(`${BASE_URL + END_POINTS.getUsers}/${userID}`);
+}
+function setDomData(user) {
+  if (user) {
+    currentUser = user.data;
+    const card = $("#profile-container .card");
+    const userImge = card.find("img");
+    const userName = card.find("h1");
+    const email = card.find(".email");
+    const description = card.find(".description");
+
+    userImge.attr("src", user.data.avatar);
+    userName.html(`${user.data.first_name} ${user.data.last_name}`);
+    email.html(user.data.email);
+    description.html(user.support.text);
+  } else {
+    console.log("User is not valid");
+  }
+}
+
+function handleMatchButton() {
+  const btn = $("#match-user-btn");
+  let currentMatches = JSON.parse(localStorage.getItem("count")) || 0;
+  let allMatches = JSON.parse(localStorage.getItem("matches")) || [];
+  const userId = getCurrentId();
+
+  btn.on({
+    click: function (event) {
+      let isAlreadyMatched = allMatches.find((i) => i.id === userId);
+      if (isAlreadyMatched) {
+        // unmatch
+        // decrease the counter from the dom and local storage
+        // remove the user from allMatches and local storage
+      } else {
+        currentMatches++;
+        localStorage.setItem("count", currentMatches);
+        allMatches.push(currentUser);
+        localStorage.setItem("matches", JSON.stringify(allMatches));
+        updateDomCounter();
+        // change the text of btn to Unmatch
+      }
+    },
+  });
+}
+
+function updateDomCounter() {
+  let currentMatches = JSON.parse(localStorage.getItem("count")) || 0;
+
+  $(".matches-counter .count").html(currentMatches);
+}
+
+function getCurrentId() {
+  const searchQuery = location.search;
+  const searchObj = new URLSearchParams(searchQuery);
+  const userId = Number(searchObj.get("profile_id"));
+  return userId;
+}
diff --git a/javascript/Day51/Tinder/index.html b/javascript/Day51/Tinder/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Day51</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+  </head>
+  <body>
+    <header>
+      <h1>Welcome to Tinder</h1>
+
+      <div class="right-menu">
+        <button id="add-user-btn">
+          Add User <i class="fa-solid fa-user-plus"></i>
+        </button>
+        <a href="/matches">Matches</a>
+        <div class="matches-counter">
+          <span class="heart-icon color-pink"
+            ><i class="fa-solid fa-heart"></i
+          ></span>
+          <span class="count">0</span>
+        </div>
+      </div>
+    </header>
+
+    <section class="banner">
+      <img
+        src="http://wpuploads.appadvice.com/wp-content/uploads/2015/11/Tinder-banner.jpg"
+      />
+      <img
+        src="https://www.thedubs.com/wp-content/uploads/2018/10/are_tinder_and_bumble_the_answer_to_millennial_marketing_banner.jpg"
+      />
+      <img src="https://images.indianexpress.com/2021/06/Tinder.jpg" />
+      <img
+        src="https://modsapkdl.com/wp-content/uploads/2022/06/Tinder-Banner.jpg"
+      />
+    </section>
+
+    <section id="user-list" class="container"></section>
+    <div class="btn-container">
+      <button id="load-more-btn">Load more</button>
+    </div>
+
+    <script
+      src="https://code.jquery.com/jquery-3.6.0.min.js"
+      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+      crossorigin="anonymous"
+    ></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
+    <script src="./ajax.js"></script>
+  </body>
+</html>
diff --git a/javascript/Day51/Tinder/profile.html b/javascript/Day51/Tinder/profile.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Day49</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link rel="stylesheet" href="./style.css" type="text/css" />
+  </head>
+  <body>
+    <header>
+      <h1>Welcome to Tinder</h1>
+      <div class="matches-counter">
+        <span class="heart-icon"><i class="fa-solid fa-heart"></i></span>
+        <span class="count">0</span>
+      </div>
+    </header>
+    <section id="profile-container">
+      <div class="card">
+        <img src="" alt="Denim Jeans" style="width: 100%" />
+        <h1>Tailored Jeans</h1>
+        <p class="email">$19.99</p>
+        <p class="description">Some text about the jeans..</p>
+        <p>
+          <button id="match-user-btn">
+            Match
+            <span class="heart-icon"><i class="fa-solid fa-heart"></i></span>
+          </button>
+        </p>
+      </div>
+    </section>
+
+    <script
+      src="https://code.jquery.com/jquery-3.6.0.min.js"
+      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+      crossorigin="anonymous"
+    ></script>
+    <script src="./ajax.js"></script>
+  </body>
+</html>