From 79d4d0b5b9e059db761e18671daa2c15e6f87ee5 Mon Sep 17 00:00:00 2001 From: NoamElisha Date: Mon, 16 Dec 2024 23:09:00 +0200 Subject: [PATCH] working on import data from json --- CountriesData.json | 29 +++++++++ details.html | 148 +++++++++++++++++++++++---------------------- index.html | 81 ++++++------------------- js/details.js | 42 +++++++++++++ js/index.js | 42 +++++++++++++ 5 files changed, 208 insertions(+), 134 deletions(-) create mode 100644 js/details.js create mode 100644 js/index.js 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/details.html b/details.html index b584581..4ec5ab2 100644 --- a/details.html +++ b/details.html @@ -1,80 +1,86 @@ - - - - - - - - - - - - - - - - - Details Page - - - -
+ + + + + + + + + + + + + + + + + Details Page + + + + + + + - - -
-
- - -
-
- -
-
- - - back +
--> + + + + +
+
+ +
-
-
-
-
-
- - - +
+ + +
+
+ + + back + +
+
+ + +
+
+
+
+
+ + diff --git a/index.html b/index.html index f4afbf5..4219022 100644 --- a/index.html +++ b/index.html @@ -88,71 +88,26 @@

Where in the world?

- -
- 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
    • -
-
- +
+ diff --git a/js/details.js b/js/details.js new file mode 100644 index 0000000..64c3917 --- /dev/null +++ b/js/details.js @@ -0,0 +1,42 @@ +document.addEventListener('DOMContentLoaded', () => { + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); + + fetch('./CountriesData.json', { + method: 'GET' + }).then((response) => { + response.json().then((data) => { + console.log(data) + + const country = data.find(c => c.name === countryName) + + const countryDetailsSection = document.querySelector('.country-details'); + + countryDetailsSection.innerHTML = ` +
+ ${country.name} Flag +
+
+

${country.name}

+
    +
  • Population: ${country.population}
    • +
  • Region: ${country.region}
    • +
  • Capital: ${country.capital}
    • +
+
+ `; + }) + + + + + + + + + }).catch((err) => { + console.log(`Error: ${err}` ) + }); + + +}); \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..d45f13d --- /dev/null +++ b/js/index.js @@ -0,0 +1,42 @@ +document.addEventListener('DOMContentLoaded', () => { + fetch('./CountriesData.json', { + method: 'GET', + }) + .then((response) => { + response.json().then((jsonResponse) => { + console.log(jsonResponse); + + const countriesInDiv = document.querySelector('.countries-grid'); + + if (!countriesInDiv) { + console.error("Error: '.countries-grid' element not found in the DOM."); + return; + } + + jsonResponse.forEach((country) => { + countriesInDiv.innerHTML += ` + +
+ ${country.name} Flag +
+
+
    +
  • population: ${country.population}
    • +
  • Region: ${country.region}
    • +
  • capital: ${country.capital}
    • +
+
+ + `; + }); + }); + }) + .catch((err) => { + console.log(`Error: ${err}`); + }); + }); + \ No newline at end of file