From d266475e844d2db821e4a1b34b92774cbeda38ad Mon Sep 17 00:00:00 2001
From: Idan Barhom <130668498+IdanBarhom@users.noreply.github.com>
Date: Sun, 15 Dec 2024 16:02:31 +0200
Subject: [PATCH 1/2] rendered all the countries, filter to a specific region
 and search input. dont know how to import the content from the json file.
 didn't do the 'details page'

---
 .vscode/settings.json |   3 +
 CountriesData.json    |  29 +++++
 index.html            |  85 ++-----------
 index.js              | 279 ++++++++++++++++++++++++++++++++++++++++++
 package-lock.json     |  19 +++
 package.json          |   5 +
 6 files changed, 348 insertions(+), 72 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 index.js
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/CountriesData.json b/CountriesData.json
index a6fc2a2..3db67ea 100644
--- a/CountriesData.json
+++ b/CountriesData.json
@@ -1,174 +1,203 @@
 [
     {
         "name": "Åland Islands",
+        "flag": "https://flagcdn.com/w320/ax.png",
         "population": 21225,
         "region": "Europe",
         "capital": "Mariehamn"
     },
     {
         "name": "Afghanistan",
+        "flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_the_Taliban.svg/320px-Flag_of_the_Taliban.svg.png",
         "population": 27657145,
         "region": "Asia",
         "capital": "Kabul"
     },
     {
         "name": "Albania",
+        "flag": "https://flagcdn.com/w320/al.png",
         "population": 2886026,
         "region": "Europe",
         "capital": "Tirana"
     },
     {
         "name": "Algeria",
+        "flag": "https://flagcdn.com/w320/dz.png",
         "population": 40400000,
         "region": "Africa",
         "capital": "Algiers"
     },
     {
         "name": "American Samoa",
+        "flag": "https://flagcdn.com/w320/as.png",
         "population": 57100,
         "region": "Oceania",
         "capital": "Pago Pago"
     },
     {
         "name": "Andorra",
+        "flag": "https://flagcdn.com/w320/ad.png",
         "population": 78014,
         "region": "Europe",
         "capital": "Andorra la Vella"
     },
     {
         "name": "Angola",
+        "flag": "https://flagcdn.com/w320/ao.png",
         "population": 25868000,
         "region": "Africa",
         "capital": "Luanda"
     },
     {
         "name": "Anguilla",
+        "flag": "https://flagcdn.com/w320/ai.png",
         "population": 13452,
         "region": "Americas",
         "capital": "The Valley"
     },
     {
         "name": "Antarctica",
+        "flag": "https://flagcdn.com/w320/aq.png",
         "population": 1000,
         "region": "Polar",
         "capital": ""
     },
     {
         "name": "Israel",
+        "flag": "https://flagcdn.com/w320/il.png",
         "population": 8527400,
         "region": "Asia",
         "capital": "Jerusalem"
     },
     {
         "name": "Italy",
+        "flag": "https://flagcdn.com/w320/it.png",
         "population": 60665551,
         "region": "Europe",
         "capital": "Rome"
     },
     {
         "name": "Jamaica",
+        "flag": "https://flagcdn.com/w320/jm.png",
         "population": 2723246,
         "region": "Americas",
         "capital": "Kingston"
     },
     {
         "name": "Japan",
+        "flag": "https://flagcdn.com/w320/jp.png",
         "population": 126960000,
         "region": "Asia",
         "capital": "Tokyo"
     },
     {
         "name": "Jersey",
+        "flag": "https://flagcdn.com/w320/je.png",
         "population": 100800,
         "region": "Europe",
         "capital": "Saint Helier"
     },
     {
         "name": "Jordan",
+        "flag": "https://flagcdn.com/w320/jo.png",
         "population": 9531712,
         "region": "Asia",
         "capital": "Amman"
     },
     {
         "name": "Kazakhstan",
+        "flag": "https://flagcdn.com/w320/kz.png",
         "population": 17753200,
         "region": "Asia",
         "capital": "Astana"
     },
     {
         "name": "Kenya",
+        "flag": "https://flagcdn.com/w320/ke.png",
         "population": 47251000,
         "region": "Africa",
         "capital": "Nairobi"
     },
     {
         "name": "Kiribati",
+        "flag": "https://flagcdn.com/w320/ki.png",
         "population": 113400,
         "region": "Oceania",
         "capital": "South Tarawa"
     },
     {
         "name": "Kuwait",
+        "flag": "https://flagcdn.com/w320/kw.png",
         "population": 4183658,
         "region": "Asia",
         "capital": "Kuwait City"
     },
     {
         "name": "Kyrgyzstan",
+        "flag": "https://flagcdn.com/w320/kg.png",
         "population": 6047800,
         "region": "Asia",
         "capital": "Bishkek"
     },
     {
         "name": "Laos",
+        "flag": "https://flagcdn.com/w320/la.png",
         "population": 6492400,
         "region": "Asia",
         "capital": "Vientiane"
     },
     {
         "name": "Latvia",
+        "flag": "https://flagcdn.com/w320/lv.png",
         "population": 1961600,
         "region": "Europe",
         "capital": "Riga"
     },
     {
         "name": "Lebanon",
+        "flag": "https://flagcdn.com/w320/lb.png",
         "population": 5988000,
         "region": "Asia",
         "capital": "Beirut"
     },
     {
         "name": "Lesotho",
+        "flag": "https://flagcdn.com/w320/ls.png",
         "population": 1894194,
         "region": "Africa",
         "capital": "Maseru"
     },
     {
         "name": "Liberia",
+        "flag": "https://flagcdn.com/w320/lr.png",
         "population": 4615000,
         "region": "Africa",
         "capital": "Monrovia"
     },
     {
         "name": "Libya",
+        "flag": "https://flagcdn.com/w320/ly.png",
         "population": 6385000,
         "region": "Africa",
         "capital": "Tripoli"
     },
     {
         "name": "Liechtenstein",
+        "flag": "https://flagcdn.com/w320/li.png",
         "population": 37623,
         "region": "Europe",
         "capital": "Vaduz"
     },
     {
         "name": "Lithuania",
+        "flag": "https://flagcdn.com/w320/lt.png",
         "population": 2872294,
         "region": "Europe",
         "capital": "Vilnius"
     },
     {
         "name": "Luxembourg",
+        "flag": "https://flagcdn.com/w320/lu.png",
         "population": 576200,
         "region": "Europe",
         "capital": "Luxembourg"
diff --git a/index.html b/index.html
index f4afbf5..e078310 100644
--- a/index.html
+++ b/index.html
@@ -61,24 +61,25 @@ <h1>Where in the world?</h1>
         <div class="search-wrapper">
           <i class="fa-regular fa-magnifying-glass search-icon"></i>
           <input
+            data-search
             type="text"
             class="search-input"
             placeholder="Search for a country..."
           />
         </div>
-        <div class="dropdown-wrapper">
+        <div class="dropdown-wrapper" onclick="toggleFilterRegionMenu()">
           <div class="dropdown-header flex flex-jc-sb flex-ai-c">
             <span>Filter by Region</span>
             <i class="fa-regular fa-chevron-down icon"></i>
           </div>
-          <div class="dropdown-body">
+          <div class="dropdown-body" id="dropdown-body" >
             <ul>
-              <li data-region="all">All</li>
-              <li data-region="africa">Africa</li>
-              <li data-region="americas">America</li>
-              <li data-region="asia">Asia</li>
-              <li data-region="europe">Europe</li>
-              <li data-region="oceania">Oceania</li>
+              <li data-region="all" onclick="filterRegion(this)">All</li>
+              <li data-region="africa" onclick="filterRegion(this)" >Africa</li>
+              <li data-region="americas" onclick="filterRegion(this)">America</li>
+              <li data-region="asia" onclick="filterRegion(this)">Asia</li>
+              <li data-region="europe" onclick="filterRegion(this)">Europe</li>
+              <li data-region="oceania" onclick="filterRegion(this)">Oceania</li>
             </ul>
           </div>
         </div>
@@ -87,72 +88,12 @@ <h1>Where in the world?</h1>
     <!-- Countries -->
     <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 id="countries-grid" class="countries-grid">
+          
         </section>
       </div>
     </main>
+    
+    <script  src="index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..4415519
--- /dev/null
+++ b/index.js
@@ -0,0 +1,279 @@
+
+
+const CountriesData=[
+  {
+      "name": "Åland Islands",
+      "flag": "https://flagcdn.com/w320/ax.png",
+      "population": 21225,
+      "region": "Europe",
+      "capital": "Mariehamn"
+  },
+  {
+      "name": "Afghanistan",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_the_Taliban.svg/320px-Flag_of_the_Taliban.svg.png",
+      "population": 27657145,
+      "region": "Asia",
+      "capital": "Kabul"
+  },
+  {
+      "name": "Albania",
+      "flag": "https://flagcdn.com/w320/al.png",
+      "population": 2886026,
+      "region": "Europe",
+      "capital": "Tirana"
+  },
+  {
+      "name": "Algeria",
+      "flag": "https://flagcdn.com/w320/dz.png",
+      "population": 40400000,
+      "region": "Africa",
+      "capital": "Algiers"
+  },
+  {
+      "name": "American Samoa",
+      "flag": "https://flagcdn.com/w320/as.png",
+      "population": 57100,
+      "region": "Oceania",
+      "capital": "Pago Pago"
+  },
+  {
+      "name": "Andorra",
+      "flag": "https://flagcdn.com/w320/ad.png",
+      "population": 78014,
+      "region": "Europe",
+      "capital": "Andorra la Vella"
+  },
+  {
+      "name": "Angola",
+      "flag": "https://flagcdn.com/w320/ao.png",
+      "population": 25868000,
+      "region": "Africa",
+      "capital": "Luanda"
+  },
+  {
+      "name": "Anguilla",
+      "flag": "https://flagcdn.com/w320/ai.png",
+      "population": 13452,
+      "region": "Americas",
+      "capital": "The Valley"
+  },
+  {
+      "name": "Antarctica",
+      "flag": "https://flagcdn.com/w320/aq.png",
+      "population": 1000,
+      "region": "Polar",
+      "capital": ""
+  },
+  {
+      "name": "Israel",
+      "flag": "https://flagcdn.com/w320/il.png",
+      "population": 8527400,
+      "region": "Asia",
+      "capital": "Jerusalem"
+  },
+  {
+      "name": "Italy",
+      "flag": "https://flagcdn.com/w320/it.png",
+      "population": 60665551,
+      "region": "Europe",
+      "capital": "Rome"
+  },
+  {
+      "name": "Jamaica",
+      "flag": "https://flagcdn.com/w320/jm.png",
+      "population": 2723246,
+      "region": "Americas",
+      "capital": "Kingston"
+  },
+  {
+      "name": "Japan",
+      "flag": "https://flagcdn.com/w320/jp.png",
+      "population": 126960000,
+      "region": "Asia",
+      "capital": "Tokyo"
+  },
+  {
+      "name": "Jersey",
+      "flag": "https://flagcdn.com/w320/je.png",
+      "population": 100800,
+      "region": "Europe",
+      "capital": "Saint Helier"
+  },
+  {
+      "name": "Jordan",
+      "flag": "https://flagcdn.com/w320/jo.png",
+      "population": 9531712,
+      "region": "Asia",
+      "capital": "Amman"
+  },
+  {
+      "name": "Kazakhstan",
+      "flag": "https://flagcdn.com/w320/kz.png",
+      "population": 17753200,
+      "region": "Asia",
+      "capital": "Astana"
+  },
+  {
+      "name": "Kenya",
+      "flag": "https://flagcdn.com/w320/ke.png",
+      "population": 47251000,
+      "region": "Africa",
+      "capital": "Nairobi"
+  },
+  {
+      "name": "Kiribati",
+      "flag": "https://flagcdn.com/w320/ki.png",
+      "population": 113400,
+      "region": "Oceania",
+      "capital": "South Tarawa"
+  },
+  {
+      "name": "Kuwait",
+      "flag": "https://flagcdn.com/w320/kw.png",
+      "population": 4183658,
+      "region": "Asia",
+      "capital": "Kuwait City"
+  },
+  {
+      "name": "Kyrgyzstan",
+      "flag": "https://flagcdn.com/w320/kg.png",
+      "population": 6047800,
+      "region": "Asia",
+      "capital": "Bishkek"
+  },
+  {
+      "name": "Laos",
+      "flag": "https://flagcdn.com/w320/la.png",
+      "population": 6492400,
+      "region": "Asia",
+      "capital": "Vientiane"
+  },
+  {
+      "name": "Latvia",
+      "flag": "https://flagcdn.com/w320/lv.png",
+      "population": 1961600,
+      "region": "Europe",
+      "capital": "Riga"
+  },
+  {
+      "name": "Lebanon",
+      "flag": "https://flagcdn.com/w320/lb.png",
+      "population": 5988000,
+      "region": "Asia",
+      "capital": "Beirut"
+  },
+  {
+      "name": "Lesotho",
+      "flag": "https://flagcdn.com/w320/ls.png",
+      "population": 1894194,
+      "region": "Africa",
+      "capital": "Maseru"
+  },
+  {
+      "name": "Liberia",
+      "flag": "https://flagcdn.com/w320/lr.png",
+      "population": 4615000,
+      "region": "Africa",
+      "capital": "Monrovia"
+  },
+  {
+      "name": "Libya",
+      "flag": "https://flagcdn.com/w320/ly.png",
+      "population": 6385000,
+      "region": "Africa",
+      "capital": "Tripoli"
+  },
+  {
+      "name": "Liechtenstein",
+      "flag": "https://flagcdn.com/w320/li.png",
+      "population": 37623,
+      "region": "Europe",
+      "capital": "Vaduz"
+  },
+  {
+      "name": "Lithuania",
+      "flag": "https://flagcdn.com/w320/lt.png",
+      "population": 2872294,
+      "region": "Europe",
+      "capital": "Vilnius"
+  },
+  {
+      "name": "Luxembourg",
+      "flag": "https://flagcdn.com/w320/lu.png",
+      "population": 576200,
+      "region": "Europe",
+      "capital": "Luxembourg"
+  }
+]
+// console.log(CountriesData);
+// console.log("hi");
+// import countries from './CountriesData.json' 
+//console.log(CountriesData)
+let countriesGrid = document.querySelector(".countries-grid");
+const searchInput=document.querySelector("[data-search]")
+
+searchInput.addEventListener("input",e=>{
+  const value=e.target.value.toLowerCase()
+  console.log(value)
+  const searchedCountries = CountriesData.filter(
+      (country) => country.name.toLowerCase().includes(value)
+    );
+  console.log(searchedCountries);
+  countriesGrid.innerHTML = renderCountries(searchedCountries);
+  
+
+})
+
+const renderCountries = (countries) => {
+  return countries.map(
+      (country) =>
+        `
+      <a href="#" class="country scale-effect" data-country-name="${country.name}">
+        <div class="country-flag">
+          <img
+            src="${country.flag}"
+            alt="${country.name} FLag"
+          />
+        </div>
+        <div class="country-info">
+          <h2 class="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>`
+    )
+    .join("");
+};
+
+const toggleFilterRegionMenu = () => {
+  let filter = document.getElementById("dropdown-body").style;
+
+  filter.visibility === "hidden"
+    ? ((filter.visibility = "visible"), (filter.opacity = 1))
+    : ((filter.visibility = "hidden"), (filter.opacity = 0));
+};
+
+const filterRegion = (e) => {
+  const selectedRegion = e.getAttribute("data-region");
+  if (selectedRegion === "all") {
+    countriesGrid.innerHTML = renderCountries(CountriesData);
+  } else {
+    const region = CountriesData.filter(
+      (country) => country.region.toLowerCase() === selectedRegion
+    );
+    console.log(region);
+    countriesGrid.innerHTML = renderCountries(region);
+  }
+};
+
+
+countriesGrid.innerHTML = renderCountries(CountriesData);
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6f72b9e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,19 @@
+{
+  "name": "Countries-DevClub",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "devDependencies": {
+        "json-loader": "^0.5.7"
+      }
+    },
+    "node_modules/json-loader": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/json-loader/-/json-loader-0.5.7.tgz",
+      "integrity": "sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..3f9d7d8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "json-loader": "^0.5.7"
+  }
+}

From 6ac04d2270c77429050ae95161d6618709263efd Mon Sep 17 00:00:00 2001
From: Idan Barhom <130668498+IdanBarhom@users.noreply.github.com>
Date: Sun, 15 Dec 2024 21:55:50 +0200
Subject: [PATCH 2/2] somthing

---
 index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index 4415519..d5fd0fa 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,6 @@
 
 
+
 const CountriesData=[
   {
       "name": "Åland Islands",
@@ -214,11 +215,11 @@ const searchInput=document.querySelector("[data-search]")
 
 searchInput.addEventListener("input",e=>{
   const value=e.target.value.toLowerCase()
-  console.log(value)
+  //console.log(value)
   const searchedCountries = CountriesData.filter(
       (country) => country.name.toLowerCase().includes(value)
     );
-  console.log(searchedCountries);
+  //console.log(searchedCountries);
   countriesGrid.innerHTML = renderCountries(searchedCountries);
   
 
@@ -270,7 +271,7 @@ const filterRegion = (e) => {
     const region = CountriesData.filter(
       (country) => country.region.toLowerCase() === selectedRegion
     );
-    console.log(region);
+    //console.log(region);
     countriesGrid.innerHTML = renderCountries(region);
   }
 };