From c1517b1068fa919fb902e2757ee78bb08dceb01d Mon Sep 17 00:00:00 2001 From: Tal Sadan Date: Sun, 15 Dec 2024 15:44:13 +0200 Subject: [PATCH 1/5] added new files, filter function and fetch JSON --- details.html | 8 ++--- details.js | 41 ++++++++++++++++++++++++++ index.html | 72 ++++----------------------------------------- index.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 133 insertions(+), 70 deletions(-) create mode 100644 details.js create mode 100644 index.js diff --git a/details.html b/details.html index b584581..880aa0d 100644 --- a/details.html +++ b/details.html @@ -29,7 +29,7 @@ -
+
@@ -71,10 +71,10 @@

Where in the world?

-
+
- - + + diff --git a/details.js b/details.js new file mode 100644 index 0000000..996d057 --- /dev/null +++ b/details.js @@ -0,0 +1,41 @@ + + +// Fetch the JSON data +fetch('./CountriesData.json') + .then(response => response.json()) + .then(countries => { + // Get the country name from the URL parameter + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); + + // Find the country in the data + const country = countries.find(c => + c.name.toLowerCase() === countryName.toLowerCase() + ); + + // If the country is found, display its details + if (country) { + + const countryDetails = document.getElementById('country-name'); + countryDetails.innerHTML = ` +

${country.name}

+ ${country.name} Flag +

Population: ${country.population}

+

Region: ${country.region}

+

Capital: ${country.capital}

+ `; + + // remove the loader if the country is found + const loader = document.getElementById('loader'); + if (loader) { + loader.style.display = 'none'; + } + + } else { + // If country is not found, display a message + document.getElementById('country-name').innerHTML = "

Country not found!

"; + } + }) + .catch(error => { + console.error('Error loading the JSON data:', error); + }); diff --git a/index.html b/index.html index f4afbf5..9eddb9d 100644 --- a/index.html +++ b/index.html @@ -66,8 +66,8 @@

Where in the world?

placeholder="Search for a country..." />
-
-
+ diff --git a/index.js b/index.js index fb7e291..4713baf 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ fetch('CountriesData.json') return; } - // global veraible + // global variable let allCountries = countries; // view the countries @@ -39,6 +39,25 @@ fetch('CountriesData.json') displayCountries(allCountries); + // Filter by input + function filteredCountriesByInput() { + const filterText = document.getElementById('country-filter').value.toLowerCase(); + + // Filter the countries based on the input + const filteredCountries = allCountries.filter(country => + country.name.toLowerCase().includes(filterText) || // Match for name + country.capital.toLowerCase().includes(filterText) || // Match for capital + country.population.toString().includes(filterText) || // Match population + country.region.toLowerCase().includes(filterText) // Match region + ); + + // Display the filtered results + displayCountries(filteredCountries); + } + + // Add event listener to the input field + document.getElementById('country-filter').addEventListener('input', filteredCountriesByInput); + // filter by region const filterItems = document.querySelectorAll('#dropdown-wrapper ul li'); filterItems.forEach((item) => { @@ -47,7 +66,7 @@ fetch('CountriesData.json') let filteredCountries; if (region === 'all') { - filteredCountries = allCountries; + filteredCountries = allCountries; } else { filteredCountries = allCountries.filter((country) => { return country.region.toLowerCase() === region; @@ -79,4 +98,3 @@ document.addEventListener('DOMContentLoaded', function () { dropdownWrapper.classList.toggle('open'); }); }); - From d93e355900af6f41e300feec1d8fdec83fa9eaf4 Mon Sep 17 00:00:00 2001 From: Tal Sadan Date: Sun, 22 Dec 2024 12:16:18 +0200 Subject: [PATCH 4/5] change all the innerhtml inside the js to create element as reqired --- index.html | 2 +- index.js | 72 +++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 50 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index ebb5386..37c706d 100644 --- a/index.html +++ b/index.html @@ -63,8 +63,8 @@

Where in the world?