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..cfed42c 100644 --- a/details.html +++ b/details.html @@ -29,7 +29,7 @@ -
+
@@ -74,7 +74,9 @@

Where in the world?

- - + + + diff --git a/details.js b/details.js new file mode 100644 index 0000000..2feca71 --- /dev/null +++ b/details.js @@ -0,0 +1,39 @@ +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 = "block"; + alert("Failed to load country details. Missing data."); + } +}); diff --git a/index.html b/index.html index f4afbf5..a3c592f 100644 --- a/index.html +++ b/index.html @@ -1,158 +1,96 @@ - - - - - - - - - - - - - - - - - Countries Info - - - - - -
-
- - + + + + + + + + + + + + + + + + + + Countries Info + + + + + + +
+
+ -
- + +
+
+ -
-
-
- - +
+
+
+ + +
+
+
+ Filter by Region +
-
-
- Filter by Region - +
+
    +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
    • +
+
+
+
+
+ +
+
+
+
-
- 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 diff --git a/script.js b/script.js new file mode 100644 index 0000000..1694cca --- /dev/null +++ b/script.js @@ -0,0 +1,76 @@ +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 || "N/A"; + + 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"); + }); +}); + + +