From f66367b74811d28bad021e39699c5bdc6b0409db Mon Sep 17 00:00:00 2001 From: hodaya123 Date: Thu, 12 Dec 2024 19:43:58 +0200 Subject: [PATCH 1/3] connect html to json --- CountriesData.json | 29 ++++++++++++++++++++ index.html | 68 +++------------------------------------------- index.js | 23 ++++++++++++++++ 3 files changed, 56 insertions(+), 64 deletions(-) create mode 100644 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/index.html b/index.html index f4afbf5..ee89f03 100644 --- a/index.html +++ b/index.html @@ -87,72 +87,12 @@

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/index.js b/index.js new file mode 100644 index 0000000..5fdfe86 --- /dev/null +++ b/index.js @@ -0,0 +1,23 @@ +fetch('./CountriesData.json') + .then(response => response.json()) + .then(countries => { + const countriesGrid = document.getElementById('countries-grid'); + + countries.forEach(({ name, flag, population, region, capital }) => { + countriesGrid.innerHTML += ` + +
+ ${name} Flag +
+
+

${name}

+
    +
  • Population: ${population}
    • +
  • Region: ${region}
    • +
  • Capital: ${capital}
    • +
+
+ `; + }); + }) + .catch(error => console.error('Error fetching JSON data:', error)); \ No newline at end of file From 0267e23b76d352dc8dce8fb2bf329f1e33db3286 Mon Sep 17 00:00:00 2001 From: hodaya123 Date: Sun, 15 Dec 2024 21:50:03 +0200 Subject: [PATCH 2/3] connect json --- css/details.css | 3 +++ details.html | 12 +++++++----- index.html | 4 +++- js/details.js | 40 ++++++++++++++++++++++++++++++++++++++++ index.js => js/index.js | 4 ++-- 5 files changed, 55 insertions(+), 8 deletions(-) create mode 100644 js/details.js rename index.js => js/index.js (85%) diff --git a/css/details.css b/css/details.css index 6108d5b..5f8f682 100644 --- a/css/details.css +++ b/css/details.css @@ -133,3 +133,6 @@ body { gap: 8px; flex-wrap: wrap; } +.hide { + /* display: none; */ +} diff --git a/details.html b/details.html index b584581..72074e0 100644 --- a/details.html +++ b/details.html @@ -29,11 +29,13 @@ -
+
-
+
- + diff --git a/index.html b/index.html index ee89f03..c702f4c 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,8 @@ + + Where in the world? - + diff --git a/js/details.js b/js/details.js new file mode 100644 index 0000000..b54fceb --- /dev/null +++ b/js/details.js @@ -0,0 +1,40 @@ +document.addEventListener('DOMContentLoaded', function() { + // 1. קבלת שם המדינה מתוך ה-URL + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); + console.log(countryName); // וודא שאתה מקבל את שם המדינה + + fetch('./CountriesData.json') + .then(response => response.json()) + .then(countries => { + + const country = countries.find(c => c.name === countryName); + // console.log(country) + + if (country) { + // 3. הצגת פרטי המדינה בעמוד + const countryDetails = document.getElementById('country-details'); + console.log(countryDetails) + + countryDetails.innerHTML = ` +
+

${country.name}

+ ${country.name} Flag +
+ + `; + } else { + // אם המדינה לא נמצאה + const countryDetails = document.getElementById('country-details'); + countryDetails.innerHTML = `

Country not found.

`; + } + }) + .catch(error => { + console.error('Error fetching country data:', error); + }); + }); + \ No newline at end of file diff --git a/index.js b/js/index.js similarity index 85% rename from index.js rename to js/index.js index 5fdfe86..7f65986 100644 --- a/index.js +++ b/js/index.js @@ -5,7 +5,7 @@ fetch('./CountriesData.json') countries.forEach(({ name, flag, population, region, capital }) => { countriesGrid.innerHTML += ` - +
${name} Flag
@@ -20,4 +20,4 @@ fetch('./CountriesData.json') `; }); }) - .catch(error => console.error('Error fetching JSON data:', error)); \ No newline at end of file + .catch(error => console.error('Error fetching JSON data:', error)); From b4c93fe3fb38ac79d93546867cbc37710cf9cd25 Mon Sep 17 00:00:00 2001 From: hodaya123 Date: Sun, 22 Dec 2024 15:55:00 +0200 Subject: [PATCH 3/3] add data from json and connected to index html and detailts.html --- details.html | 150 ++++++++++++++++++++++++++------------------------ index.html | 27 ++++++--- js/details.js | 73 ++++++++++++------------ js/index.js | 69 ++++++++++++++++------- 4 files changed, 180 insertions(+), 139 deletions(-) diff --git a/details.html b/details.html index 72074e0..c52c8fb 100644 --- a/details.html +++ b/details.html @@ -1,82 +1,86 @@ - - - - - - - - - - - - - - - - - Details Page - - - + + + + + + + + + + + + + + + + + Details Page + + + + + + - - - -
-
- - -
-
- -
-
- - - back + + + + +
+
+ +
-
-
-
-
-
- - - - +
+ + +
+
+ + + back + +
+
+ + +
+
+
+
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index c702f4c..3b251fb 100644 --- a/index.html +++ b/index.html @@ -12,8 +12,6 @@ - - Where in the world? Filter by Region
-
+
  • All
  • Africa
    • @@ -89,12 +87,27 @@

    Where in the world?

    -
    - +
    +
    - - + \ No newline at end of file diff --git a/js/details.js b/js/details.js index b54fceb..5c018dc 100644 --- a/js/details.js +++ b/js/details.js @@ -1,40 +1,37 @@ -document.addEventListener('DOMContentLoaded', function() { - // 1. קבלת שם המדינה מתוך ה-URL - const urlParams = new URLSearchParams(window.location.search); - const countryName = urlParams.get('country'); - console.log(countryName); // וודא שאתה מקבל את שם המדינה +document.addEventListener('DOMContentLoaded', () => { + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); - fetch('./CountriesData.json') - .then(response => response.json()) - .then(countries => { - - const country = countries.find(c => c.name === countryName); - // console.log(country) - - if (country) { - // 3. הצגת פרטי המדינה בעמוד - const countryDetails = document.getElementById('country-details'); - console.log(countryDetails) - - countryDetails.innerHTML = ` -
    -

    ${country.name}

    - ${country.name} Flag -
    -
      -
    • Population: ${country.population}
      • -
    • Region: ${country.region}
      • -
    • Capital: ${country.capital}
      • -
    - `; - } else { - // אם המדינה לא נמצאה - const countryDetails = document.getElementById('country-details'); - countryDetails.innerHTML = `

    Country not found.

    `; - } + 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(error => { - console.error('Error fetching country data:', error); - }); - }); - \ No newline at end of file + + + + }).catch((err) => { + console.log(`Error: ${err}` ) + }); + + +}); \ No newline at end of file diff --git a/js/index.js b/js/index.js index 7f65986..abc8ed9 100644 --- a/js/index.js +++ b/js/index.js @@ -1,23 +1,50 @@ -fetch('./CountriesData.json') - .then(response => response.json()) - .then(countries => { - const countriesGrid = document.getElementById('countries-grid'); +document.addEventListener('DOMContentLoaded', () => { + fetch('./CountriesData.json', { + method: 'GET', + }) + .then((response) => { + response.json().then((jsonResponse) => { + console.log(jsonResponse); + + const countriesInDiv = document.querySelector('.countries-grid'); - countries.forEach(({ name, flag, population, region, capital }) => { - countriesGrid.innerHTML += ` - -
    - ${name} Flag -
    -
    -

    ${name}

    -
      -
    • Population: ${population}
      • -
    • Region: ${region}
      • -
    • Capital: ${capital}
      • -
    -
    -     `; + 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}`); }); - }) - .catch(error => console.error('Error fetching JSON data:', error)); + + + const dropHeader = document.querySelector('.dropdown-header'); + const dropWrapper=document.querySelector('.dropdown-wrapper'); + dropHeader.addEventListener('click', ()=>{ + dropWrapper.classList.toggle('show'); + }); + + +});