From 52254491efeb817a926f9b809c74d77dc3a6d00f Mon Sep 17 00:00:00 2001 From: roiyraz88 Date: Fri, 13 Dec 2024 20:19:04 +0200 Subject: [PATCH 1/2] My version for the website. Would love for a CR :) --- CountriesData.json | 437 ++++++++++++++++++++++++++++---------- css/details.css | 21 +- css/main.css | 4 + index.html | 86 ++------ js/common.js | 7 + js/details.js | 78 +++++++ js/index.js | 99 +++++++++ scss/_countries-grid.scss | 1 + scss/_filters.scss | 2 + scss/_global.scss | 2 + 10 files changed, 546 insertions(+), 191 deletions(-) create mode 100644 js/common.js create mode 100644 js/details.js create mode 100644 js/index.js diff --git a/CountriesData.json b/CountriesData.json index a6fc2a2..2c4a433 100644 --- a/CountriesData.json +++ b/CountriesData.json @@ -1,176 +1,379 @@ [ { - "name": "Åland Islands", - "population": 21225, - "region": "Europe", - "capital": "Mariehamn" + "name": "Åland Islands", + "nativeName": "Åland", + "population": 21225, + "region": "Europe", + "subregion": "Northern Europe", + "capital": "Mariehamn", + "alpha2Code": "AX", + "topLevelDomain": [".ax"], + "currencies": ["Euro"], + "languages": ["Swedish"], + "borders": [] }, { - "name": "Afghanistan", - "population": 27657145, - "region": "Asia", - "capital": "Kabul" + "name": "Afghanistan", + "nativeName": "افغانستان", + "population": 27657145, + "region": "Asia", + "subregion": "Southern Asia", + "capital": "Kabul", + "alpha2Code": "AF", + "topLevelDomain": [".af"], + "currencies": ["Afghani"], + "languages": ["Pashto", "Dari"], + "borders": ["Iran", "Pakistan", "Turkmenistan", "Uzbekistan", "Tajikistan", "China"] }, { - "name": "Albania", - "population": 2886026, - "region": "Europe", - "capital": "Tirana" + "name": "Albania", + "nativeName": "Shqipëria", + "population": 2886026, + "region": "Europe", + "subregion": "Southern Europe", + "capital": "Tirana", + "alpha2Code": "AL", + "topLevelDomain": [".al"], + "currencies": ["Lek"], + "languages": ["Albanian"], + "borders": ["Montenegro", "Kosovo", "North Macedonia", "Greece"] }, { - "name": "Algeria", - "population": 40400000, - "region": "Africa", - "capital": "Algiers" + "name": "Algeria", + "nativeName": "الجزائر", + "population": 40400000, + "region": "Africa", + "subregion": "Northern Africa", + "capital": "Algiers", + "alpha2Code": "DZ", + "topLevelDomain": [".dz"], + "currencies": ["Dinar"], + "languages": ["Arabic", "Tamazight"], + "borders": ["Tunisia", "Libya", "Niger", "Mali", "Mauritania", "Western Sahara", "Morocco"] }, { - "name": "American Samoa", - "population": 57100, - "region": "Oceania", - "capital": "Pago Pago" + "name": "American Samoa", + "nativeName": "Amerika Sāmoa", + "population": 57100, + "region": "Oceania", + "subregion": "Polynesia", + "capital": "Pago Pago", + "alpha2Code": "AS", + "topLevelDomain": [".as"], + "currencies": ["US Dollar"], + "languages": ["English", "Samoan"], + "borders": [] }, { - "name": "Andorra", - "population": 78014, - "region": "Europe", - "capital": "Andorra la Vella" + "name": "Andorra", + "nativeName": "Andorra", + "population": 78014, + "region": "Europe", + "subregion": "Southern Europe", + "capital": "Andorra la Vella", + "alpha2Code": "AD", + "topLevelDomain": [".ad"], + "currencies": ["Euro"], + "languages": ["Catalan"], + "borders": ["France", "Spain"] }, { - "name": "Angola", - "population": 25868000, - "region": "Africa", - "capital": "Luanda" + "name": "Angola", + "nativeName": "Angola", + "population": 25868000, + "region": "Africa", + "subregion": "Middle Africa", + "capital": "Luanda", + "alpha2Code": "AO", + "topLevelDomain": [".ao"], + "currencies": ["Kwanza"], + "languages": ["Portuguese"], + "borders": ["Namibia", "Democratic Republic of the Congo", "Zambia"] }, { - "name": "Anguilla", - "population": 13452, - "region": "Americas", - "capital": "The Valley" + "name": "Anguilla", + "nativeName": "Anguilla", + "population": 13452, + "region": "Americas", + "subregion": "Caribbean", + "capital": "The Valley", + "alpha2Code": "AI", + "topLevelDomain": [".ai"], + "currencies": ["East Caribbean Dollar"], + "languages": ["English"], + "borders": [] }, { - "name": "Antarctica", - "population": 1000, - "region": "Polar", - "capital": "" + "name": "Antarctica", + "nativeName": "Antarctica", + "population": 1000, + "region": "Polar", + "subregion": "", + "capital": "", + "alpha2Code": "AQ", + "topLevelDomain": [".aq"], + "currencies": [], + "languages": [], + "borders": [] }, { - "name": "Israel", - "population": 8527400, - "region": "Asia", - "capital": "Jerusalem" + "name": "Israel", + "nativeName": "ישראל", + "population": 8527400, + "region": "Asia", + "subregion": "Western Asia", + "capital": "Jerusalem", + "alpha2Code": "IL", + "topLevelDomain": [".il"], + "currencies": ["Shekel"], + "languages": ["Hebrew", "Arabic"], + "borders": ["Lebanon", "Syria", "Jordan", "Egypt"] }, { - "name": "Italy", - "population": 60665551, - "region": "Europe", - "capital": "Rome" + "name": "Italy", + "nativeName": "Italia", + "population": 60665551, + "region": "Europe", + "subregion": "Southern Europe", + "capital": "Rome", + "alpha2Code": "IT", + "topLevelDomain": [".it"], + "currencies": ["Euro"], + "languages": ["Italian"], + "borders": ["France", "Switzerland", "Austria", "Slovenia"] }, { - "name": "Jamaica", - "population": 2723246, - "region": "Americas", - "capital": "Kingston" + "name": "Jamaica", + "nativeName": "Jamaica", + "population": 2723246, + "region": "Americas", + "subregion": "Caribbean", + "capital": "Kingston", + "alpha2Code": "JM", + "topLevelDomain": [".jm"], + "currencies": ["Jamaican Dollar"], + "languages": ["English"], + "borders": [] }, { - "name": "Japan", - "population": 126960000, - "region": "Asia", - "capital": "Tokyo" + "name": "Japan", + "nativeName": "日本", + "population": 126960000, + "region": "Asia", + "subregion": "Eastern Asia", + "capital": "Tokyo", + "alpha2Code": "JP", + "topLevelDomain": [".jp"], + "currencies": ["Japanese Yen"], + "languages": ["Japanese"], + "borders": [] }, { - "name": "Jersey", - "population": 100800, - "region": "Europe", - "capital": "Saint Helier" + "name": "Jersey", + "nativeName": "Jersey", + "population": 100800, + "region": "Europe", + "subregion": "Northern Europe", + "capital": "Saint Helier", + "alpha2Code": "JE", + "topLevelDomain": [".je"], + "currencies": ["British Pound", "Jersey Pound"], + "languages": ["English", "French"], + "borders": [] }, { - "name": "Jordan", - "population": 9531712, - "region": "Asia", - "capital": "Amman" + "name": "Jordan", + "nativeName": "الأردن", + "population": 9531712, + "region": "Asia", + "subregion": "Western Asia", + "capital": "Amman", + "alpha2Code": "JO", + "topLevelDomain": [".jo"], + "currencies": ["Jordanian Dinar"], + "languages": ["Arabic"], + "borders": ["Iraq","Israel","Saudi Arabia","Syria"] }, { - "name": "Kazakhstan", - "population": 17753200, - "region": "Asia", - "capital": "Astana" + "name": "Kazakhstan", + "nativeName": "Қазақстан", + "population": 17753200, + "region": "Asia", + "subregion": "Central Asia", + "capital": "Astana", + "alpha2Code": "KZ", + "topLevelDomain": [".kz", ".қаз"], + "currencies": ["Tenge"], + "languages": ["Kazakh", "Russian"], + "borders": ["China", "Kyrgyzstan", "Uzbekistan", "Turkmenistan", "Russia"] }, { - "name": "Kenya", - "population": 47251000, - "region": "Africa", - "capital": "Nairobi" + "name": "Kenya", + "nativeName": "Kenya", + "population": 47251000, + "region": "Africa", + "subregion": "Eastern Africa", + "capital": "Nairobi", + "alpha2Code": "KE", + "topLevelDomain": [".ke"], + "currencies": ["Kenyan Shilling"], + "languages": ["English", "Swahili"], + "borders": ["Ethiopia", "Somalia", "South Sudan", "Tanzania", "Uganda"] }, { - "name": "Kiribati", - "population": 113400, - "region": "Oceania", - "capital": "South Tarawa" + "name": "Kiribati", + "nativeName": "Kiribati", + "population": 113400, + "region": "Oceania", + "subregion": "Micronesia", + "capital": "South Tarawa", + "alpha2Code": "KI", + "topLevelDomain": [".ki"], + "currencies": ["Australian Dollar"], + "languages": ["English"], + "borders": [] }, { - "name": "Kuwait", - "population": 4183658, - "region": "Asia", - "capital": "Kuwait City" + "name": "Kuwait", + "nativeName": "الكويت", + "population": 4183658, + "region": "Asia", + "subregion": "Western Asia", + "capital": "Kuwait City", + "alpha2Code": "KW", + "topLevelDomain": [".kw"], + "currencies": ["Kuwaiti Dinar"], + "languages": ["Arabic"], + "borders": ["Iraq", "Saudi Arabia"] }, { - "name": "Kyrgyzstan", - "population": 6047800, - "region": "Asia", - "capital": "Bishkek" + "name": "Kyrgyzstan", + "nativeName": "Кыргызстан", + "population": 6047800, + "region": "Asia", + "subregion": "Central Asia", + "capital": "Bishkek", + "alpha2Code": "KG", + "topLevelDomain": [".kg"], + "currencies": ["Kyrgyzstani Som"], + "languages": ["Kyrgyz", "Russian"], + "borders": ["Kazakhstan", "Uzbekistan", "Tajikistan", "China"] }, { - "name": "Laos", - "population": 6492400, - "region": "Asia", - "capital": "Vientiane" + "name": "Lao People's Democratic Republic", + "nativeName": "ສປປລາວ", + "population": 6492400, + "region": "Asia", + "subregion": "South-Eastern Asia", + "capital": "Vientiane", + "alpha2Code": "LA", + "topLevelDomain": [".la"], + "currencies": ["Lao Kip"], + "languages": ["Lao"], + "borders": ["Myanmar", "Cambodia", "China", "Thailand", "Vietnam"] }, { - "name": "Latvia", - "population": 1961600, - "region": "Europe", - "capital": "Riga" + "name": "Latvia", + "nativeName": "Latvija", + "population": 1961600, + "region": "Europe", + "subregion": "Northern Europe", + "capital": "Riga", + "alpha2Code": "LV", + "topLevelDomain": [".lv"], + "currencies": ["Euro"], + "languages": ["Latvian"], + "borders": ["Estonia", "Lithuania", "Belarus", "Russia"] }, { - "name": "Lebanon", - "population": 5988000, - "region": "Asia", - "capital": "Beirut" + "name": "Lebanon", + "nativeName": "لبنان", + "population": 5988000, + "region": "Asia", + "subregion": "Western Asia", + "capital": "Beirut", + "alpha2Code": "LB", + "topLevelDomain": [".lb"], + "currencies": ["Lebanese Pound"], + "languages": ["Arabic", "French"], + "borders": ["Israel", "Syria"] }, { - "name": "Lesotho", - "population": 1894194, - "region": "Africa", - "capital": "Maseru" + "name": "Lesotho", + "nativeName": "Lesotho", + "population": 1894194, + "region": "Africa", + "subregion": "Southern Africa", + "capital": "Maseru", + "alpha2Code": "LS", + "topLevelDomain": [".ls"], + "currencies": ["Lesotho Loti", "South African Rand"], + "languages": ["English", "Southern Sotho"], + "borders": ["South Africa"] }, { - "name": "Liberia", - "population": 4615000, - "region": "Africa", - "capital": "Monrovia" + "name": "Liberia", + "nativeName": "Liberia", + "population": 4615000, + "region": "Africa", + "subregion": "Western Africa", + "capital": "Monrovia", + "alpha2Code": "LR", + "topLevelDomain": [".lr"], + "currencies": ["Liberian Dollar"], + "languages": ["English"], + "borders": ["Guinea", "Ivory Coast", "Sierra Leone"] }, { - "name": "Libya", - "population": 6385000, - "region": "Africa", - "capital": "Tripoli" + "name": "Libya", + "nativeName": "دولة ليبيا", + "population": 6385000, + "region": "Africa", + "subregion": "Northern Africa", + "capital": "Tripoli", + "alpha2Code": "LY", + "topLevelDomain": [".ly"], + "currencies": ["Libyan Dinar"], + "languages": ["Arabic"], + "borders": ["Algeria", "Chad", "Egypt", "Niger", "Sudan", "Tunisia"] }, { - "name": "Liechtenstein", - "population": 37623, - "region": "Europe", - "capital": "Vaduz" + "name": "Liechtenstein", + "nativeName": "Liechtenstein", + "population": 37623, + "region": "Europe", + "subregion": "Western Europe", + "capital": "Vaduz", + "alpha2Code": "LI", + "topLevelDomain": [".li"], + "currencies": ["Swiss Franc"], + "languages": ["German"], + "borders": ["Austria", "Switzerland"] }, { - "name": "Lithuania", - "population": 2872294, - "region": "Europe", - "capital": "Vilnius" + "name": "Lithuania", + "nativeName": "Lietuva", + "population": 2872294, + "region": "Europe", + "subregion": "Northern Europe", + "capital": "Vilnius", + "alpha2Code": "LT", + "topLevelDomain": [".lt"], + "currencies": ["Euro"], + "languages": ["Lithuanian"], + "borders": ["Belarus", "Latvia", "Poland", "Russia"] }, { - "name": "Luxembourg", - "population": 576200, - "region": "Europe", - "capital": "Luxembourg" + "name": "Luxembourg", + "nativeName": "Luxembourg", + "population": 576200, + "region": "Europe", + "subregion": "Western Europe", + "capital": "Luxembourg", + "alpha2Code": "LU", + "topLevelDomain": [".lu"], + "currencies": ["Euro"], + "languages": ["French", "German", "Luxembourgish"], + "borders": ["Belgium", "France", "Germany"] } -] \ No newline at end of file +] diff --git a/css/details.css b/css/details.css index 6108d5b..063bc4e 100644 --- a/css/details.css +++ b/css/details.css @@ -66,7 +66,7 @@ body { } .country-info { - padding: 40px 0; + padding: 0px 0; } .country-info h1 { @@ -133,3 +133,22 @@ body { gap: 8px; flex-wrap: wrap; } + +.country-info { + display: flex; + flex-wrap: wrap; +} + +.country-data-list { + gap: 25px; + display: flex; + flex-wrap: wrap; +} + +.border-countries { + display: flex; + gap: 10px; + flex-wrap: wrap; +} + + diff --git a/css/main.css b/css/main.css index f51ac8b..dea5c14 100644 --- a/css/main.css +++ b/css/main.css @@ -223,3 +223,7 @@ text-transform: capitalize; margin-bottom: 15px; } + +.hidden-country { + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html index f4afbf5..0baddbc 100644 --- a/index.html +++ b/index.html @@ -67,18 +67,18 @@

Where in the world?

/>
-
- Filter by Region +
+ Filter by Region
-
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • +
      +
    • All
      • +
    • Africa
      • +
    • America
      • +
    • Asia
      • +
    • Europe
      • +
    • Oceania
@@ -87,72 +87,12 @@

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/js/common.js b/js/common.js new file mode 100644 index 0000000..09a7858 --- /dev/null +++ b/js/common.js @@ -0,0 +1,7 @@ +const handleCountryClick = (country, event) => { + event.preventDefault(); + + localStorage.setItem('selectedCountry', JSON.stringify(country)); + window.location.href = './details.html'; + + } \ No newline at end of file diff --git a/js/details.js b/js/details.js new file mode 100644 index 0000000..a0d3c6e --- /dev/null +++ b/js/details.js @@ -0,0 +1,78 @@ +document.querySelector('.loader').style.display = 'none'; + +document.addEventListener('DOMContentLoaded', () => { + + const selectedCountry = JSON.parse(localStorage.getItem('selectedCountry')); + + if (selectedCountry) { + + const countryDetails = document.querySelector('.country-details'); + countryDetails.classList.add('country-details'); + + const countryInfo = document.createElement('div'); + countryInfo.classList.add('country-info'); + + const countryName = document.createElement('h1'); + countryName.textContent = selectedCountry.name; + countryName.classList.add('h1'); + + const countryDataList = document.createElement('ul'); + countryDataList.classList.add('country-data-list'); + + const countryNativeName = document.createElement('li'); + countryNativeName.innerHTML = `Native Name: ${selectedCountry.nativeName}`; + + 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 = `https://flagcdn.com/${selectedCountry.alpha2Code.toLowerCase()}.svg`; + countryFlag.alt = `${selectedCountry.name} Flag`; + countryFlag.classList.add('country-flag'); + + countryDetails.appendChild(countryFlag); + countryDetails.appendChild(countryInfo); + + countryInfo.appendChild(countryName); + 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); + } +}); diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..591a74f --- /dev/null +++ b/js/index.js @@ -0,0 +1,99 @@ +fetch('./CountriesData.json') +.then(response => { + if(!response.ok){ + throw new Error('Network response was not ok'); + } + return response.json(); +}) +.then(data => { + const countriesList = document.getElementById('countries-list'); + data.forEach((country) => { + const countryCard = document.createElement('a'); + countryCard.href = './details.html'; + countryCard.classList.add('country', 'scale-effect'); + countryCard.setAttribute('data-country-name', country.name); + + countryCard.onclick = (event) => { + handleCountryClick(country, event); + }; + + const countryImg = document.createElement('div'); + countryImg.classList.add('country-flag'); + const countryFlag = document.createElement('img'); + countryFlag.src = `https://flagcdn.com/${country.alpha2Code.toLowerCase()}.svg`; + countryFlag.alt = `${country.name} Flag`; + countryImg.appendChild(countryFlag); + + countryCard.appendChild(countryImg); + + const countryInfo = document.createElement('div'); + countryInfo.classList.add('country-info'); + const countryName = document.createElement('h2'); + countryName.textContent = country.name; + countryName.classList.add('country-title'); + countryInfo.appendChild(countryName); + + const countryDetails = document.createElement('ul'); + countryDetails.classList.add('country-brief'); + + const countryPopulation = document.createElement('li'); + countryPopulation.innerHTML = `Population: ${country.population}`; + countryDetails.appendChild(countryPopulation); + + const countryRegion = document.createElement('li'); + countryRegion.innerHTML = `Region: ${country.region}`; + countryDetails.appendChild(countryRegion); + + const countryCapital = document.createElement('li'); + countryCapital.innerHTML = `Capital: ${country.capital}`; + countryDetails.appendChild(countryCapital); + + countryInfo.appendChild(countryDetails); + countryCard.appendChild(countryInfo); + + countryCard.setAttribute('countryregion', country.region); + + countriesList.appendChild(countryCard); + }) + +}) + +const showFilterByRegion = () => { + const dropdownWrapper = document.querySelector('.dropdown-wrapper'); + + if (dropdownWrapper.classList.contains('open')) { + dropdownWrapper.classList.remove('open'); + } else { + dropdownWrapper.classList.add('open'); + } +} + +const chosenRegion = (element) => { + + const dropdownWrapper = document.querySelector('.dropdown-wrapper'); + const regionFilter = document.getElementById('region-filter'); + const region = element.getAttribute('data-region').charAt(0).toUpperCase() + element.getAttribute('data-region').slice(1); + regionFilter.textContent = region; + dropdownWrapper.classList.remove('open'); + filterByRegion(region); +} + +const filterByRegion = (region) => { + const countries = document.querySelectorAll('.country'); + countries.forEach(country => { + const countryRegion = country.getAttribute('countryregion'); + + if (!(region === 'All' || countryRegion === region)) { + country.classList.add('hidden-country'); + } else { + country.classList.remove('hidden-country'); + } + }) +} + + + + + + + diff --git a/scss/_countries-grid.scss b/scss/_countries-grid.scss index 4ba284a..8e248e3 100644 --- a/scss/_countries-grid.scss +++ b/scss/_countries-grid.scss @@ -78,4 +78,5 @@ margin-bottom: 15px; } } + } diff --git a/scss/_filters.scss b/scss/_filters.scss index 465ed62..483bf05 100644 --- a/scss/_filters.scss +++ b/scss/_filters.scss @@ -132,3 +132,5 @@ } } } + + diff --git a/scss/_global.scss b/scss/_global.scss index 9f4a1a1..d360cb0 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -107,3 +107,5 @@ button { font-size: 16px; } } + + From ff2daf42da05fad2423ef53c958f35686f9df364 Mon Sep 17 00:00:00 2001 From: roiyraz88 Date: Fri, 13 Dec 2024 20:23:01 +0200 Subject: [PATCH 2/2] Uploaded without the json due to a conflict. --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..468e58b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +CountriesData.json \ No newline at end of file