From 92368d70a28ae5f617411a11c3f4221642d2ff93 Mon Sep 17 00:00:00 2001 From: eladrab1106 Date: Sun, 15 Dec 2024 04:49:42 +0200 Subject: [PATCH 1/5] logic_and_style --- CountriesData.json | 293 ++++++++++++++++++++++++++++++++++++--------- details.html | 8 +- details.js | 120 +++++++++++++++++++ index.html | 81 ++----------- index.js | 180 ++++++++++++++++++++++++++++ 5 files changed, 548 insertions(+), 134 deletions(-) create mode 100644 details.js create mode 100644 index.js diff --git a/CountriesData.json b/CountriesData.json index 3db67ea..ddf755b 100644 --- a/CountriesData.json +++ b/CountriesData.json @@ -1,205 +1,380 @@ [ { "name": "Åland Islands", - "flag": "https://flagcdn.com/w320/ax.png", + "native_name": "Åland Islands", "population": 21225, + "flag": "https://flagcdn.com/w320/ax.png", "region": "Europe", - "capital": "Mariehamn" + "subregion": "Northern Europe", + "capital": "Mariehamn", + "top_level_domain": ".ax", + "currencies": ["Euro"], + "languages": ["Swedish"], + "border_countries": [] }, { "name": "Afghanistan", - "flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_the_Taliban.svg/320px-Flag_of_the_Taliban.svg.png", + "native_name": "افغانستان", "population": 27657145, + "flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_the_Taliban.svg/320px-Flag_of_the_Taliban.svg.png", "region": "Asia", - "capital": "Kabul" + "subregion": "Southern Asia", + "capital": "Kabul", + "top_level_domain": ".af", + "currencies": ["Afghan afghani"], + "languages": ["Pashto", "Dari"], + "border_countries": ["Pakistan", "Iran", "Turkmenistan", "Uzbekistan", "Tajikistan", "China"] }, { "name": "Albania", - "flag": "https://flagcdn.com/w320/al.png", + "native_name": "Shqipëri", "population": 2886026, + "flag": "https://flagcdn.com/w320/al.png", "region": "Europe", - "capital": "Tirana" + "subregion": "Southern Europe", + "capital": "Tirana", + "top_level_domain": ".al", + "currencies": ["Albanian lek"], + "languages": ["Albanian"], + "border_countries": ["Montenegro", "Kosovo", "North Macedonia", "Greece"] }, { "name": "Algeria", - "flag": "https://flagcdn.com/w320/dz.png", + "native_name": "الجزائر", "population": 40400000, + "flag":"https://flagcdn.com/w320/dz.png", "region": "Africa", - "capital": "Algiers" + "subregion": "Northern Africa", + "capital": "Algiers", + "top_level_domain": ".dz", + "currencies": ["Algerian dinar"], + "languages": ["Arabic", "Berber"], + "border_countries": ["Tunisia", "Libya", "Niger", "Mali", "Mauritania", "Western Sahara", "Morocco", "Spain"] }, { "name": "American Samoa", - "flag": "https://flagcdn.com/w320/as.png", + "native_name": "Amerika Sāmoa", "population": 57100, + "flag":"https://flagcdn.com/w320/as.png", "region": "Oceania", - "capital": "Pago Pago" + "subregion": "Polynesia", + "capital": "Pago Pago", + "top_level_domain": ".as", + "currencies": ["United States dollar"], + "languages": ["Samoan", "English"], + "border_countries": [] }, { "name": "Andorra", - "flag": "https://flagcdn.com/w320/ad.png", + "native_name": "Andorra", "population": 78014, + "flag": "https://flagcdn.com/w320/ad.png", "region": "Europe", - "capital": "Andorra la Vella" + "subregion": "Southern Europe", + "capital": "Andorra la Vella", + "top_level_domain": ".ad", + "currencies": ["Euro"], + "languages": ["Catalan"], + "border_countries": ["France", "Spain"] }, { "name": "Angola", - "flag": "https://flagcdn.com/w320/ao.png", + "native_name": "Angola", "population": 25868000, + "flag": "https://flagcdn.com/w320/ao.png", "region": "Africa", - "capital": "Luanda" + "subregion": "Middle Africa", + "capital": "Luanda", + "top_level_domain": ".ao", + "currencies": ["Angolan kwanza"], + "languages": ["Portuguese"], + "border_countries": ["Namibia", "Zambia", "Democratic Republic of the Congo"] }, { "name": "Anguilla", - "flag": "https://flagcdn.com/w320/ai.png", + "native_name": "Anguilla", "population": 13452, + "flag": "https://flagcdn.com/w320/ai.png", "region": "Americas", - "capital": "The Valley" + "subregion": "Caribbean", + "capital": "The Valley", + "top_level_domain": ".ai", + "currencies": ["East Caribbean dollar"], + "languages": ["English"], + "border_countries": [] }, { "name": "Antarctica", - "flag": "https://flagcdn.com/w320/aq.png", + "native_name": "Antarctica", "population": 1000, + "flag": "https://flagcdn.com/w320/aq.png", "region": "Polar", - "capital": "" + "subregion": "", + "capital": "", + "top_level_domain": ".aq", + "currencies": [], + "languages": [], + "border_countries": [] }, { "name": "Israel", - "flag": "https://flagcdn.com/w320/il.png", + "native_name": "ישראל", "population": 8527400, + "flag": "https://flagcdn.com/w320/il.png", "region": "Asia", - "capital": "Jerusalem" + "subregion": "Western Asia", + "capital": "Jerusalem", + "top_level_domain": ".il", + "currencies": ["Israeli new shekel"], + "languages": ["Hebrew", "Arabic"], + "border_countries": ["Lebanon", "Syria", "Jordan", "Egypt"] }, { "name": "Italy", - "flag": "https://flagcdn.com/w320/it.png", + "native_name": "Italia", "population": 60665551, + "flag": "https://flagcdn.com/w320/it.png", "region": "Europe", - "capital": "Rome" + "subregion": "Southern Europe", + "capital": "Rome", + "top_level_domain": ".it", + "currencies": ["Euro"], + "languages": ["Italian"], + "border_countries": ["Switzerland", "Austria", "Slovenia", "France"] }, { "name": "Jamaica", - "flag": "https://flagcdn.com/w320/jm.png", + "native_name": "Jamaica", "population": 2723246, + "flag": "https://flagcdn.com/w320/jm.png", "region": "Americas", - "capital": "Kingston" + "subregion": "Caribbean", + "capital": "Kingston", + "top_level_domain": ".jm", + "currencies": ["Jamaican dollar"], + "languages": ["English"], + "border_countries": [] }, { "name": "Japan", - "flag": "https://flagcdn.com/w320/jp.png", + "native_name": "日本", "population": 126960000, + "flag": "https://flagcdn.com/w320/jp.png", "region": "Asia", - "capital": "Tokyo" + "subregion": "Eastern Asia", + "capital": "Tokyo", + "top_level_domain": ".jp", + "currencies": ["Japanese yen"], + "languages": ["Japanese"], + "border_countries": [] }, { "name": "Jersey", - "flag": "https://flagcdn.com/w320/je.png", + "native_name": "Jersey", "population": 100800, + "flag": "https://flagcdn.com/w320/je.png", "region": "Europe", - "capital": "Saint Helier" + "subregion": "Northern Europe", + "capital": "Saint Helier", + "top_level_domain": ".je", + "currencies": ["Pound sterling"], + "languages": ["English", "French"], + "border_countries": [] }, { "name": "Jordan", - "flag": "https://flagcdn.com/w320/jo.png", + "native_name": "الأردن", "population": 9531712, + "flag": "https://flagcdn.com/w320/jo.png", "region": "Asia", - "capital": "Amman" + "subregion": "Western Asia", + "capital": "Amman", + "top_level_domain": ".jo", + "currencies": ["Jordanian dinar"], + "languages": ["Arabic"], + "border_countries": ["Iraq", "Israel", "Syria", "Saudi Arabia"] }, { "name": "Kazakhstan", - "flag": "https://flagcdn.com/w320/kz.png", + "native_name": "Қазақстан", "population": 17753200, + "flag": "https://flagcdn.com/w320/kz.png", "region": "Asia", - "capital": "Astana" + "subregion": "Central Asia", + "capital": "Astana", + "top_level_domain": ".kz", + "currencies": ["Kazakhstani tenge"], + "languages": ["Kazakh", "Russian"], + "border_countries": ["Russia", "China", "Kyrgyzstan", "Uzbekistan", "Turkmenistan"] }, { "name": "Kenya", - "flag": "https://flagcdn.com/w320/ke.png", + "native_name": "Kenya", "population": 47251000, + "flag": "https://flagcdn.com/w320/ke.png", "region": "Africa", - "capital": "Nairobi" + "subregion": "Eastern Africa", + "capital": "Nairobi", + "top_level_domain": ".ke", + "currencies": ["Kenyan shilling"], + "languages": ["Swahili", "English"], + "border_countries": ["Ethiopia", "Somalia", "Uganda", "Tanzania", "South Sudan", "Sudan"] }, { "name": "Kiribati", - "flag": "https://flagcdn.com/w320/ki.png", + "native_name": "Kiribati", "population": 113400, + "flag": "https://flagcdn.com/w320/ki.png", "region": "Oceania", - "capital": "South Tarawa" + "subregion": "Micronesia", + "capital": "South Tarawa", + "top_level_domain": ".ki", + "currencies": ["Australian dollar", "Kiribati dollar"], + "languages": ["English", "Gilbertese"], + "border_countries": [] }, { "name": "Kuwait", - "flag": "https://flagcdn.com/w320/kw.png", + "native_name": "الكويت", "population": 4183658, + "flag": "https://flagcdn.com/w320/kw.png", "region": "Asia", - "capital": "Kuwait City" + "subregion": "Western Asia", + "capital": "Kuwait City", + "top_level_domain": ".kw", + "currencies": ["Kuwaiti dinar"], + "languages": ["Arabic"], + "border_countries": ["Iraq", "Saudi Arabia"] }, { "name": "Kyrgyzstan", - "flag": "https://flagcdn.com/w320/kg.png", + "native_name": "Кыргызстан", "population": 6047800, + "flag": "https://flagcdn.com/w320/kg.png", "region": "Asia", - "capital": "Bishkek" + "subregion": "Central Asia", + "capital": "Bishkek", + "top_level_domain": ".kg", + "currencies": ["Kyrgyzstani som"], + "languages": ["Kyrgyz", "Russian"], + "border_countries": ["Kazakhstan", "Uzbekistan", "Tajikistan", "China"] }, { "name": "Laos", + "native_name": "ລາວ", + "population": 6827000, "flag": "https://flagcdn.com/w320/la.png", - "population": 6492400, "region": "Asia", - "capital": "Vientiane" + "subregion": "South-Eastern Asia", + "capital": "Vientiane", + "top_level_domain": ".la", + "currencies": ["Lao kip"], + "languages": ["Lao"], + "border_countries": ["China", "Vietnam", "Cambodia", "Thailand", "Myanmar"] }, { "name": "Latvia", + "native_name": "Latvija", + "population": 1886200, "flag": "https://flagcdn.com/w320/lv.png", - "population": 1961600, "region": "Europe", - "capital": "Riga" + "subregion": "Northern Europe", + "capital": "Riga", + "top_level_domain": ".lv", + "currencies": ["Euro"], + "languages": ["Latvian"], + "border_countries": ["Estonia", "Lithuania", "Russia", "Belarus"] }, { "name": "Lebanon", - "flag": "https://flagcdn.com/w320/lb.png", + "native_name": "لبنان", "population": 5988000, + "flag": "https://flagcdn.com/w320/lb.png", "region": "Asia", - "capital": "Beirut" + "subregion": "Western Asia", + "capital": "Beirut", + "top_level_domain": ".lb", + "currencies": ["Lebanese pound"], + "languages": ["Arabic", "French"], + "border_countries": ["Syria", "Israel"] }, { "name": "Lesotho", + "native_name": "Lesotho", + "population": 2100000, "flag": "https://flagcdn.com/w320/ls.png", - "population": 1894194, "region": "Africa", - "capital": "Maseru" + "subregion": "Southern Africa", + "capital": "Maseru", + "top_level_domain": ".ls", + "currencies": ["Lesotho loti"], + "languages": ["Sesotho", "English"], + "border_countries": ["South Africa"] }, { "name": "Liberia", + "native_name": "Liberia", + "population": 4300000, "flag": "https://flagcdn.com/w320/lr.png", - "population": 4615000, "region": "Africa", - "capital": "Monrovia" + "subregion": "Western Africa", + "capital": "Monrovia", + "top_level_domain": ".lr", + "currencies": ["Liberian dollar"], + "languages": ["English"], + "border_countries": ["Sierra Leone", "Guinea", "Ivory Coast"] }, { "name": "Libya", + "native_name": "ليبيا", + "population": 6360000, "flag": "https://flagcdn.com/w320/ly.png", - "population": 6385000, "region": "Africa", - "capital": "Tripoli" + "subregion": "Northern Africa", + "capital": "Tripoli", + "top_level_domain": ".ly", + "currencies": ["Libyan dinar"], + "languages": ["Arabic"], + "border_countries": ["Egypt", "Sudan", "Chad", "Niger", "Algeria", "Tunisia"] }, { "name": "Liechtenstein", + "native_name": "Liechtenstein", + "population": 37910, "flag": "https://flagcdn.com/w320/li.png", - "population": 37623, "region": "Europe", - "capital": "Vaduz" + "subregion": "Western Europe", + "capital": "Vaduz", + "top_level_domain": ".li", + "currencies": ["Swiss franc"], + "languages": ["German"], + "border_countries": ["Switzerland", "Austria"] }, { "name": "Lithuania", + "native_name": "Lietuva", + "population": 2722289, "flag": "https://flagcdn.com/w320/lt.png", - "population": 2872294, "region": "Europe", - "capital": "Vilnius" + "subregion": "Northern Europe", + "capital": "Vilnius", + "top_level_domain": ".lt", + "currencies": ["Euro"], + "languages": ["Lithuanian"], + "border_countries": ["Latvia", "Belarus", "Poland", "Russia"] }, { "name": "Luxembourg", + "native_name": "Luxembourg", + "population": 602005, "flag": "https://flagcdn.com/w320/lu.png", - "population": 576200, "region": "Europe", - "capital": "Luxembourg" + "subregion": "Western Europe", + "capital": "Luxembourg City", + "top_level_domain": ".lu", + "currencies": ["Euro"], + "languages": ["Luxembourgish", "French", "German"], + "border_countries": ["Belgium", "France", "Germany"] } -] \ No newline at end of file +] + diff --git a/details.html b/details.html index b584581..1116f63 100644 --- a/details.html +++ b/details.html @@ -56,7 +56,7 @@

