From 90cdb6020f4f20be3029072172a049e30fd7cf46 Mon Sep 17 00:00:00 2001 From: Bar Yosef Tayar Mac Date: Thu, 12 Dec 2024 19:52:47 +0200 Subject: [PATCH 1/3] creating files and functionality --- CountriesData.json | 29 ++++++++++ css/main.css | 5 ++ details.html | 135 ++++++++++++++++++++------------------------- index.html | 79 +++----------------------- 4 files changed, 104 insertions(+), 144 deletions(-) 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/css/main.css b/css/main.css index f51ac8b..02a9bad 100644 --- a/css/main.css +++ b/css/main.css @@ -125,6 +125,11 @@ transform: translateY(-20px); } +.dropdown-body.on{ + opacity: 1; + visibility: visible; +} + .filters .dropdown-body li { padding: 8px 25px; text-transform: capitalize; diff --git a/details.html b/details.html index b584581..46a7cc4 100644 --- a/details.html +++ b/details.html @@ -1,80 +1,67 @@ - - - - - - - - - - - - - - - - - Details Page - - - -
- + + + + + + + + + + + + + + + + + + Details Page + + + + +
+ - - - -
-
- - -
-
- -
-
- - - back +
+ + + +
+
+ +
-
-
-
-
-
- - - - +
+ +
+
+ + + back + +
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html index f4afbf5..62f8c2e 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,7 @@

Where in the world?

-
+
Filter by Region
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
@@ -88,71 +89,9 @@

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
    • -
-
-
+ From 9d51e3bea39a6ad5791ba28bbd083e1995ad42ac Mon Sep 17 00:00:00 2001 From: Bar Yosef Tayar Mac Date: Thu, 12 Dec 2024 19:56:30 +0200 Subject: [PATCH 2/3] pr --- countryDetails.js | 24 +++++++++++++++ script.js | 76 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 countryDetails.js create mode 100644 script.js diff --git a/countryDetails.js b/countryDetails.js new file mode 100644 index 0000000..b175600 --- /dev/null +++ b/countryDetails.js @@ -0,0 +1,24 @@ +setTimeout(() => { + document.querySelector('.loader').style.display = "none" +}, 700) + +const displayCountryDetails = function () { + const { flag, name, population, region, capital } = (JSON.parse(localStorage.getItem("country")))[0] + + document.querySelector('.country-details').innerHTML = + ` +
+ +
+
+

${name}

+

Population: ${population.toLocaleString()}

+

Region: ${region}

+

Capital: ${capital}

+
+ ` +} + +window.onload = async function () { + displayCountryDetails() +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a4201fa --- /dev/null +++ b/script.js @@ -0,0 +1,76 @@ +let currentCountries = {} + +const getAllCountries = async function () { + const response = await fetch('CountriesData.json') + return await response.json() +} + +const displayCountries = function (data) { + const countriesGrid = document.querySelector('.countries-grid'); + countriesGrid.innerHTML = '' + + data.forEach(country => { + countriesGrid.innerHTML += + ` +
+ +
+ +
+

${country.name}

+
    +
  • + Population: + ${country.population.toLocaleString()} +
    • +
  • + Region: + ${country.region} +
    • +
  • + Capital: + ${country.capital} +
    • +
+
+ ` + }); +} + +const openDropDown = async function () { + document.querySelector('.dropdown-body').classList.toggle("on") + + document.querySelectorAll('.li-drop').forEach(countryLi => { + countryLi.addEventListener("click", async () => { + document.querySelector('.dropdown-header span').textContent = countryLi.textContent + let data = await getAllCountries() + if (countryLi.textContent !== "All") { + data = data.filter(country => country.region.includes(countryLi.textContent)); + } + currentCountries = data + displayCountries(data); + }) + }) +} + +const openDetailsPage = function (countryName) { + const countryData = currentCountries.filter(country => country.name == countryName) + localStorage.setItem("country", JSON.stringify(countryData)) + window.location.href = 'details.html'; +} + +const activateDarkMode = function () { + document.querySelector('body').classList.toggle('dark-theme') +} + +document.querySelector('.search-input').addEventListener('input', (e) => { + const data = currentCountries.filter(country => country.name.toLowerCase().includes(e.target.value.toLowerCase())) + displayCountries(data) +}) + +window.onload = async function () { + const data = await getAllCountries(); + currentCountries = data + displayCountries(data) +} + From fc775fc9fa78f913ce24f3ef8475e2da576bf6a9 Mon Sep 17 00:00:00 2001 From: Bar Yosef Tayar Mac Date: Thu, 12 Dec 2024 20:01:33 +0200 Subject: [PATCH 3/3] update --- script.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index a4201fa..194b182 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,6 @@ +const $ = (selector) => document.querySelector(selector); +const $$ = (selector) => document.querySelectorAll(selector) + let currentCountries = {} const getAllCountries = async function () { @@ -6,7 +9,7 @@ const getAllCountries = async function () { } const displayCountries = function (data) { - const countriesGrid = document.querySelector('.countries-grid'); + const countriesGrid = $('.countries-grid'); countriesGrid.innerHTML = '' data.forEach(country => { @@ -38,11 +41,11 @@ const displayCountries = function (data) { } const openDropDown = async function () { - document.querySelector('.dropdown-body').classList.toggle("on") + $('.dropdown-body').classList.toggle("on") - document.querySelectorAll('.li-drop').forEach(countryLi => { + $$('.li-drop').forEach(countryLi => { countryLi.addEventListener("click", async () => { - document.querySelector('.dropdown-header span').textContent = countryLi.textContent + $('.dropdown-header span').textContent = countryLi.textContent let data = await getAllCountries() if (countryLi.textContent !== "All") { data = data.filter(country => country.region.includes(countryLi.textContent)); @@ -60,10 +63,10 @@ const openDetailsPage = function (countryName) { } const activateDarkMode = function () { - document.querySelector('body').classList.toggle('dark-theme') + $('body').classList.toggle('dark-theme') } -document.querySelector('.search-input').addEventListener('input', (e) => { +$('.search-input').addEventListener('input', (e) => { const data = currentCountries.filter(country => country.name.toLowerCase().includes(e.target.value.toLowerCase())) displayCountries(data) })