From e9d149c39454f5fab3830922c5dda086a55f8943 Mon Sep 17 00:00:00 2001
From: LiadLati <liadl57@gmail.com>
Date: Sun, 15 Dec 2024 16:02:55 +0200
Subject: [PATCH 1/2] final countries pages without bonus

---
 CountriesData.json |   4 +-
 css/common.css     |  30 ++------
 css/details.css    |  43 +++++++++--
 css/main.css       |  27 +++++--
 details.html       | 138 ++++++++++++++++------------------
 details.js         |  18 +++++
 index.html         | 182 ++++++++++++++-------------------------------
 index.js           | 115 ++++++++++++++++++++++++++++
 8 files changed, 319 insertions(+), 238 deletions(-)
 create mode 100644 details.js
 create mode 100644 index.js

diff --git a/CountriesData.json b/CountriesData.json
index 3db67ea..ca575fd 100644
--- a/CountriesData.json
+++ b/CountriesData.json
@@ -202,4 +202,6 @@
         "region": "Europe",
         "capital": "Luxembourg"
     }
-]
\ No newline at end of file
+]
+
+  
\ No newline at end of file
diff --git a/css/common.css b/css/common.css
index 7d63db5..c842fe0 100644
--- a/css/common.css
+++ b/css/common.css
@@ -112,30 +112,6 @@ button {
   font-size: 16px;
 }
 
