diff --git a/CountriesData.json b/CountriesData.json index a6fc2a2..e76e28f 100644 --- a/CountriesData.json +++ b/CountriesData.json @@ -1,176 +1,355 @@ [ { + "flag": "https://flagcdn.com/ax.svg", "name": "Åland Islands", "population": 21225, "region": "Europe", - "capital": "Mariehamn" + "capital": "Mariehamn", + "subregion": "Northern Europe", + "topLevelDomain": [".ax"], + "currencies": ["Euro"], + "languages": ["Swedish"], + "borders": [] + }, { + "flag": "https://flagcdn.com/af.svg", "name": "Afghanistan", "population": 27657145, "region": "Asia", - "capital": "Kabul" + "capital": "Kabul", + "subregion": "Southern Asia", + "topLevelDomain": [" .af"], + "currencies": ["Afghan afghani"], + "languages": ["Pashto", "Uzbek", "Turkmen"], + "borders": ["Iran", "Pakistan", "Turkmenistan", "Uzbekistan", "Tajikistan", "China"] }, { + "flag": "https://flagcdn.com/al.svg", "name": "Albania", "population": 2886026, "region": "Europe", - "capital": "Tirana" + "capital": "Tirana", + "subregion": "Southern Europe", + "topLevelDomain": [".al"], + "currencies": ["Albanian lek"], + "languages": ["Albanian"], + "borders": ["Montenegro", "Kosovo", "Macedonia", "Greece"] }, { + "flag": "https://flagcdn.com/dz.svg", "name": "Algeria", "population": 40400000, "region": "Africa", - "capital": "Algiers" + "capital": "Algiers", + "subregion": "Northern Africa", + "topLevelDomain": [".dz"], + "currencies": ["Algerian dinar"], + "languages": ["Arabic"], + "borders": ["Tunisia", "Libya", "Niger", "Mali", "Mauritania", "Western Sahara", "Morocco"] + }, { + "flag": "https://flagcdn.com/as.svg", "name": "American Samoa", "population": 57100, "region": "Oceania", - "capital": "Pago Pago" + "capital": "Pago Pago", + "subregion": "Polynesia", + "topLevelDomain": [".as"], + "currencies": ["United State Dollar"], + "languages": ["English", "Samoan"], + "borders": [] }, { + "flag": "https://flagcdn.com/ad.svg", "name": "Andorra", "population": 78014, "region": "Europe", - "capital": "Andorra la Vella" + "capital": "Andorra la Vella", + "subregion": "Southern Europe", + "topLevelDomain": [".ad"], + "currencies": ["Euro"], + "languages": ["Catalan"], + "borders": ["France", "Spain"] }, { + "flag": "https://flagcdn.com/ao.svg", "name": "Angola", "population": 25868000, "region": "Africa", - "capital": "Luanda" + "capital": "Luanda", + "subregion": "Middle Africa", + "topLevelDomain": [".ao"], + "currencies": ["Angolan kwanza"], + "languages": ["Portuguese"], + "borders": ["Namibia", "Zambia", "Congo", "DRC", "Zambia"] }, { + "flag": "https://flagcdn.com/ai.svg", "name": "Anguilla", "population": 13452, - "region": "Americas", - "capital": "The Valley" + "region": "America", + "capital": "The Valley", + "subregion": "Caribbean", + "topLevelDomain": [".ai"], + "currencies": ["East Caribbean dollar"], + "languages": ["English"], + "borders": [] }, { + "flag": "https://flagcdn.com/aq.svg", "name": "Antarctica", "population": 1000, "region": "Polar", - "capital": "" + "capital": "", + "subregion": "", + "topLevelDomain": [".aq"], + "currencies": ["United States Dollar"], + "languages": ["English", "Russian"], + "borders": [] }, { + "flag": "https://flagcdn.com/il.svg", "name": "Israel", "population": 8527400, "region": "Asia", - "capital": "Jerusalem" + "capital": "Jerusalem", + "subregion": "Western Asia", + "topLevelDomain": [".il"], + "currencies": ["Israeli new shekel"], + "languages": ["Hebrew", "Arabic"], + "borders": ["Lebanon", "Syria", "Jordan", "Egypt"] }, { + "flag": "https://flagcdn.com/it.svg", "name": "Italy", "population": 60665551, "region": "Europe", - "capital": "Rome" + "capital": "Rome", + "subregion": "Southern Europe", + "topLevelDomain": [".it"], + "currencies": ["Euro"], + "languages": ["Italian"], + "borders": ["Austria", "France", "San Marino", "Slovenia", "Switzerland", "Vatican City"] + }, { + "flag": "https://flagcdn.com/jm.svg", "name": "Jamaica", "population": 2723246, - "region": "Americas", - "capital": "Kingston" + "region": "America", + "capital": "Kingston", + "subregion": "Caribbean", + "topLevelDomain": [".jm"], + "currencies": ["Jamaican dollar"], + "languages": ["English"], + "borders": [] }, { + "flag": "https://flagcdn.com/jp.svg", "name": "Japan", "population": 126960000, "region": "Asia", - "capital": "Tokyo" + "capital": "Tokyo", + "subregion": "Eastern Asia", + "topLevelDomain": [".jp"], + "currencies": ["Japanese yen"], + "languages": ["Japanese"], + "borders": [] }, { + "flag": "https://flagcdn.com/je.svg", "name": "Jersey", "population": 100800, "region": "Europe", - "capital": "Saint Helier" + "capital": "Saint Helier", + "subregion": "Northern Europe", + "topLevelDomain": [".je"], + "currencies": ["British pound", "Euro"], + "languages": ["English", "French"], + "borders": [] }, { + "flag": "https://flagcdn.com/jo.svg", "name": "Jordan", "population": 9531712, "region": "Asia", - "capital": "Amman" + "capital": "Amman", + "subregion": "Western Asia", + "topLevelDomain": [".jo"], + "currencies": ["Jordanian dinar"], + "languages": ["Arabic"], + "borders": ["Iraq", "Israel", "Saudi Arabia", "Syria"] }, { + "flag": "https://flagcdn.com/kz.svg", "name": "Kazakhstan", "population": 17753200, "region": "Asia", - "capital": "Astana" + "capital": "Astana", + "subregion": "Central Asia", + "topLevelDomain": [".kz"], + "currencies": ["Kazakhstani tenge"], + "languages": ["Kazakh", "Russian"], + "borders": ["China", "Kyrgyzstan", "Uzbekistan", "Russia", "Turkmenistan"] }, { + "flag": "https://flagcdn.com/ke.svg", "name": "Kenya", "population": 47251000, "region": "Africa", - "capital": "Nairobi" + "capital": "Nairobi", + "subregion": "Eastern Africa", + "topLevelDomain": [".ke"], + "currencies": ["Kenyan shilling"], + "languages": ["English", "Swahili"], + "borders": ["Ethiopia", "Somalia", "South Sudan", "Tanzania", "Uganda"] }, { + "flag": "https://flagcdn.com/ki.svg", "name": "Kiribati", "population": 113400, "region": "Oceania", - "capital": "South Tarawa" + "capital": "South Tarawa", + "subregion": "Micronesia", + "topLevelDomain": [".ki"], + "currencies": ["Australian dollar"], + "languages": ["English"], + "borders": [] }, { + "flag": "https://flagcdn.com/kw.svg", "name": "Kuwait", "population": 4183658, "region": "Asia", - "capital": "Kuwait City" + "capital": "Kuwait City", + "subregion": "Western Asia", + "topLevelDomain": [".kw"], + "currencies": ["Kuwaiti dinar"], + "languages": ["Arabic"], + "borders": ["Iraq", "Saudi Arabia"] }, { + "flag": "https://flagcdn.com/kg.svg", "name": "Kyrgyzstan", "population": 6047800, "region": "Asia", - "capital": "Bishkek" + "capital": "Bishkek", + "subregion": "Central Asia", + "topLevelDomain": [".kg"], + "currencies": ["Kyrgyzstani som"], + "languages": ["Kyrgyz", "Russian"], + "borders": ["China", "Kazakhstan", "Tajikistan", "Uzbekistan"] }, { + "flag": "https://flagcdn.com/la.svg", "name": "Laos", "population": 6492400, "region": "Asia", - "capital": "Vientiane" + "capital": "Vientiane", + "subregion": "South-Eastern Asia", + "topLevelDomain": [".la"], + "currencies": ["Lao kip"], + "languages": ["Lao"], + "borders": ["Burma", "Cambodia", "China", "Thailand", "Vietnam"] }, { + "flag": "https://flagcdn.com/lv.svg", "name": "Latvia", "population": 1961600, "region": "Europe", - "capital": "Riga" + "capital": "Riga", + "subregion": "Northern Europe", + "topLevelDomain": [".lv"], + "currencies": ["Euro"], + "languages": ["Latvian"], + "borders": ["Estonia", "Lithuania", "Russia", "Belarus"] + }, { + "flag": "https://flagcdn.com/lb.svg", "name": "Lebanon", "population": 5988000, "region": "Asia", - "capital": "Beirut" + "capital": "Beirut", + "subregion": "Western Asia", + "topLevelDomain": [".lb"], + "currencies": ["Lebanese pound"], + "languages": ["Arabic", "French"], + "borders": ["Israel", "Syria"] }, { + "flag": "https://flagcdn.com/ls.svg", "name": "Lesotho", "population": 1894194, "region": "Africa", - "capital": "Maseru" + "capital": "Maseru", + "subregion": "Southern Africa", + "topLevelDomain": [".ls"], + "currencies": ["Lesotho loti", "South African rand"], + "languages": ["English", "Southern Sotho"], + "borders": ["South Africa"] }, { + "flag": "https://flagcdn.com/lr.svg", "name": "Liberia", "population": 4615000, "region": "Africa", - "capital": "Monrovia" + "capital": "Monrovia", + "subregion": "Western Africa", + "topLevelDomain": [".lr"], + "currencies": ["Liberian dollar"], + "languages": ["English"], + "borders": ["Guinea", "Ivory Coast", "Sierra Leone"] }, { + "flag": "https://flagcdn.com/ly.svg", "name": "Libya", "population": 6385000, "region": "Africa", - "capital": "Tripoli" + "capital": "Tripoli", + "subregion": "Northern Africa", + "topLevelDomain": [".ly"], + "currencies": ["Libyan dinar"], + "languages": ["Arabic"], + "borders": ["Algeria", "Chad", "Egypt", "Niger", "Sudan", "Tunisia"] }, { + "flag": "https://flagcdn.com/li.svg", "name": "Liechtenstein", "population": 37623, "region": "Europe", - "capital": "Vaduz" + "capital": "Vaduz", + "subregion": "Western Europe", + "topLevelDomain": [".li"], + "currencies": ["Swiss franc"], + "languages": ["German"], + "borders": ["Austria", "Switzerland"] }, { + "flag": "https://flagcdn.com/lt.svg", "name": "Lithuania", "population": 2872294, "region": "Europe", - "capital": "Vilnius" + "capital": "Vilnius", + "subregion": "Northern Europe", + "topLevelDomain": [".lt"], + "currencies": ["Euro"], + "languages": ["Lithuanian"], + "borders": ["Belarus", "Latvia", "Poland", "Russia"] + }, { + "flag": "https://flagcdn.com/lu.svg", "name": "Luxembourg", "population": 576200, "region": "Europe", - "capital": "Luxembourg" + "capital": "Luxembourg", + "subregion": "Western Europe", + "topLevelDomain": [".lu"], + "currencies": ["Euro"], + "languages": ["French", "German", "Luxembourgish"], + "borders": ["Belgium", "France", "Germany"] } ] \ No newline at end of file diff --git a/common.js b/common.js new file mode 100644 index 0000000..e69de29 diff --git a/css/main.css b/css/main.css index f51ac8b..7dbc353 100644 --- a/css/main.css +++ b/css/main.css @@ -139,6 +139,8 @@ margin-bottom: 0; } + + .main .container { display: flex; flex-direction: column; @@ -222,4 +224,6 @@ font-size: 16px; text-transform: capitalize; margin-bottom: 15px; + color: black; } + diff --git a/details.html b/details.html index b584581..c42da2d 100644 --- a/details.html +++ b/details.html @@ -74,7 +74,6 @@

