From 527b54010129d5c42839fae2d182c7ab283db7d8 Mon Sep 17 00:00:00 2001 From: Lian Hershkovits Date: Fri, 13 Dec 2024 10:56:29 +0200 Subject: [PATCH 1/3] Template cards --- index.html | 233 +++++++++++++++++++---------------------------------- 1 file changed, 83 insertions(+), 150 deletions(-) diff --git a/index.html b/index.html index f4afbf5..801fa60 100644 --- a/index.html +++ b/index.html @@ -1,158 +1,91 @@ - - - - - - - - - - - - - - - - - Countries Info - - - - - -
-
- - + + + + + + + + + + + + + + + + + + Countries Info + + + + + + +
+
+ -
- + +
+
+ -
-
-
- - +
+
+
+ + +
+
+
+ Filter by Region + +
+
+
    +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
    • +
-
-
- Filter by Region - +
+
+
+ +
+
+
+
-
- Afghanistan FLag -
-
-

Afghanistan

-
    -
  • population: 40218234
    • -
  • Region: Asia
    • -
  • capital: Kabul
    • -
-
- - -
- Åland Islands FLag -
-
-

Åland Islands

-
    -
  • population: 28875
    • -
  • Region: Europe
    • -
  • capital: Mariehamn
    • -
-
- - -
- Aruba FLag -
-
-

Aruba

-
    -
  • population: 106766
    • -
  • Region: Americas
    • -
  • capital: Oranjestad
    • -
-
- - -
- Belize FLag -
-
-

Belize

-
    -
  • population: 397621
    • -
  • Region: Americas
    • -
  • capital: Belmopan
    • -
-
- -
-
-
- - + + + + + + + \ No newline at end of file From 73fd7e641b1d65bfb36d22ff9bc5f34f02112956 Mon Sep 17 00:00:00 2001 From: Lian Hershkovits Date: Fri, 13 Dec 2024 12:42:17 +0200 Subject: [PATCH 2/3] finished injection using JSON --- index.html | 10 ++++++---- script.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 4 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index 801fa60..2c3e572 100644 --- a/index.html +++ b/index.html @@ -70,22 +70,24 @@

Where in the world?

