From 653853388ff26160d17f788819614614aaddf9c3 Mon Sep 17 00:00:00 2001 From: Chen-kaduri Date: Sun, 15 Dec 2024 15:45:50 +0200 Subject: [PATCH 1/3] add new files to response to the web if we press --- details.html | 10 +++---- details.js | 44 ++++++++++++++++++++++++++++ index.html | 70 +++----------------------------------------- index.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 135 insertions(+), 71 deletions(-) create mode 100644 details.js create mode 100644 index.js diff --git a/details.html b/details.html index b584581..0425182 100644 --- a/details.html +++ b/details.html @@ -29,7 +29,7 @@ -
+
@@ -70,11 +70,11 @@

Where in the world?

-
-
+
+
- - + + diff --git a/details.js b/details.js new file mode 100644 index 0000000..13368ea --- /dev/null +++ b/details.js @@ -0,0 +1,44 @@ +document.addEventListener('DOMContentLoaded', function () { + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); + + if (!countryName) { + document.getElementById('country-name').innerHTML = '

No country selected!

'; + return; + } + + fetch('CountriesData.json') + .then(response => { + if (!response.ok) { + throw new Error('Failed to load JSON data'); + } + return response.json(); + }) + .then(countries => { + const country = countries.find(c => c.name.toLowerCase() === countryName.toLowerCase()); + if (country) { + const countryDetails = ` +

${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';  +       } + + document.getElementById('country-name').innerHTML = countryDetails; + } else { + document.getElementById('country-name').innerHTML = '

Country not found!

'; + } + }) + .catch(error => { + console.error('Error loading country data:', error); + document.getElementById('country-name').innerHTML = '

Error loading country data!

'; + }); + }); + \ No newline at end of file diff --git a/index.html b/index.html index f4afbf5..824e027 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 68dbefe..96aa640 100644 --- a/index.js +++ b/index.js @@ -12,25 +12,25 @@ fetch('CountriesData.json') // view the countries function displayCountries(countriesToDisplay) { - countriesContainer.innerHTML = ''; // Cleaning all the current HTML in the div - countriesToDisplay.forEach((country) => { - const countryDiv = document.createElement('div'); - countryDiv.className = 'country'; + countriesContainer.innerHTML = ''; // Cleaning all the current HTML in the div + countriesToDisplay.forEach((country) => { + const countryDiv = document.createElement('div'); + countryDiv.className = 'country'; - const countryLink = document.createElement('a'); - countryLink.href = `details.html?country=${country.name}`; - countryDiv.appendChild(countryLink); + const countryLink = document.createElement('a'); + countryLink.href = `details.html?country=${country.name}`; + countryDiv.appendChild(countryLink); - const countryflagDiv = document.createElement('div'); - countryflagDiv.className = 'country-flag'; + const countryflagDiv = document.createElement('div'); + countryflagDiv.className = 'country-flag'; - const imgFlag = document.createElement('img'); - imgFlag.src = `${country.flag}`; - imgFlag.alt = `${country.name}`; - countryflagDiv.appendChild(imgFlag); - countryLink.appendChild(countryflagDiv); + const imgFlag = document.createElement('img'); + imgFlag.src = `${country.flag}`; + imgFlag.alt = `${country.name}`; + countryflagDiv.appendChild(imgFlag); + countryLink.appendChild(countryflagDiv); - const countryInfo = document.createElement('div'); + const countryInfo = document.createElement('div'); countryInfo.className = 'country-info'; const countryH = document.createElement('h2'); @@ -65,6 +65,15 @@ fetch('CountriesData.json') displayCountries(allCountries); + //filter by write + function FilterByWrite(){ + const filterText=document.getElementById("filter-by-write").value.toLowerCase(); + //filter during writing + const filterCountries= allCountries.filter(country => Object.values(country).some + (value =>value.toString().toLowerCase().includes(filterText) ) ) + displayCountries(filterCountries); + } + document.getElementById("filter-by-write").addEventListener(`input`,FilterByWrite ); // filter by region const filterItems = document.querySelectorAll('#dropdown-wrapper ul li'); @@ -74,7 +83,7 @@ fetch('CountriesData.json') let filteredCountries; if (region === 'all') { - filteredCountries = allCountries; // כל המדינות + filteredCountries = allCountries; // all countries } else { filteredCountries = allCountries.filter((country) => { return country.region.toLowerCase() === region;