Where in the world?

- - + diff --git a/details.js b/details.js new file mode 100644 index 0000000..3602264 --- /dev/null +++ b/details.js @@ -0,0 +1,88 @@ +document.querySelector('.loader').style.display = 'none'; + + const urlParams = new URLSearchParams(window.location.search); + const countryName = urlParams.get('country'); + +if (countryName) { + fetch('./CountriesData.json') + .then(response => response.json()) + .then(data => { + const countryDetails = document.querySelector('.country-details'); + countryDetails.classList.add('country-details'); + + const selectedCountry = data.find(country => country.name === countryName); + console.log('selectedCountry:', selectedCountry); + + const countryInfo = document.createElement('div'); + countryInfo.classList.add('country-info'); + + const selectedCountryName = document.createElement('h1'); + selectedCountryName.innerHTML = selectedCountry.name; + selectedCountryName.classList.add('h1'); + + + const countryDataList = document.createElement('ul'); + countryDataList.classList.add('country-data-list'); + + const countryNativeName = document.createElement('li'); + countryNativeName.innerHTML = `Native Name: ${selectedCountry.name}`; ; + console.log('selectedCountry.name:', countryNativeName); + + const countryPopulation = document.createElement('li'); + countryPopulation.innerHTML = `Population: ${selectedCountry.population}`; + + const countryRegion = document.createElement('li'); + countryRegion.innerHTML = `Region: ${selectedCountry.region}`; + + const countrySubRegion = document.createElement('li'); + countrySubRegion.innerHTML = `Sub Region: ${selectedCountry.subregion}`; + + const countryCapital = document.createElement('li'); + countryCapital.innerHTML = `Capital : ${selectedCountry.capital}`; + + const countryDomain = document.createElement('li'); + countryDomain.innerHTML = `Top Level Domain : ${selectedCountry.topLevelDomain}`; + + const countryCurrencies = document.createElement('li'); + countryCurrencies.innerHTML = `Currencies : ${selectedCountry.currencies}`; + + const countryLanguages = document.createElement('li'); + countryLanguages.innerHTML = `Languages : ${selectedCountry.languages}`; + + const countryBorders = document.createElement('li'); + countryBorders.innerHTML = `Border Countries: `; + countryBorders.classList.add('border-countries'); + + selectedCountry.borders.forEach(border => { + const borderButton = document.createElement('button'); + borderButton.textContent = border; + borderButton.classList.add('btn'); + countryBorders.appendChild(borderButton); + }); + + const countryFlag = document.createElement('img'); + countryFlag.src = selectedCountry.flag; + countryFlag.alt = '${selectedCountry.name} Flag'; + countryFlag.classList.add('country-flag'); + + + countryDetails.appendChild(countryFlag); + countryDetails.appendChild(countryInfo); + + countryInfo.appendChild(selectedCountryName); + countryInfo.appendChild(countryDataList); + + countryDataList.appendChild(countryNativeName); + countryDataList.appendChild(countryPopulation); + countryDataList.appendChild(countryRegion); + countryDataList.appendChild(countrySubRegion); + countryDataList.appendChild(countryCapital); + countryDataList.appendChild(countryDomain); + countryDataList.appendChild(countryCurrencies); + countryDataList.appendChild(countryLanguages); + countryDataList.appendChild(countryBorders); + + + }) + .catch(error => console.error('Error fetching country details:', error)); + } diff --git a/index.html b/index.html index f4afbf5..ff79ac9 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ name="description" content="This is a simple project to display countries of the world with the ability to search for the country you want, be side the ability to show countries by continent." /> - @@ -57,7 +56,7 @@

