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/index.html b/index.html index f4afbf5..a6f8b65 100644 --- a/index.html +++ b/index.html @@ -1,158 +1,132 @@ - - - - - - - - - - - - - - - - - Countries Info - - - - - -
-
- - + + + + + + + + + + + + + + + + + + Countries Info + + + + + + +
+
+ -
- + +
+
+ -
-
-
- - +
+
+
+ + +
+
+
+ Filter by Region + +
+
+
    +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
    • +
-
-
- Filter by Region - +
+
+
+ +
+
+
+ +
+ Afghanistan FLag
-
-
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • +
    +

    Afghanistan

    +
      +
    • population: 40218234
      • +
    • Region: Asia
      • +
    • capital: Kabul
    -
-
-
- -
-
-
- -
- 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
    • -
-
- -
-
-
- - + + +
+ Åland Islands FLag +
+
+

Åland Islands

+ +
+ + +
+ Aruba FLag +
+
+

Aruba

+ +
+ + +
+ Belize FLag +
+
+

Belize

+ +
+ + + + + + + + \ No newline at end of file diff --git a/js/common.js b/js/common.js new file mode 100644 index 0000000..1e00f03 --- /dev/null +++ b/js/common.js @@ -0,0 +1,121 @@ + +const dropdownWrapper = document.querySelector('.dropdown-wrapper'); +const dropdownHeader = document.querySelector('.dropdown-header'); +const dropdownBody = document.querySelector('.dropdown-body'); +const dropdownIcon = document.querySelector('.dropdown-header .icon'); + +const toggleDropdown = () => { + dropdownWrapper.classList.toggle('open'); +} + +const closeDropdownOnClickOutside = (event) => { + if (!dropdownWrapper.contains(event.target)) { + dropdownWrapper.classList.remove('open'); + } +} + +async function filterCountriesByRegion(region) { + try { + console.log('Filtering by region:', region); + + const response = await fetch('./CountriesData.json'); + const allCountries = await response.json(); + console.log('Fetched countries:', allCountries.length); + + const countriesGrid = document.querySelector('.countries-grid'); + countriesGrid.classList.remove('no-grid'); + + let filteredCountries; + if (region === 'all') { + filteredCountries = allCountries; + } else { + filteredCountries = allCountries.filter(country => + country.region.toLowerCase() === region.toLowerCase() + ); + } + + console.log('Filtered countries:', filteredCountries.length); + + countriesGrid.innerHTML = ''; + + if (filteredCountries.length === 0) { + console.log('No countries found for region:', region); + countriesGrid.classList.add('no-grid'); + return; + } + + filteredCountries.forEach(country => { + const countryElement = document.createElement('a'); + countryElement.href = '#'; + countryElement.className = 'country scale-effect'; + countryElement.setAttribute('data-country-name', country.name); + + countryElement.innerHTML = ` +
+ ${country.name} Flag +
+
+

${country.name}

+ +
+ `; + + countriesGrid.appendChild(countryElement); + }); + + console.log('Finished displaying countries'); + } catch (error) { + console.error('Error in filterCountriesByRegion:', error); + } +} + + +handleRegionSelect = (event) => { + if (event.target.tagName === 'LI') { + const selectedRegion = event.target.dataset.region; + console.log('Selected region:', selectedRegion); + + const headerText = dropdownHeader.querySelector('span'); + headerText.textContent = event.target.textContent; + + // מוצא את כל ה-li בתוך ה-ul של הדרופדאון + const items = dropdownBody.querySelectorAll('ul li'); + items.forEach(item => item.classList.remove('active')); + event.target.classList.add('active'); + + filterCountriesByRegion(selectedRegion); + dropdownWrapper.classList.remove('open'); + } +} + + +dropdownHeader.addEventListener('click', toggleDropdown); +document.addEventListener('click', closeDropdownOnClickOutside); +dropdownBody.addEventListener('click', handleRegionSelect); + + +const allRegionsOption = dropdownBody.querySelector('ul li[data-region="all"]'); +if (allRegionsOption) { + allRegionsOption.classList.add('active'); +} + + +document.addEventListener('DOMContentLoaded', () => { + filterCountriesByRegion('all'); +}); + +function handleCountryClick(event) { + event.preventDefault(); + + const countryElement = event.target.closest('.country'); + if (countryElement) { + const countryName = countryElement.getAttribute('data-country-name'); + window.location.href = `details.html?country=${encodeURIComponent(countryName)}`; + } +} + +document.querySelector('.countries-grid').addEventListener('click', handleCountryClick); \ No newline at end of file diff --git a/js/details.js b/js/details.js new file mode 100644 index 0000000..1415339 --- /dev/null +++ b/js/details.js @@ -0,0 +1,53 @@ +async function displayCountryDetails() { + try { + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); + + if (!countryName) { + throw new Error('Country name not provided'); + } + + const response = await fetch('./CountriesData.json'); + const allCountries = await response.json(); + + const country = allCountries.find(c => c.name === countryName); + + if (!country) { + throw new Error('Country not found'); + } + + const countryDetailsSection = document.querySelector('.country-details'); + countryDetailsSection.innerHTML = ` +
+ ${country.name} Flag +
+
+

${country.name}

+
+ +
+
+ `; + + const loader = document.querySelector('.loader'); + if (loader) { + loader.style.display = 'none'; + } + + } catch (error) { + console.error('Error loading country details:', error); + const countryDetailsSection = document.querySelector('.country-details'); + countryDetailsSection.innerHTML = ` +
+

Error loading country details

+

Please try again later

+
+ `; + } +} + +document.addEventListener('DOMContentLoaded', displayCountryDetails); \ No newline at end of file