test

assets/css/main.css

@@ -121,9 +121,7 @@ body {
 
 }
 
-.card:hover {
-    transform: scale(1.10);
-}
+
 
 
 .card-body>ul {

assets/js/Api/ApiController.js

@@ -0,0 +1,25 @@
+import { fetchData } from "./FetchModule.js";
+
+const baseUrl =
+  "https://restcountries.com/v3.1/all?fields=name,population,region,capital,flags";
+
+export async function fetchHomePageData(searchResult) {
+  let url = baseUrl;
+  if (searchResult) {
+    url = `https://restcountries.com/v3.1/name/${searchResult}?fields=name,population,region,capital,flags`;
+  }
+  const data = await fetchData(url);
+  return data;
+}
+
+export async function fetchDetailPage(urlCountryName) {
+  let url = `https://restcountries.com/v3.1/name/${urlCountryName}?fields=name,population,region,subregion,tld,borders,currencies,capital,flags,languages`;
+  const data = await fetchData(url);
+  return data;
+}
+export async function fetchFullBordersName(borders) {
+  let url = `https://restcountries.com/v3.1/alpha?codes=${borders}`;
+  const data = await fetchData(url);
+  return data;
+}
+export default fetchHomePageData;

assets/js/LoadingSpinner.js → assets/js/Api/LoadingSpinner.js

@@ -1,4 +1,6 @@
-export function isLoading(cardContainer, loadingSpinner, loading) {
+const loadingSpinner = document.getElementById("loadingSpinner");
+
+export function isLoading(cardContainer, loading) {
   var updatedCardContainer;
   var updatedLoadingSpinner;
 

assets/js/DetailPage.js

@@ -1,13 +1,14 @@
 const params = new URLSearchParams(window.location.search);
 const contentContainer = document.getElementById("contentContainer");
-const loadingSpinner = document.getElementById("loadingSpinner");
 var backButton = document.getElementById("back");
 var urlCountryName;
 import { renderDetails } from "./DetailPageControllers/RenderDetails.js";
-import { fetchData } from "./FetchModule.js";
-import { handleFetchError } from "./ErrorHandler.js";
-import { isLoading } from "./LoadingSpinner.js";
-
+import {
+  fetchDetailPage,
+  fetchFullBordersName,
+} from "../js/Api/ApiController.js";
+import { isLoading } from "./Api/LoadingSpinner.js";
+import { handleFetchError } from "./Api/ErrorHandler.js";
 backButton.href = window.location.href.substring(
   0,
   window.location.href.indexOf("detail.html")
@@ -21,18 +22,14 @@ fetchDetail();
 
 async function fetchDetail() {
   try {
-    isLoading(contentContainer, loadingSpinner, true);
-    const detailData = await fetchData(
-      `https://restcountries.com/v3.1/name/${urlCountryName}?fields=name,population,region,subregion,tld,borders,currencies,capital,flags,languages`
-    );
+    isLoading(contentContainer, true);
+    const detailData = await fetchDetailPage(urlCountryName);
     const country = detailData[0];
 
     let countryFullName = [];
     const borders = Object.values(country.borders).join(",");
     if (borders) {
-      const bordersData = await fetchData(
-        `https://restcountries.com/v3.1/alpha?codes=${borders}`
-      );
+      const bordersData = await fetchFullBordersName(borders);
       countryFullName = bordersData.map((country) => country.name.common);
     }
     if (!country) {
@@ -45,6 +42,6 @@ async function fetchDetail() {
     console.log(error);
     contentContainer.appendChild(handleFetchError(error));
   } finally {
-    isLoading(contentContainer, loadingSpinner, false);
+    isLoading(contentContainer, false);
   }
 }

assets/js/HomePage.js

@@ -1,6 +1,4 @@
-import { handleFetchError } from "./ErrorHandler.js";
-import { isLoading } from "./LoadingSpinner.js";
-import { fetchData } from "./FetchModule.js";
+import { handleFetchError } from "../js/Api/ErrorHandler.js";
 import { filterByRegion } from "./HomePageControllers/FilterCountries.js";
 import {
   saveFavoriteStatus,
@@ -9,54 +7,63 @@ import {
   initializeFavoriteList,
   getCountryFromCardElement,
 } from "./HomePageControllers/FavCountryFunctions.js";
+import fetchHomePageData from "./Api/ApiController.js";
+import {
+  clearCardContainer,
+  appendChildToCardContainer,
+  noResultFound,
+  loading,
+  loaded,
+  debounce,
+} from "./HomePageControllers/HomePageView.js";
 
-const favouritescontainer = document.querySelector(".favourites-container");
-const cardContainer = document.getElementById("cardContainer");
-const loadingSpinner = document.getElementById("loadingSpinner");
 const dropdownMenu = document.getElementById("dropdownMenu");
 const dropdownButton = document.getElementById("dropdownButton");
 const dropdownItems = dropdownMenu.querySelectorAll(".dropdown-item");
 const searchInput = document.getElementById("input");
-let searchTimer;
+const favouritescontainer = document.querySelector(".favourites-container");
 let selectedRegion = "No Filter";
 
-async function handleData(
-  apiUrl = "https://restcountries.com/v3.1/all?fields=name,population,region,capital,flags"
-) {
-  let countriesData = [];
+function handleSearch(event) {
+  const searchResult = event.target.value.trim();
+  !searchResult ? handleData() : handleData(searchResult);
+}
+const debouncedHandleSearch = debounce(handleSearch, 500);
 
+async function handleData(searchResult) {
+  let countriesData = [];
   dropdownItems.forEach((item) => {
     item.addEventListener("click", (event) => {
       handleRegionFilter(event, countriesData);
     });
   });
 
-  searchInput.addEventListener("keyup", handleSearch);
+  searchInput.addEventListener("keyup", debouncedHandleSearch);
 
   try {
-    isLoading(cardContainer, loadingSpinner, true);
-    countriesData = await fetchData(apiUrl);
+    loading();
+    countriesData = await fetchHomePageData(searchResult);
     var filteredCountries = filterByRegion(countriesData, selectedRegion);
     renderCards(filteredCountries);
   } catch (error) {
     console.log(error);
-    cardContainer.innerHTML = "";
-    cardContainer.appendChild(handleFetchError(error));
+    clearCardContainer();
+    appendChildToCardContainer(handleFetchError(error));
   } finally {
-    isLoading(cardContainer, loadingSpinner, false);
+    loaded();
   }
 }
 
 handleData();
 initializeFavoriteList();
 
 function renderCards(filteredData) {
-  cardContainer.innerHTML = "";
+  clearCardContainer();
   filteredData.length === 0
-    ? (cardContainer.innerHTML = `<h2 class="text-center">No result Found.</h2>`)
+    ? noResultFound()
     : filteredData.forEach((country) => {
         const card = createCardElement(country);
-        cardContainer.appendChild(card);
+        appendChildToCardContainer(card);
       });
 }
 
@@ -125,18 +132,6 @@ export function createCardElement(country) {
   return card;
 }
 
-function handleSearch(event) {
-  clearTimeout(searchTimer);
-  searchTimer = setTimeout(() => {
-    const searchResult = event.target.value.trim();
-    !searchResult
-      ? handleData()
-      : handleData(
-          `https://restcountries.com/v3.1/name/${searchResult}?fields=name,population,region,capital,flags`
-        );
-  }, 500);
-}
-
 function handleRegionFilter(event, countriesData) {
   selectedRegion = event.target.innerText;
   const filteredCountries = filterByRegion(countriesData, selectedRegion);

assets/js/HomePageControllers/FavCountryFunctions.js

@@ -67,8 +67,6 @@ export function initializeFavoriteList() {
   });
 }
 
-
-
 export function getCountryFromCardElement(cardElement) {
   const countryName = decodeURIComponent(
     cardElement.querySelector(".card-title").textContent

assets/js/HomePageControllers/HomePageView.js

@@ -0,0 +1,32 @@
+import { isLoading } from "../Api/LoadingSpinner.js";
+
+const cardContainer = document.getElementById("cardContainer");
+const searchInput = document.getElementById("input");
+
+
+export function clearCardContainer() {
+  cardContainer.innerHTML = "";
+}
+export function appendChildToCardContainer(child) {
+  cardContainer.appendChild(child);
+}
+export function noResultFound() {
+  cardContainer.innerHTML = `<h2 class="text-center">No result Found.</h2>`;
+}
+
+export function loading() {
+  isLoading(cardContainer, true);
+}
+export function loaded() {
+  isLoading(cardContainer, false);
+}
+
+export function debounce(cb, delay) {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      cb.apply(this, args);
+    }, delay);
+  };
+}

assets/js/HomePageControllers/SearchHandler.js

@@ -0,0 +1,7 @@
+function handleSearch(event) {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => {
+      const searchResult = event.target.value.trim();
+      !searchResult ? handleData() : handleData(searchResult);
+    }, 500);
+  }