diff --git a/details.html b/details.html index b584581..3fc0f95 100644 --- a/details.html +++ b/details.html @@ -9,32 +9,26 @@ /> - - - - Details Page -
- -
-
@@ -74,7 +66,8 @@

Where in the world?

- - + + diff --git a/index.html b/index.html index f4afbf5..c7c9bbe 100644 --- a/index.html +++ b/index.html @@ -9,26 +9,21 @@ /> - - - - Countries Info - -
-
@@ -72,87 +65,17 @@

Where in the world?

-
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • -
- +
- -
- 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/script.js b/script.js new file mode 100644 index 0000000..a5a61c9 --- /dev/null +++ b/script.js @@ -0,0 +1,167 @@ +const countriesGrid = document.querySelector('.countries-grid'); +let countryFetchedData = null; + +async function fetchCountriesData() { + if (countryFetchedData) { + return; + } + try { + const response = await fetch('./CountriesData.json'); + if (!response.ok) { + throw `Failed to fetch countries data with status - ${response.status}`; + } + countryFetchedData = await response.json(); + } catch (error) { + console.error('Error fetching countries data:', error); + } +} + +function getDropdownsRegions(data) { + const dropdownRegionFilter = document.querySelector('.dropdown-body'); + const uniqueRegionsSet = new Set(data.map(country => country.region)); + const uniqueRegions = [...uniqueRegionsSet] + + const dropdownList = document.createElement('ul'); + const allOption = document.createElement('li'); + allOption.setAttribute('data-region', 'all'); + allOption.textContent = 'All'; + dropdownList.appendChild(allOption); + + uniqueRegions.forEach(region => { + const dropdownItem = document.createElement('li'); + dropdownItem.setAttribute('data-region', region); + dropdownItem.textContent = region; + dropdownList.appendChild(dropdownItem); + }); + dropdownRegionFilter.appendChild(dropdownList); +} + +function getSearchdata() { + const searchInput = document.querySelector('.search-input'); + searchInput.addEventListener('input', (e) => { + searchValue = e.target.value; + const filteredData = filterDataSearch(countryFetchedData, searchValue); + countriesGrid.innerHTML = ''; + analyzeMainContainer(filteredData); + }); +} + +function filterDataSearch(data, searchValue) { + return data.filter(({ name }) => name.toLowerCase().includes(searchValue.toLowerCase())); +} + +function analyzeMainContainer(data) { + data.forEach(({ name, flag, population, region, capital }) => { + const countryCard = document.createElement('a'); + countryCard.href = './details.html'; + countryCard.addEventListener('click', function () { + const countryData = { name, flag, population, region, capital }; + localStorage.setItem('countryDetails', JSON.stringify(countryData)); + }); + + countryCard.className = 'country scale-effect'; + countryCard.setAttribute('data-country-name', name); + + countryCard.innerHTML = ` +
+ ${name} Flag +
+
+

${name}

+ +
`; + + countriesGrid.appendChild(countryCard); + }); +} + +function handleDropdownClick() { + const dropdownWrapper = document.querySelector('.dropdown-wrapper'); + dropdownWrapper.addEventListener('click', function () { + this.classList.toggle('open'); + }); + + const dropdownItems = dropdownWrapper.querySelector('.dropdown-body ul'); + dropdownItems.addEventListener('click', function (e) { + e.stopPropagation(); + const selectedRegion = e.target.getAttribute('data-region'); + if (selectedRegion) { + dropdownWrapper.classList.remove('open'); + getCountriesByRegion(selectedRegion); + } + }); +} + +function getCountriesByRegion(region) { + let selectedDropdoenOrigin; + if (region === 'all') { + selectedDropdoenOrigin = countryFetchedData; + } else { + selectedDropdoenOrigin = countryFetchedData.filter(country => country.region === region); + } + countriesGrid.innerHTML = ''; + analyzeMainContainer(selectedDropdoenOrigin); +} + +async function displayData() { + await fetchCountriesData(); + if (countryFetchedData) { + analyzeMainContainer(countryFetchedData); + getDropdownsRegions(countryFetchedData); + getSearchdata(); + handleDropdownClick(); + } + else { + console.error('Error display countries data'); + } +} +displayData(); + +function displayCountryDetails() { + const countryInfo = document.querySelector('.country-details'); + const countryData = JSON.parse(localStorage.getItem('countryDetails')); + + if (countryData) { + const { name, flag, population, region, capital } = countryData; + const countryDetailsHTML = ` +
+ ${name} Flag +
+
+

${name}

+ +
`; + + countryInfo.innerHTML = countryDetailsHTML; + } else { + countryInfo.innerHTML = '

No country selected

'; + } +} + +function handleLoaderSpinner() { + const loaderSpinner = document.querySelector('.loader'); + window.addEventListener('load', () => { + setTimeout(() => { + loaderSpinner.style.display = 'none'; + }, 700); + }); +} + +function handleSwitchThemeMode() { + const themeSwitcherButton = document.querySelector('.theme-toggle'); + themeSwitcherButton.addEventListener('click', function () { + document.body.classList.toggle('dark-theme'); + }); +} + +handleSwitchThemeMode(); +displayCountryDetails(); +handleLoaderSpinner();