From d889e0547f4912a808c301d2b9967b3023ffdb7d Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Fri, 13 Dec 2024 11:06:05 +0200 Subject: [PATCH 1/3] created template card for countries --- index.html | 234 +++++++++++++++++++---------------------------------- 1 file changed, 84 insertions(+), 150 deletions(-) diff --git a/index.html b/index.html index f4afbf5..cae9e71 100644 --- a/index.html +++ b/index.html @@ -1,158 +1,92 @@ - - - - - - - - - - - - - - - - - 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 ef1e9925d27b0ea243c0ad855ea6b48bae799e41 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Fri, 13 Dec 2024 12:42:04 +0200 Subject: [PATCH 2/3] finished creating cards for each country using json --- index.html | 4 ++++ script.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 script.js diff --git a/index.html b/index.html index cae9e71..2ace4b1 100644 --- a/index.html +++ b/index.html @@ -87,6 +87,10 @@

Country Name

+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..fb9fff0 --- /dev/null +++ b/script.js @@ -0,0 +1,35 @@ +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 || "N/A"; + + grid.appendChild(card); + }); + }) + + .catch(error=>{ + console.error("Error loading countries data: ",error); + }); +}); \ No newline at end of file From 8ad44a0b26e1a6a07c69e0a82aae063b6b1c0249 Mon Sep 17 00:00:00 2001 From: AdiAmar1 <165654012+AdiAmar1@users.noreply.github.com> Date: Fri, 13 Dec 2024 22:12:18 +0200 Subject: [PATCH 3/3] finished details.js --- CountriesData.json | 4 +- details.html | 8 ++-- details.js | 39 ++++++++++++++++++ index.html | 2 +- script.js | 99 ++++++++++++++++++++++++++++++++-------------- 5 files changed, 117 insertions(+), 35 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..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 2ace4b1..a3c592f 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@

Where in the world?