-
+ \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..855ad7f --- /dev/null +++ b/script.js @@ -0,0 +1,33 @@ +document.addEventListener("DOMContentLoaded", ()=> { +fetch("CountriesData.json") +.then(response => { +if(!response.ok){ + throw new Error("Failed to load countries JSON"); +} +return response.json(); +}) +.then(countries => { + const template=document.querySelector('.country[data-country-name]'); + const grid=document.querySelector(".countries-grid"); + + countries.forEach(country => { + const card=template.cloneNode(true); + card.style.display="block"; + card.setAttribute("data-country-name", country.name); + + + card.querySelector(".country-image").src=country.flag; + card.querySelector(".country-image").alt=`${country.name} Flag` ; + card.querySelector(".country-title").textContent= country.name; + card.querySelector(".country-population").textContent= country.population.toLocaleString(); + card.querySelector(".country-region").textContent=country.region; + card.querySelector(".country-capital").textContent=country.capital; + + grid.appendChild(card); + }); +}) +.catch(error => { + console.error("Error loading countries data: ", error); +}); + +}); \ No newline at end of file From e2eec18151f6d2ae0ca50b7a509d270c7d500ff3 Mon Sep 17 00:00:00 2001 From: Lian Hershkovits Date: Fri, 13 Dec 2024 18:38:11 +0200 Subject: [PATCH 3/3] finished searching by region & details JS --- CountriesData.json | 4 +- details.html | 6 ++- details.js | 38 +++++++++++++++++++ index.html | 2 +- script.js | 92 ++++++++++++++++++++++++++++++---------------- 5 files changed, 106 insertions(+), 36 deletions(-) create mode 100644 details.js diff --git a/CountriesData.json b/CountriesData.json index 3db67ea..5882bf6 100644 --- a/CountriesData.json +++ b/CountriesData.json @@ -52,7 +52,7 @@ "name": "Anguilla", "flag": "https://flagcdn.com/w320/ai.png", "population": 13452, - "region": "Americas", + "region": "America", "capital": "The Valley" }, { @@ -80,7 +80,7 @@ "name": "Jamaica", "flag": "https://flagcdn.com/w320/jm.png", "population": 2723246, - "region": "Americas", + "region": "America", "capital": "Kingston" }, { diff --git a/details.html b/details.html index b584581..2643893 100644 --- a/details.html +++ b/details.html @@ -74,7 +74,9 @@

Where in the world?

- - + + + diff --git a/details.js b/details.js new file mode 100644 index 0000000..301ffcc --- /dev/null +++ b/details.js @@ -0,0 +1,38 @@ +document.addEventListener("DOMContentLoaded", () => { + + const urlParams = new URLSearchParams(window.location.search); + const name = urlParams.get("name"); + const flag = urlParams.get("flag"); + const population = urlParams.get("population"); + const region = urlParams.get("region"); + const capital = urlParams.get("capital"); + + const countryDetailsSection = document.querySelector(".country-details"); + const loader = document.querySelector(".loader"); + + loader.style.display = "flex"; + + if (name && flag && population && region && capital) { + const cardHTML = ` +
+
+ ${name} Flag +
+
+

${name}

+
    +
  • Population: ${Number(population).toLocaleString()}
    • +
  • Region: ${region}
    • +
  • Capital: ${capital}
    • +
+
+
+ `; + + countryDetailsSection.innerHTML = cardHTML; + loader.style.display = "none"; + } else { + loader.style.display = "none"; + alert("Failed to load country details. Missing data."); +    } +}); diff --git a/index.html b/index.html index 2c3e572..6071df9 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@

Where in the world?

  • All
  • Africa
    • -
  • America
    • +
  • America
  • Asia
  • Europe
  • Oceania
    • diff --git a/script.js b/script.js index 855ad7f..5772304 100644 --- a/script.js +++ b/script.js @@ -1,33 +1,63 @@ -document.addEventListener("DOMContentLoaded", ()=> { -fetch("CountriesData.json") -.then(response => { -if(!response.ok){ - throw new Error("Failed to load countries JSON"); -} -return response.json(); +document.addEventListener("DOMContentLoaded", () => { + fetch("CountriesData.json") + .then(response => { + if (!response.ok) { + throw new Error("Failed to load countries JSON"); + } + return response.json(); + }) + .then(countries => { + const template = document.querySelector('.country[data-country-name]'); + const grid = document.querySelector(".countries-grid"); + function displayCountries(filteredCountries) { + grid.innerHTML = ""; + filteredCountries.forEach(country => { + const card = template.cloneNode(true); + card.style.display = "block"; + card.setAttribute("data-country-name", country.name); + card.setAttribute("href", `details.html?name=${encodeURIComponent(country.name)}&flag=${encodeURIComponent(country.flag)}&population=${country.population}®ion=${encodeURIComponent(country.region)}&capital=${encodeURIComponent(country.capital || "N/A")}`); + card.querySelector(".country-image").src = country.flag; + card.querySelector(".country-image").alt = `${country.name} Flag`; + card.querySelector(".country-title").textContent = country.name; + card.querySelector(".country-population").textContent = country.population.toLocaleString(); + card.querySelector(".country-region").textContent = country.region; + card.querySelector(".country-capital").textContent = country.capital; + + grid.appendChild(card); + }); + } + + displayCountries(countries); + const dropDownItems = document.querySelectorAll(".dropdown-body li"); + dropDownItems.forEach(item => { + item.addEventListener("click", (event) => { + const region = event.target.getAttribute("data-region"); + const filteredCountries = region === "all" + ? countries + : countries.filter(country => country.region.toLowerCase() === region.toLowerCase()); + + displayCountries(filteredCountries); + const dropDownWrapper = document.querySelector(".dropdown-wrapper"); + dropDownWrapper.classList.remove("open"); + }); + }); + }) + + + .catch(error => { + console.error("Error loading countries data: ", error); + }); + + const dropDownHeader = document.querySelector(".dropdown-header"); + const dropDownWrapper = document.querySelector(".dropdown-wrapper"); + + dropDownHeader.addEventListener("click", () => { + dropDownWrapper.classList.toggle("open"); + }) +document.addEventListener("click", (event)=>{ + if(!dropDownWrapper.contains(event.target) && !dropDownHeader.contains(event.target)) + dropDownWrapper.classList.remove("open"); }) -.then(countries => { - const template=document.querySelector('.country[data-country-name]'); - const grid=document.querySelector(".countries-grid"); - - countries.forEach(country => { - const card=template.cloneNode(true); - card.style.display="block"; - card.setAttribute("data-country-name", country.name); - - - card.querySelector(".country-image").src=country.flag; - card.querySelector(".country-image").alt=`${country.name} Flag` ; - card.querySelector(".country-title").textContent= country.name; - card.querySelector(".country-population").textContent= country.population.toLocaleString(); - card.querySelector(".country-region").textContent=country.region; - card.querySelector(".country-capital").textContent=country.capital; - - grid.appendChild(card); - }); -}) -.catch(error => { - console.error("Error loading countries data: ", error); -}); - + + }); \ No newline at end of file