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..0b313cc --- /dev/null +++ b/details.js @@ -0,0 +1,61 @@ + +// Fetch the JSON data +fetch('./CountriesData.json') + .then(response => response.json()) + .then(countries => { + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); + + const country = countries.find(c => + c.name.toLowerCase() === countryName.toLowerCase() + ); + + // If the country is found, display its details + if (country) { + const countryContainer = document.createElement('div'); + countryContainer.className = 'country-details'; + + const flagContainer = document.createElement('div'); + flagContainer.className = 'country-flag'; + const flagImage = document.createElement('img'); + flagImage.src = country.flag; + flagImage.alt = `${country.name} Flag`; + flagContainer.appendChild(flagImage); + + const infoContainer = document.createElement('div'); + infoContainer.className = 'country-info'; + + const countryTitle = document.createElement('h1'); + countryTitle.textContent = country.name; + infoContainer.appendChild(countryTitle); + + const details = [ + { label: 'Population', value: country.population.toLocaleString() }, + { label: 'Region', value: country.region }, + { label: 'Capital', value: country.capital || 'N/A' } + ]; + + details.forEach(detail => { + const detailElement = document.createElement('p'); + detailElement.innerHTML = `${detail.label}: ${detail.value}`; + infoContainer.appendChild(detailElement); + }); + + countryContainer.appendChild(flagContainer); + countryContainer.appendChild(infoContainer); + + document.body.appendChild(countryContainer); + + const loader = document.getElementById('loader'); + if (loader) { + loader.style.display = 'none'; + } + } else { + const errorMessage = document.createElement('p'); + errorMessage.textContent = 'Country not found!'; + document.body.appendChild(errorMessage); + } + }) + .catch(error => { + console.error('Error loading the JSON data:', error); + }); diff --git a/index.html b/index.html index f4afbf5..37c706d 100644 --- a/index.html +++ b/index.html @@ -64,10 +64,11 @@

Where in the world?

type="text" class="search-input" placeholder="Search for a country..." + id="country-filter" />
-
-
+