-.loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #fafafa;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9;
-  transition: 0.2s linear, opacity 0.2s linear, visibility 0.3s linear;
-}
-
-.loader.close {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.loader .spinner .icon {
-  font-size: 80px;
-  color: #111517;
-}
-
 .scroll-top {
   position: fixed;
   bottom: 20px;
@@ -192,7 +168,6 @@ button {
 .header .logo h1 {
   font-size: 20px;
 }
-
 @media (max-width: 400px) {
   .header .logo h1 {
     font-size: 16px;
@@ -307,3 +282,8 @@ body.dark-theme .country-info li {
 body.dark-theme .country-info strong {
   color: white;
 }
+
+.body {
+  background-color: white;
+}
+
diff --git a/css/details.css b/css/details.css
index 6108d5b..15d1ada 100644
--- a/css/details.css
+++ b/css/details.css
@@ -1,3 +1,8 @@
+html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
 body {
   font-size: 16px;
 }
@@ -43,8 +48,9 @@ body {
 
 .country-flag {
   flex-shrink: 0;
-  width: 450px;
+  width: 600px;
   max-width: 450px;
+  height: 300px;
   max-height: 350px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
   overflow: hidden;
@@ -65,10 +71,6 @@ body {
   object-fit: cover;
 }
 
-.country-info {
-  padding: 40px 0;
-}
-
 .country-info h1 {
   color: #111517;
   margin-bottom: 30px;
@@ -133,3 +135,34 @@ body {
   gap: 8px;
   flex-wrap: wrap;
 }
+
+.mainCountryFlag {
+  width: 50%;
+  height: 70%;
+}
+
+
+.country-container , .main{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80%;
+}
+.country-info {
+  padding: 40px 0;
+  padding-left: 10%;
+  width: 300px;
+}
+.country-name {
+  font-weight: bold;
+  font-size: 5vh;
+}
+.country-name, .country-region, .country-capital, .country-population {
+  padding-top: 20px;
+}
+
+.dark-country-info {
+  padding: 40px 0;
+  padding-left: 10%;
+  width: 300px;
+}
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index f51ac8b..5384e27 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,10 +1,10 @@
 .filters {
-  margin: 40px 0 50px 0;
+  padding: 40px 0 50px 0;
 }
 
 @media (min-width: 40em) {
   .filters {
-    margin: 50px 0 60px 0;
+    padding: 50px 0 60px 0;
   }
 }
 
@@ -109,7 +109,6 @@
   cursor: pointer;
   z-index: 2;
 }
-
 .filters .dropdown-header .icon {
   font-size: 13px;
   transition: transform 0.2s linear;
@@ -212,14 +211,32 @@
 .countries-grid .country-info {
   position: relative;
   padding: 30px 25px;
+  background-color: white;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
+}
+.dark-country-info {
+  background-color: #2b3945;
+  color: white;
+  padding: 30px 25px;
+}
+
+
+.countries-grid {
+  margin-bottom: 20px;
 }
 
-.countries-grid .country-title {
+.country-title {
   margin-bottom: 20px;
+  background-color: white;
+}
+.dark-country-title {
+  margin-bottom: 20px;
+  background-color: #2b3945;
 }
 
-.countries-grid .country-brief li {
+.countries-grid .country-brief li{
   font-size: 16px;
   text-transform: capitalize;
   margin-bottom: 15px;
 }
+
diff --git a/details.html b/details.html
index b584581..bc16bfb 100644
--- a/details.html
+++ b/details.html
@@ -1,80 +1,70 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      name="description"
-      content="This is a simple project to display countries of the world with the ability to search for the country you want, be side the ability to show countries by continent."
-    />
-    <meta name="author" content="Mohamed Aridah" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- 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=Nunito+Sans:wght@300;600;800&display=swap"
-      rel="stylesheet"
-    />
-    <!-- Fontawesome Library -->
-    <link
-      rel="stylesheet"
-      href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css"
-    />
-    <!-- Shared CSS Styles File -->
-    <link rel="stylesheet" href="./css/common.css" />
-    <!-- Page Custom CSS File -->
-    <link rel="stylesheet" href="./css/details.css" />
-    <title>Details Page</title>
-  </head>
-  <body>
-    <!-- Loader -->
-    <div class="loader">
-      <div class="spinner">
-        <i class="fa-regular fa-circle-notch fa-spin icon"></i>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="description"
+    content="This is a simple project to display countries of the world with the ability to search for the country you want, be side the ability to show countries by continent." />
+  <meta name="author" content="Mohamed Aridah" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- 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=Nunito+Sans:wght@300;600;800&display=swap" rel="stylesheet" />
+  <!-- Fontawesome Library -->
+  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css" />
+  <!-- Shared CSS Styles File -->
+  <link rel="stylesheet" href="./css/common.css" />
+  <!-- Page Custom CSS File -->
+  <link rel="stylesheet" href="./css/details.css" />
+  <title>Details Page</title>
+</head>
+
+<body class="body">
+  <!-- Scroll Top -->
+  <button type="button" aria-label="Scroll Top Button" class="button scroll-top flex flex-ai-c flex-jc-c scale-effect">
+    <i class="fa-regular fa-chevron-up icon"></i>
+  </button>
+  <!-- Header -->
+  <header class="header">
+    <div class="container flex flex-jc-sb flex-ai-c">
+      <div class="logo">
+        <a href="index.html">
+          <h1>Where in the world?</h1>
+        </a>
       </div>
+      <button onclick="darkMode()" type="button" aria-label="Theme Switcher Button" class="theme-toggle flex flex-jc-sb flex-ai-c">
+        <i class="fa-regular fa-moon theme-icon"></i>
+        <span class="theme-text">Dark Mode</span>
+      </button>
+    </div>
+  </header>
+  <!-- Back Button -->
+  <div class="back-button">
+    <div class="container">
+      <a href="index.html" class="btn btn-back btn-with-icon">
+        <i class="fa-regular fa-arrow-left icon"></i>
+        back
+      </a>
     </div>
-    <!-- Scroll Top -->
-    <button
-      type="button"
-      aria-label="Scroll Top Button"
-      class="button scroll-top flex flex-ai-c flex-jc-c scale-effect"
-    >
-      <i class="fa-regular fa-chevron-up icon"></i>
-    </button>
-    <!-- Header -->
-    <header class="header">
-      <div class="container flex flex-jc-sb flex-ai-c">
-        <div class="logo">
-          <a href="index.html">
-            <h1>Where in the world?</h1>
-          </a>
+  </div>
+  <main class="main">
+    <div  class="country-container">
+      <section class="country-details">
+        <div class="main-country-flag"></div>
+        <div class="country-info">
+          <div class="country-name"></div>
+          <div class="country-population"></div>
+          <div class="country-region"></div>
+          <div class="country-capital"></div>
         </div>
-        <button
-          type="button"
-          aria-label="Theme Switcher Button"
-          class="theme-toggle flex flex-jc-sb flex-ai-c"
-        >
-          <i class="fa-regular fa-moon theme-icon"></i>
-          <span class="theme-text">Dark Mode</span>
-        </button>
-      </div>
-    </header>
-    <!-- Back Button -->
-    <div class="back-button">
-      <div class="container">
-        <a href="index.html" class="btn btn-back btn-with-icon">
-          <i class="fa-regular fa-arrow-left icon"></i>
-          back
-        </a>
-      </div>
+      </section>
     </div>
-    <main class="main">
-      <div class="container">
-        <section class="country-details"></section>
-      </div>
-    </main>
-    <script src="./js/common.js"></script>
-    <script src="./js/details.js"></script>
-  </body>
-</html>
+  </main>
+  <!-- <script src="./js/common.js"></script> -->
+  <script src="details.js"></script>
+  <script src="index.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/details.js b/details.js
new file mode 100644
index 0000000..7939568
--- /dev/null
+++ b/details.js
@@ -0,0 +1,18 @@
+const getDetailsOfCountry = () => {
+    document.addEventListener("DOMContentLoaded", () => {
+        const countryDetails = JSON.parse(localStorage.getItem("countryDetails"));
+    
+        if (countryDetails) {
+            console.log("Country Details on details.html:", countryDetails);
+            document.querySelector(".main-country-flag").innerHTML = `<img class="country-flag" src="${countryDetails.flag}" alt="${countryDetails.name} flag" />`;
+            document.querySelector(".country-name").innerHTML = `${countryDetails.name}`;
+            document.querySelector(".country-population").innerHTML = `<b>Population:</b> ${countryDetails.population}`;
+            document.querySelector(".country-region").innerHTML = `<b>Region:</b> ${countryDetails.region}`;
+            document.querySelector(".country-capital").innerHTML = `<b>Capital:</b> ${countryDetails.capital}`;
+        } else {
+            console.error("No country details found in localStorage.");
+        }
+    });
+    
+}
+getDetailsOfCountry()
diff --git a/index.html b/index.html
index f4afbf5..01083fd 100644
--- a/index.html
+++ b/index.html
@@ -1,70 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta
-      name="description"
-      content="This is a simple project to display countries of the world with the ability to search for the country you want, be side the ability to show countries by continent."
-    />
-    <meta name="author" content="Mohamed Aridah" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- 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=Nunito+Sans:wght@300;600;800&display=swap"
-      rel="stylesheet"
-    />
-    <!-- Fontawesome Library -->
-    <link
-      rel="stylesheet"
-      href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css"
-    />
-    <!-- Shared CSS Styles File -->
-    <link rel="stylesheet" href="./css/common.css" />
-    <!-- Page Custom CSS File -->
-    <link rel="stylesheet" href="./css/main.css" />
-    <title>Countries Info</title>
-  </head>
-  <body>
-    <!-- Scroll Top -->
-    <button
-      type="button"
-      aria-label="Scroll Top Button"
-      class="button scroll-top flex flex-ai-c flex-jc-c scale-effect"
-    >
-      <i class="fa-regular fa-chevron-up icon"></i>
-    </button>
-    <!-- Header -->
-    <header class="header">
-      <div class="container flex flex-jc-sb flex-ai-c">
-        <div class="logo">
-          <a href="index.html">
-            <h1>Where in the world?</h1>
-          </a>
-        </div>
-        <button
-          type="button"
-          aria-label="Theme Switcher Button"
-          class="theme-toggle flex flex-jc-sb flex-ai-c"
-        >
-          <i class="fa-regular fa-moon theme-icon"></i>
-          <span class="theme-text">Dark Mode</span>
-        </button>
-      </div>
-    </header>
-    <!-- Filters -->
 
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="description"
+    content="This is a simple project to display countries of the world with the ability to search for the country you want, be side the ability to show countries by continent." />
+  <meta name="author" content="Mohamed Aridah" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!-- 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=Nunito+Sans:wght@300;600;800&display=swap" rel="stylesheet" />
+  <!-- Fontawesome Library -->
+  <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css" />
+  <!-- Shared CSS Styles File -->
+  <link rel="stylesheet" href="./css/common.css" />
+  <!-- Page Custom CSS File -->
+  <link rel="stylesheet" href="./css/main.css" />
+  <title>Countries Info</title>
+</head>
+
+<body class="body">
+  <!-- Scroll Top -->
+  <button type="button" aria-label="Scroll Top Button" class="button scroll-top flex flex-ai-c flex-jc-c scale-effect">
+    <i class="fa-regular fa-chevron-up icon"></i>
+  </button>
+  <!-- Header -->
+  <header class="header">
+    <div class="container flex flex-jc-sb flex-ai-c">
+      <div class="logo">
+        <a href="index.html">
+          <h1 class="headerh1">Where in the world?</h1>
+        </a>
+      </div>
+      <button type="button" aria-label="Theme Switcher Button" class="theme-toggle flex flex-jc-sb flex-ai-c"
+        onclick="darkMode()">
+        <span class="darkIcon">
+        <i class="fa-regular fa-moon theme-icon" id="darkButton"></i>
+        </span>
+        <span class="theme-text" id="darkText">Dark Mode</span>
+      </button>
+    </div>
+  </header>
+  <!-- Filters -->
+  <div class="bodyContainer">
     <section class="filters">
       <div class="container">
         <div class="search-wrapper">
           <i class="fa-regular fa-magnifying-glass search-icon"></i>
-          <input
-            type="text"
-            class="search-input"
-            placeholder="Search for a country..."
-          />
+          <input type="text" class="search-input" placeholder="Search for a country..." />
         </div>
         <div class="dropdown-wrapper">
           <div class="dropdown-header flex flex-jc-sb flex-ai-c">
@@ -74,8 +59,8 @@ <h1>Where in the world?</h1>
           <div class="dropdown-body">
             <ul>
               <li data-region="all">All</li>
-              <li data-region="africa">Africa</li>
-              <li data-region="americas">America</li>
+              <li data-region="africa">africa</li>
+              <li data-region="america">Americas</li>
               <li data-region="asia">Asia</li>
               <li data-region="europe">Europe</li>
               <li data-region="oceania">Oceania</li>
@@ -88,71 +73,12 @@ <h1>Where in the world?</h1>
     <main class="main">
       <div class="container">
         <section class="countries-grid">
-          <a
-            href="#"
-            class="country scale-effect"
-            data-country-name="Afghanistan"
-          >
-            <div class="country-flag">
-              <img
-                src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_the_Taliban.svg"
-                alt="Afghanistan FLag"
-              />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Afghanistan</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>40218234</li>
-                <li><strong>Region: </strong>Asia</li>
-                <li><strong>capital: </strong>Kabul</li>
-              </ul>
-            </div>
-          </a>
-          <a
-            href="#"
-            class="country scale-effect"
-            data-country-name="Åland Islands"
-          >
-            <div class="country-flag">
-              <img src="https://flagcdn.com/ax.svg" alt="Åland Islands FLag" />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Åland Islands</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>28875</li>
-                <li><strong>Region: </strong>Europe</li>
-                <li><strong>capital: </strong>Mariehamn</li>
-              </ul>
-            </div>
-          </a>
-          <a href="#" class="country scale-effect" data-country-name="Aruba">
-            <div class="country-flag">
-              <img src="https://flagcdn.com/aw.svg" alt="Aruba FLag" />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Aruba</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>106766</li>
-                <li><strong>Region: </strong>Americas</li>
-                <li><strong>capital: </strong>Oranjestad</li>
-              </ul>
-            </div>
-          </a>
-          <a href="#" class="country scale-effect" data-country-name="Belize">
-            <div class="country-flag">
-              <img src="https://flagcdn.com/bz.svg" alt="Belize FLag" />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Belize</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>397621</li>
-                <li><strong>Region: </strong>Americas</li>
-                <li><strong>capital: </strong>Belmopan</li>
-              </ul>
-            </div>
-          </a>
         </section>
       </div>
-    </main>
-  </body>
-</html>
+  </div>
+  </main>
+  <script src="index.js"></script>
+  <script src="details.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..24106d7
--- /dev/null
+++ b/index.js
@@ -0,0 +1,115 @@
+fetch('./CountriesData.json')
+    .then(response => response.json())
+    .then(countriesJson => {
+        displayCountries(countriesJson)
+    })
+    .catch(error => console.error('Error loading JSON:', error));
+
+
+const displayCountries = (countries) => {
+    const countriesContainer = document.querySelector('.countries-grid');
+    const isDarkMode = document.body.classList.contains('dark-theme');
+    countriesContainer.innerHTML = '';
+    countries.forEach(country => {
+        const countryDiv = `
+      <a href ="details.html"
+        onclick="setDetailsOfCountry('${country.flag}','${country.name}','${country.population}','${country.region}','${country.capital}')"
+        class="country scale-effect countryDiv"
+        data-country-name="Afghanistan">
+        <div class="country-flag">
+          <img src="${country.flag}"/>
+        </div>
+        <div class="${isDarkMode ? 'dark-country-info' : 'country-info'}">
+          <h2 class="${isDarkMode ? 'dark-country-title' : 'country-title'}">${country.name}</h2>
+          <ul class="country-brief">
+            <li><strong>population: </strong>${country.population}</li>
+            <li><strong>Region: </strong>${country.region}</li>
+            <li><strong>capital: </strong>${country.capital}</li>
+          </ul>
+        </div>
+      </a>
+    `;
+        countriesContainer.innerHTML += countryDiv;
+    });
+}
+
+
+const darkMode = () => {
+    const lightBody = document.querySelector('.body');
+    const darkBody = document.querySelector('.dark-theme');
+    const headerBackgroundColor = getComputedStyle(document.querySelector('header')).backgroundColor;
+    const countryDivs = document.querySelectorAll('.country-info');
+    const countryNames = document.querySelectorAll('.country-title');
+    const darkCountryDivs = document.querySelectorAll('.dark-country-info');
+    const darkCountryNames = document.querySelectorAll('.dark-country-title');
+
+    if (headerBackgroundColor === 'rgb(255, 255, 255)') {
+        lightBody.className = 'dark-theme'
+        countryDivs.forEach(div => {
+            div.className = 'dark-country-info'
+        });
+        countryNames.forEach(div => {
+            div.className = 'dark-country-title'
+        });
+
+    } else {
+        darkBody.className = 'body';
+        darkCountryDivs.forEach(div => {
+            div.className = 'country-info'
+        });
+        darkCountryNames.forEach(div => {
+            div.className = 'country-title'
+        });
+    }
+};
+
+
+const setDetailsOfCountry = (flag, name, population, region, capital) => {
+    const countryDetails = { flag, name, population, region, capital };
+    localStorage.setItem("countryDetails", JSON.stringify(countryDetails));
+    console.log("Country details saved:", countryDetails);
+};
+
+const openDropDown = () => {
+    const dropDown = document.querySelector('.dropdown-wrapper');
+    dropDown.addEventListener('click', () => {
+        dropDown.classList.toggle('open');
+    })
+}
+openDropDown();
+
+const filterByContinants = () => {
+    const regions = document.querySelectorAll('.dropdown-body li');
+    regions.forEach((li) => {
+        const chosenRegion = li.getAttribute('data-region');
+        li.addEventListener('click', () => {
+            fetch('./CountriesData.json')
+                .then(response => response.json())
+                .then(countriesJson => {
+                    let filteredCountries = countriesJson;
+                    if (chosenRegion == 'africa') {
+                        filteredCountries = filteredCountries.filter(country => country.region === 'Africa');
+                    }
+                    if (chosenRegion == 'america') {
+                        filteredCountries = filteredCountries.filter(country => country.region === 'Americas');
+                    }
+                    if (chosenRegion == 'asia') {
+                        filteredCountries = filteredCountries.filter(country => country.region === 'Asia');
+                    }
+                    if (chosenRegion == 'europe') {
+                        filteredCountries = filteredCountries.filter(country => country.region === 'Europe');
+                    }
+                    if (chosenRegion == 'oceania') {
+                        filteredCountries = filteredCountries.filter(country => country.region === 'Oceania');
+                    }
+                    displayCountries(filteredCountries);
+                })
+                .catch(error => console.error('Error loading JSON:', error));
+        })
+    })
+}
+filterByContinants();
+
+const searchCountry = () => {
+}
+

From c3d02bfb5f1ba9537594f38ff22d1271c189cbed Mon Sep 17 00:00:00 2001
From: LiadLati <liadl57@gmail.com>
Date: Sat, 21 Dec 2024 19:21:08 +0200
Subject: [PATCH 2/2] finished the countries task

---
 css/details.css |  4 +++-
 css/main.css    |  6 ++++--
 details.html    |  2 +-
 details.js      |  8 ++++----
 index.html      |  2 +-
 index.js        | 46 +++++++++++++++++++++++++++-------------------
 6 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/css/details.css b/css/details.css
index 15d1ada..16a1cd0 100644
--- a/css/details.css
+++ b/css/details.css
@@ -41,7 +41,8 @@ body {
 
 @media (min-width: 64em) {
   .country-flag,
-  .country-info {
+  .country-info
+  .dark-country-info {
     flex: 1 0 calc(50% - 30px);
   }
 }
@@ -159,6 +160,7 @@ body {
 }
 .country-name, .country-region, .country-capital, .country-population {
   padding-top: 20px;
+  font-weight: bold;
 }
 
 .dark-country-info {
diff --git a/css/main.css b/css/main.css
index 5384e27..e556943 100644
--- a/css/main.css
+++ b/css/main.css
@@ -189,9 +189,12 @@
 }
 
 .countries-grid .country-flag {
-  height: 200px;
+  height: 50%;
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 @media (max-width: 400px) {
@@ -204,7 +207,6 @@
   display: block;
   width: 100%;
   max-width: 100%;
-  height: 100%;
   object-fit: cover;
 }
 
diff --git a/details.html b/details.html
index bc16bfb..edd2bea 100644
--- a/details.html
+++ b/details.html
@@ -34,7 +34,7 @@
           <h1>Where in the world?</h1>
         </a>
       </div>
-      <button onclick="darkMode()" type="button" aria-label="Theme Switcher Button" class="theme-toggle flex flex-jc-sb flex-ai-c">
+      <button onclick="makeDarkModePage()" type="button" aria-label="Theme Switcher Button" class="theme-toggle flex flex-jc-sb flex-ai-c">
         <i class="fa-regular fa-moon theme-icon"></i>
         <span class="theme-text">Dark Mode</span>
       </button>
diff --git a/details.js b/details.js
index 7939568..20aebb7 100644
--- a/details.js
+++ b/details.js
@@ -5,10 +5,10 @@ const getDetailsOfCountry = () => {
         if (countryDetails) {
             console.log("Country Details on details.html:", countryDetails);
             document.querySelector(".main-country-flag").innerHTML = `<img class="country-flag" src="${countryDetails.flag}" alt="${countryDetails.name} flag" />`;
-            document.querySelector(".country-name").innerHTML = `${countryDetails.name}`;
-            document.querySelector(".country-population").innerHTML = `<b>Population:</b> ${countryDetails.population}`;
-            document.querySelector(".country-region").innerHTML = `<b>Region:</b> ${countryDetails.region}`;
-            document.querySelector(".country-capital").innerHTML = `<b>Capital:</b> ${countryDetails.capital}`;
+            document.querySelector(".country-name").textContent = `${countryDetails.name}`;
+            document.querySelector(".country-population").textContent = `Population: ${countryDetails.population}`;
+            document.querySelector(".country-region").textContent = `Region: ${countryDetails.region}`;
+            document.querySelector(".country-capital").textContent = `Capital: ${countryDetails.capital}`;
         } else {
             console.error("No country details found in localStorage.");
         }
diff --git a/index.html b/index.html
index 01083fd..7467a06 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@ <h1 class="headerh1">Where in the world?</h1>
         </a>
       </div>
       <button type="button" aria-label="Theme Switcher Button" class="theme-toggle flex flex-jc-sb flex-ai-c"
-        onclick="darkMode()">
+        onclick="makeDarkModePage()">
         <span class="darkIcon">
         <i class="fa-regular fa-moon theme-icon" id="darkButton"></i>
         </span>
diff --git a/index.js b/index.js
index 24106d7..efca757 100644
--- a/index.js
+++ b/index.js
@@ -14,8 +14,7 @@ const displayCountries = (countries) => {
         const countryDiv = `
       <a href ="details.html"
         onclick="setDetailsOfCountry('${country.flag}','${country.name}','${country.population}','${country.region}','${country.capital}')"
-        class="country scale-effect countryDiv"
-        data-country-name="Afghanistan">
+        class="country scale-effect countryDiv">
         <div class="country-flag">
           <img src="${country.flag}"/>
         </div>
@@ -34,7 +33,7 @@ const displayCountries = (countries) => {
 }
 
 
-const darkMode = () => {
+const makeDarkModePage = () => {
     const lightBody = document.querySelector('.body');
     const darkBody = document.querySelector('.dark-theme');
     const headerBackgroundColor = getComputedStyle(document.querySelector('header')).backgroundColor;
@@ -87,20 +86,16 @@ const filterByContinants = () => {
                 .then(response => response.json())
                 .then(countriesJson => {
                     let filteredCountries = countriesJson;
-                    if (chosenRegion == 'africa') {
-                        filteredCountries = filteredCountries.filter(country => country.region === 'Africa');
-                    }
-                    if (chosenRegion == 'america') {
-                        filteredCountries = filteredCountries.filter(country => country.region === 'Americas');
-                    }
-                    if (chosenRegion == 'asia') {
-                        filteredCountries = filteredCountries.filter(country => country.region === 'Asia');
-                    }
-                    if (chosenRegion == 'europe') {
-                        filteredCountries = filteredCountries.filter(country => country.region === 'Europe');
-                    }
-                    if (chosenRegion == 'oceania') {
-                        filteredCountries = filteredCountries.filter(country => country.region === 'Oceania');
+                    const regionMap = {
+                        america: 'Americas',
+                        asia: 'Asia',
+                        europe: 'Europe',
+                        oceania: 'Oceania',
+                        africa: 'Africa'
+                    };
+
+                    if (chosenRegion in regionMap) {
+                        filteredCountries = filteredCountries.filter(country => country.region === regionMap[chosenRegion]);
                     }
                     displayCountries(filteredCountries);
                 })
@@ -110,6 +105,19 @@ const filterByContinants = () => {
 }
 filterByContinants();
 
-const searchCountry = () => {
+const searchTheCountryByName = () => {
+    const searchInput = document.querySelector('.search-input');
+    searchInput.addEventListener("input", () => {
+        fetch('./CountriesData.json')
+            .then(response => response.json())
+            .then(countriesJson => {
+                let filteredCountry = countriesJson;
+                if (searchInput.value) {
+                    filteredCountry = filteredCountry.filter(country => country.name.toLowerCase().includes(searchInput.value.toLowerCase()));
+ 
+                }
+                displayCountries(filteredCountry)
+            })
+    });
 }
-
+searchTheCountryByName();