Where in the world?

-
+
Where in the world? placeholder="Search for a country..." />
-
+
Filter by Region
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
@@ -87,72 +86,10 @@

Where in the world?

-
- -
- 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..6eb42c1 --- /dev/null +++ b/script.js @@ -0,0 +1,84 @@ + fetch('./CountriesData.json') + .then(response => response.json()) + .then(data => { + const container = document.querySelector('.countries-grid'); // המיכל שבו תוסיף את כל המדינות + + data.forEach(country => { + + + // יצירת לינק (a) עבור כל מדינה + const countryLink = document.createElement('a'); + countryLink.href = `details.html?country=${encodeURIComponent(country.name)}`; + countryLink.classList.add('country','scale-effect'); + countryLink.setAttribute('data-country-name', country.name); + + // יצירת div עבור דגל המדינה + const countryFlagDiv = document.createElement('div'); + countryFlagDiv.classList.add('country-flag'); + const countryFlagImg = document.createElement('img'); + countryFlagImg.src = country.flag; + countryFlagImg.alt = `${country.name} flag`; + countryFlagDiv.appendChild(countryFlagImg); + + // יצירת div עבור פרטי המדינה + const countryInfoDiv = document.createElement('div'); + countryInfoDiv.classList.add('country-info'); + + const countryTitle = document.createElement('h2'); + countryTitle.classList.add('country-title'); + countryTitle.textContent = country.name; + + const countryBriefList = document.createElement('ul'); + countryBriefList.classList.add('country-brief'); + + // יצירת פריטים (li) עבור אוכלוסייה, אזור ו-בירה + const populationLi = document.createElement('li'); + populationLi.innerHTML = `Population: ${country.population}`; + const regionLi = document.createElement('li'); + regionLi.innerHTML = `Region: ${country.region}`; + const capitalLi = document.createElement('li'); + capitalLi.innerHTML = `Capital: ${country.capital}`; + + // הוספת כל הפריטים לרשימה + countryBriefList.appendChild(populationLi); + countryBriefList.appendChild(regionLi); + countryBriefList.appendChild(capitalLi); + + // הוספת כל האלמנטים ל-countryInfoDiv + countryInfoDiv.appendChild(countryTitle); + countryInfoDiv.appendChild(countryBriefList); + + // הוספת כל האלמנטים ל-countryLink + + countryLink.appendChild(countryFlagDiv); + countryLink.appendChild(countryInfoDiv); + + + // הוספת ה-countryLink ל-countryDiv + container.appendChild(countryLink); + + }); + }) + .catch(error => console.error('Error fetching the JSON data:', error)); + +const dropDownListClicked = () => { + const dropDown = document.getElementsByClassName('dropdown-wrapper')[0]; + if (dropDown) { + dropDown.classList.toggle('open'); + } else { + console.error('Dropdown element not found'); + } + +} + +const filterByRegion = (region) => { + const countries = document.getElementsByClassName('country'); + for (let i = 0; i < countries.length; i++) { + const countryRegion = countries[i].getElementsByClassName('country-brief')[0].getElementsByTagName('li')[1].innerText.split(':')[1].trim(); + if (region === 'All' || countryRegion === region) { + countries[i].style.display = 'block'; + } else { + countries[i].style.display = 'none'; + } + } +}; \ No newline at end of file