Where in the world?

class="theme-toggle flex flex-jc-sb flex-ai-c" > - Dark Mode + Dark Mode @@ -71,10 +71,10 @@

Where in the world?

-
+
+
- - + diff --git a/details.js b/details.js new file mode 100644 index 0000000..62d5842 --- /dev/null +++ b/details.js @@ -0,0 +1,120 @@ +window.onload = function() {setTimeout(function() {document.querySelector('.loader').style.display='none'},3000);}; +function getCountryParameter() { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.get('country'); // Returns the value of 'country' (e.g., 'USA') + } + + + + fetch('./CountriesData.json') + .then((response) => { + if (!response.ok) { + throw new Error('Failed to load JSON'); + } + return response.json(); + }) + .then((countries) => { + const countrySection = document.querySelector('.country-details'); + let countryName = getCountryParameter(); + const countryInfo=(country)=>{ + const imgDiv = document.createElement('div'); + imgDiv.classList.add('img-side'); + const countryImg = document.createElement('img'); + countryImg.setAttribute('src', country.flag); + countryImg.classList.add('country-flag'); + imgDiv.appendChild(countryImg); + countrySection.appendChild(imgDiv); + const countryInfo = document.createElement('div'); + countryInfo.classList.add('country-info'); + const countryTitle = document.createElement('h1'); + countryTitle.textContent = country.name; + countryTitle.setAttribute('id', 'name-title'); + countryInfo.appendChild(countryTitle); + countrySection.appendChild(countryInfo); + const col2 = document.createElement('div'); + col2.classList.add('col-2'); + const countryBrief = document.createElement('ul'); + const nativeName = document.createElement('li'); + nativeName.innerHTML = `Native Name: ${country.nativeName}`; + const population = document.createElement('li'); + population.innerHTML = `Population: ${country.population}`; + const region = document.createElement('li'); + region.innerHTML = `Region: ${country.region}`; + const subRegion = document.createElement('li'); + subRegion.innerHTML = `Sub Region: ${country.subregion}`; + const capital = document.createElement('li'); + capital.innerHTML = `Capital: ${country.capital}`; + countryBrief.appendChild(nativeName); + countryBrief.appendChild(population); + countryBrief.appendChild(region); + countryBrief.appendChild(subRegion); + countryBrief.appendChild(capital); + col2.appendChild(countryBrief); + countryInfo.appendChild(col2); + const secondCol = document.createElement('ul'); + const topLevelDomain = document.createElement('li'); + topLevelDomain.innerHTML = `Top Level Domain: ${country.top_level_domain}`; + const currencies = document.createElement('li'); + currencies.innerHTML = `Currencies: ${country.currencies.join(', ')}`; + const languages = document.createElement('li'); + languages.innerHTML = `Languages: ${country.languages.join(', ')}`; + secondCol.appendChild(topLevelDomain); + secondCol.appendChild(currencies); + secondCol.appendChild(languages); + col2.appendChild(secondCol); + const col3 = document.createElement('div'); + col3.classList.add('col-3'); + const borderCountries = document.createElement('ul'); + const borderTitle = document.createElement('strong'); + borderTitle.textContent = 'Border Countries:'; + borderCountries.appendChild(borderTitle); + col3.appendChild(borderCountries); + countryInfo.appendChild(col3); + country.border_countries.forEach((border)=>{ + const borderCountry = document.createElement('li'); + const borderButton = document.createElement('button'); + borderButton.classList.add('btn'); + borderButton.textContent = border; + borderCountry.appendChild(borderButton); + borderCountries.appendChild(borderCountry); + }) + + } + countries.forEach((country) => { + if (country.name === countryName) { + countryInfo(country); + } + }); + + }) + + + + + + .catch((error) => console.error('Error loading JSON:', error)); + + const darkMode=()=>{ + const body = document.body; + const header = document.querySelector('header'); + const buttons = document.querySelectorAll('.btn'); + const li=document.querySelectorAll('li'); + const strong=document.querySelectorAll('strong'); + body.style.backgroundColor = 'hsl(207, 26%, 17%)'; + header.style.backgroundColor = 'hsl(209, 23%, 22%)'; + const title = document.getElementById('name-title'); + buttons.forEach((button) => { + button.style.backgroundColor = 'hsl(209, 23%, 22%)'; + button.style.color = 'gray'; + }); + li.forEach((list)=>{ + list.style.color='gray'; + }); + strong.forEach((strong)=>{ + strong.style.color='white'; + }); + title.style.color='white'; + + + } + \ No newline at end of file diff --git a/index.html b/index.html index f4afbf5..dcd7a4b 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

Where in the world?

class="theme-toggle flex flex-jc-sb flex-ai-c" > - Dark Mode + Dark Mode @@ -61,6 +61,7 @@

Where in the world?

Where in the world?
- Filter by Region + Filter by Region
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
@@ -88,71 +89,9 @@

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/index.js b/index.js new file mode 100644 index 0000000..94e39bc --- /dev/null +++ b/index.js @@ -0,0 +1,180 @@ +let countriesData = []; +let GeneralCountriesCode; +let GetAllCountries; +let GetAfricaCountries; +let GetAsiaCountries; +let GetEuropeCountries; +let GetAmericasCountries; +let GetOceaniaCountries; +let FilteredCountries; +let AllFilter=document.getElementById('All'); +let EuropeFilter=document.getElementById('Europe'); +let AfricaFilter=document.getElementById('Africa'); +let AsiaFilter=document.getElementById('Asia'); +let AmericasFilter=document.getElementById('Americas'); +let OceaniaFilter=document.getElementById('Oceania'); +let dark; +fetch('./CountriesData.json') + .then((response) => { + if (!response.ok) { + throw new Error('Failed to load JSON'); + } + return response.json(); + }) + .then((countries) => { + FilteredCountries = countries; + countriesData = countries; + const countryContainer = document.querySelector('.countries-grid'); + GeneralCountriesCode=(FilteredCountries)=>{ + FilteredCountries.forEach((country) => { + const countryCard= document.createElement('a'); + countryCard.classList.add('country', 'scale-effect'); + countryCard.setAttribute('href', 'details.html?country=' + encodeURIComponent(country.name)); + countryCard.setAttribute('data-country-name', country.name); + const countryDiv = document.createElement('div'); + countryDiv.classList.add('country-flag'); + const countryImg = document.createElement('img'); + countryImg.setAttribute('src', country.flag); + const countryInfo = document.createElement('div'); + countryInfo.classList.add('country-info'); + const countryTitle = document.createElement('h2'); + countryTitle.classList.add('country-title'); + countryTitle.textContent = country.name; + countryCard.appendChild(countryDiv); + countryDiv.appendChild(countryImg); + countryCard.appendChild(countryInfo); + countryInfo.appendChild(countryTitle); + const countryBrief = document.createElement('ul'); + countryBrief.classList.add('country-brief'); + const population = document.createElement('li'); + population.innerHTML = `Population: ${country.population}`; + const region = document.createElement('li'); + region.innerHTML = `Region: ${country.region}`; + const capital = document.createElement('li'); + capital.innerHTML = `Capital: ${country.capital}`; + countryBrief.appendChild(population); + countryBrief.appendChild(region); + countryBrief.appendChild(capital); + countryInfo.appendChild(countryBrief); + countryContainer.appendChild(countryCard); + + }) +if(dark){ + darkMode(); +}}; + GeneralCountriesCode(FilteredCountries); + GetAllCountries = () => { + FilteredCountries = countries; + const countryContainer = document.querySelector('.countries-grid'); + countryContainer.innerHTML = ''; + GeneralCountriesCode(FilteredCountries); + hideDropDown(); + } + AllFilter.addEventListener('click', GetAllCountries); + GetAfricaCountries = () => { + FilteredCountries = countries.filter((country) => country.region === 'Africa'); + const countryContainer = document.querySelector('.countries-grid'); + countryContainer.innerHTML = ''; + GeneralCountriesCode(FilteredCountries); + hideDropDown(); + } + AfricaFilter.addEventListener('click', GetAfricaCountries); + GetAsiaCountries = () => { + FilteredCountries = countries.filter((country) => country.region === 'Asia'); + const countryContainer = document.querySelector('.countries-grid'); + countryContainer.innerHTML = ''; + GeneralCountriesCode(FilteredCountries); + hideDropDown(); + } + AsiaFilter.addEventListener('click', GetAsiaCountries); + GetEuropeCountries = () => { + FilteredCountries = countries.filter((country) => country.region === 'Europe'); + const countryContainer = document.querySelector('.countries-grid'); + countryContainer.innerHTML = ''; + GeneralCountriesCode(FilteredCountries); + hideDropDown(); + } + EuropeFilter.addEventListener('click', GetEuropeCountries); + GetAmericasCountries = () => { + FilteredCountries = countries.filter((country) => country.region === 'Americas'); + const countryContainer = document.querySelector('.countries-grid'); + countryContainer.innerHTML = ''; + GeneralCountriesCode(FilteredCountries); + hideDropDown(); + } + AmericasFilter.addEventListener('click', GetAmericasCountries); + GetOceaniaCountries = () => { + FilteredCountries = countries.filter((country) => country.region === 'Oceania'); + const countryContainer = document.querySelector('.countries-grid'); + countryContainer.innerHTML = ''; + GeneralCountriesCode(FilteredCountries); + hideDropDown(); + } + OceaniaFilter.addEventListener('click', GetOceaniaCountries); + const searchInput = document.getElementById('input'); + searchInput.addEventListener('input', (e) => { + const searchValue = e.target.value; + FilteredCountries = countries.filter((country) => country.name.toLowerCase().includes(searchValue.toLowerCase())); + const countryContainer = document.querySelector('.countries-grid'); + countryContainer.innerHTML = ''; + GeneralCountriesCode(FilteredCountries); + }); + + + + +}) + + + .catch((error) => console.error('Error loading JSON:', error)); + + const presentDropDown=()=>{ + const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; + dropDownBody.style.visibility = 'visible'; + dropDownBody.style.opacity = '1'; +} +const hideDropDown=()=>{ + const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; + dropDownBody.style.visibility = 'hidden'; + dropDownBody.style.opacity = '0'; +} +const darkMode=()=>{ + dark=true; + const body = document.body; + const header = document.querySelector('header'); + const li=document.querySelectorAll('li'); + const strong=document.querySelectorAll('strong'); + const searchInput = document.getElementById('input'); + const dropDownHeader = document.getElementsByClassName('dropdown-header')[0]; + const dropB= document.getElementById('dropB'); + body.style.backgroundColor = 'hsl(207, 26%, 17%)'; + header.style.backgroundColor = 'hsl(209, 23%, 22%)'; + + const countryInfo = document.querySelectorAll('.country-info'); + countryInfo.forEach((info) => { + info.style.backgroundColor = 'hsl(209, 23%, 22%)'; + }) + li.forEach((list)=>{ + list.style.color='gray'; + }); + strong.forEach((strong)=>{ + strong.style.color='white'; + }); + searchInput.style.backgroundColor = 'hsl(209, 23%, 22%)'; + searchInput.style.color = 'gray'; + dropDownHeader.style.backgroundColor = 'hsl(209, 23%, 22%)'; + dropB.style.color = 'gray'; + + +} + + + + + + + + + + + From 37cc5fd1ef4f3499d1ddd2af259f6d7edb8fe5fd Mon Sep 17 00:00:00 2001 From: eladrab1106 Date: Sun, 15 Dec 2024 04:54:00 +0200 Subject: [PATCH 2/5] h1 color --- index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.js b/index.js index 94e39bc..a3caeb4 100644 --- a/index.js +++ b/index.js @@ -147,6 +147,8 @@ const darkMode=()=>{ const searchInput = document.getElementById('input'); const dropDownHeader = document.getElementsByClassName('dropdown-header')[0]; const dropB= document.getElementById('dropB'); + const countryTitle = document.querySelectorAll('.country-title'); + body.style.backgroundColor = 'hsl(207, 26%, 17%)'; header.style.backgroundColor = 'hsl(209, 23%, 22%)'; @@ -164,6 +166,10 @@ const darkMode=()=>{ searchInput.style.color = 'gray'; dropDownHeader.style.backgroundColor = 'hsl(209, 23%, 22%)'; dropB.style.color = 'gray'; + countryTitle.forEach((title)=>{ + title.style.color='white'; + }) + } From f460d9f5ac02d4cecc4b69bbc7ee36d3ac196bfc Mon Sep 17 00:00:00 2001 From: eladrab1106 Date: Sun, 15 Dec 2024 13:59:07 +0200 Subject: [PATCH 3/5] canceling the loader after json received --- details.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/details.js b/details.js index 62d5842..9954ea2 100644 --- a/details.js +++ b/details.js @@ -1,5 +1,5 @@ -window.onload = function() {setTimeout(function() {document.querySelector('.loader').style.display='none'},3000);}; -function getCountryParameter() { +// window.onload = function() {setTimeout(function() {document.querySelector('.loader').style.display='none'},3000);}; +const getCountryParameter=()=> { const urlParams = new URLSearchParams(window.location.search); return urlParams.get('country'); // Returns the value of 'country' (e.g., 'USA') } @@ -85,6 +85,7 @@ function getCountryParameter() { countryInfo(country); } }); + setTimeout(function() {document.querySelector('.loader').style.display='none'},500) }) From 87265bbc2604d103993ddea2bbf4a3d3d961dabd Mon Sep 17 00:00:00 2001 From: eladrab1106 Date: Sun, 15 Dec 2024 17:57:47 +0200 Subject: [PATCH 4/5] drop-down body changed color in dark mode --- details.js | 3 --- index.js | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/details.js b/details.js index 9954ea2..969111f 100644 --- a/details.js +++ b/details.js @@ -1,10 +1,7 @@ -// window.onload = function() {setTimeout(function() {document.querySelector('.loader').style.display='none'},3000);}; const getCountryParameter=()=> { const urlParams = new URLSearchParams(window.location.search); return urlParams.get('country'); // Returns the value of 'country' (e.g., 'USA') } - - fetch('./CountriesData.json') .then((response) => { diff --git a/index.js b/index.js index a3caeb4..463c704 100644 --- a/index.js +++ b/index.js @@ -148,6 +148,7 @@ const darkMode=()=>{ const dropDownHeader = document.getElementsByClassName('dropdown-header')[0]; const dropB= document.getElementById('dropB'); const countryTitle = document.querySelectorAll('.country-title'); + const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; body.style.backgroundColor = 'hsl(207, 26%, 17%)'; header.style.backgroundColor = 'hsl(209, 23%, 22%)'; @@ -169,6 +170,7 @@ const darkMode=()=>{ countryTitle.forEach((title)=>{ title.style.color='white'; }) + dropDownBody.style.backgroundColor = 'hsl(209, 23%, 22%)'; From 24db6d099c6248090d8fe8300d92fd387050ad74 Mon Sep 17 00:00:00 2001 From: eladrab1106 Date: Sun, 15 Dec 2024 20:06:48 +0200 Subject: [PATCH 5/5] cutting specific region func --- index.html | 16 +++--- index.js | 157 +++++++++++++++++++++-------------------------------- 2 files changed, 69 insertions(+), 104 deletions(-) diff --git a/index.html b/index.html index dcd7a4b..dca2af6 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

Where in the world?

class="theme-toggle flex flex-jc-sb flex-ai-c" > - Dark Mode + Dark Mode @@ -69,17 +69,17 @@

Where in the world?

- Filter by Region + Filter by Region
    -
  • All
    • -
  • Africa
    • -
  • America
    • -
  • Asia
    • -
  • Europe
    • -
  • Oceania
    • +
  • All
    • +
  • Africa
    • +
  • America
    • +
  • Asia
    • +
  • Europe
    • +
  • Oceania
diff --git a/index.js b/index.js index 463c704..5444486 100644 --- a/index.js +++ b/index.js @@ -1,18 +1,8 @@ let countriesData = []; let GeneralCountriesCode; let GetAllCountries; -let GetAfricaCountries; -let GetAsiaCountries; -let GetEuropeCountries; -let GetAmericasCountries; -let GetOceaniaCountries; let FilteredCountries; let AllFilter=document.getElementById('All'); -let EuropeFilter=document.getElementById('Europe'); -let AfricaFilter=document.getElementById('Africa'); -let AsiaFilter=document.getElementById('Asia'); -let AmericasFilter=document.getElementById('Americas'); -let OceaniaFilter=document.getElementById('Oceania'); let dark; fetch('./CountriesData.json') .then((response) => { @@ -23,7 +13,6 @@ fetch('./CountriesData.json') }) .then((countries) => { FilteredCountries = countries; - countriesData = countries; const countryContainer = document.querySelector('.countries-grid'); GeneralCountriesCode=(FilteredCountries)=>{ FilteredCountries.forEach((country) => { @@ -71,46 +60,24 @@ if(dark){ hideDropDown(); } AllFilter.addEventListener('click', GetAllCountries); - GetAfricaCountries = () => { - FilteredCountries = countries.filter((country) => country.region === 'Africa'); + GetCountryByRegion = (region) => { + FilteredCountries = countries.filter((country) => country.region === region); const countryContainer = document.querySelector('.countries-grid'); countryContainer.innerHTML = ''; GeneralCountriesCode(FilteredCountries); - hideDropDown(); - } - AfricaFilter.addEventListener('click', GetAfricaCountries); - GetAsiaCountries = () => { - FilteredCountries = countries.filter((country) => country.region === 'Asia'); - const countryContainer = document.querySelector('.countries-grid'); - countryContainer.innerHTML = ''; - GeneralCountriesCode(FilteredCountries); - hideDropDown(); - } - AsiaFilter.addEventListener('click', GetAsiaCountries); - GetEuropeCountries = () => { - FilteredCountries = countries.filter((country) => country.region === 'Europe'); - const countryContainer = document.querySelector('.countries-grid'); - countryContainer.innerHTML = ''; - GeneralCountriesCode(FilteredCountries); - hideDropDown(); - } - EuropeFilter.addEventListener('click', GetEuropeCountries); - GetAmericasCountries = () => { - FilteredCountries = countries.filter((country) => country.region === 'Americas'); - const countryContainer = document.querySelector('.countries-grid'); - countryContainer.innerHTML = ''; - GeneralCountriesCode(FilteredCountries); - hideDropDown(); - } - AmericasFilter.addEventListener('click', GetAmericasCountries); - GetOceaniaCountries = () => { - FilteredCountries = countries.filter((country) => country.region === 'Oceania'); - const countryContainer = document.querySelector('.countries-grid'); - countryContainer.innerHTML = ''; - GeneralCountriesCode(FilteredCountries); - hideDropDown(); } - OceaniaFilter.addEventListener('click', GetOceaniaCountries); + document.querySelectorAll('.Region').forEach((region) => { + if(region.getAttribute('id')==='All'){ + + + } + else{ + region.addEventListener('click', (e) => { + const region = e.target.getAttribute('id'); + GetCountryByRegion(region); + hideDropDown(); + + })}}) const searchInput = document.getElementById('input'); searchInput.addEventListener('input', (e) => { const searchValue = e.target.value; @@ -120,63 +87,61 @@ if(dark){ GeneralCountriesCode(FilteredCountries); }); - - + const presentDropDown=()=>{ + const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; + dropDownBody.style.visibility = 'visible'; + dropDownBody.style.opacity = '1'; + } + const hideDropDown=()=>{ + const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; + dropDownBody.style.visibility = 'hidden'; + dropDownBody.style.opacity = '0'; + } + const darkMode=()=>{ + dark=true; + const body = document.body; + const header = document.querySelector('header'); + const li=document.querySelectorAll('li'); + const strong=document.querySelectorAll('strong'); + const searchInput = document.getElementById('input'); + const dropDownHeader = document.getElementsByClassName('dropdown-header')[0]; + const dropB= document.getElementById('dropB'); + const countryTitle = document.querySelectorAll('.country-title'); + const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; + + body.style.backgroundColor = 'hsl(207, 26%, 17%)'; + header.style.backgroundColor = 'hsl(209, 23%, 22%)'; + + const countryInfo = document.querySelectorAll('.country-info'); + countryInfo.forEach((info) => { + info.style.backgroundColor = 'hsl(209, 23%, 22%)'; + }) + li.forEach((list)=>{ + list.style.color='gray'; + }); + strong.forEach((strong)=>{ + strong.style.color='white'; + }); + searchInput.style.backgroundColor = 'hsl(209, 23%, 22%)'; + searchInput.style.color = 'gray'; + dropDownHeader.style.backgroundColor = 'hsl(209, 23%, 22%)'; + dropB.style.color = 'gray'; + countryTitle.forEach((title)=>{ + title.style.color='white'; + }) + dropDownBody.style.backgroundColor = 'hsl(209, 23%, 22%)'; + } + document.getElementById('dark-mode').addEventListener('click', darkMode); + document.getElementById('dropB').addEventListener('click', presentDropDown); }) .catch((error) => console.error('Error loading JSON:', error)); - const presentDropDown=()=>{ - const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; - dropDownBody.style.visibility = 'visible'; - dropDownBody.style.opacity = '1'; -} -const hideDropDown=()=>{ - const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; - dropDownBody.style.visibility = 'hidden'; - dropDownBody.style.opacity = '0'; -} -const darkMode=()=>{ - dark=true; - const body = document.body; - const header = document.querySelector('header'); - const li=document.querySelectorAll('li'); - const strong=document.querySelectorAll('strong'); - const searchInput = document.getElementById('input'); - const dropDownHeader = document.getElementsByClassName('dropdown-header')[0]; - const dropB= document.getElementById('dropB'); - const countryTitle = document.querySelectorAll('.country-title'); - const dropDownBody = document.getElementsByClassName('dropdown-body')[0]; - - body.style.backgroundColor = 'hsl(207, 26%, 17%)'; - header.style.backgroundColor = 'hsl(209, 23%, 22%)'; - - const countryInfo = document.querySelectorAll('.country-info'); - countryInfo.forEach((info) => { - info.style.backgroundColor = 'hsl(209, 23%, 22%)'; - }) - li.forEach((list)=>{ - list.style.color='gray'; - }); - strong.forEach((strong)=>{ - strong.style.color='white'; - }); - searchInput.style.backgroundColor = 'hsl(209, 23%, 22%)'; - searchInput.style.color = 'gray'; - dropDownHeader.style.backgroundColor = 'hsl(209, 23%, 22%)'; - dropB.style.color = 'gray'; - countryTitle.forEach((title)=>{ - title.style.color='white'; - }) - dropDownBody.style.backgroundColor = 'hsl(209, 23%, 22%)'; - - - -} +