-
+
+
+
diff --git a/index.html b/index.html
index f4afbf5..e0cc062 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
Countries Info
-
+
-
+
+
+
-
+
+
Filter by Region
-
+
- All -
- Africa +
- Africa
- America
- Asia
- Europe @@ -87,8 +88,8 @@
- Native Name: ${nativeName} +
- Population: ${population} +
- Region: ${region} +
- Sub Region: ${subRegion} +
- Capital: ${capital} +
- Top Level Domain: ${topLevelDomain.map(item => item)} +
- Currencies: ${currencies.map(item => item)} +
- Languages: ${languages.map(item => item)} +
- population: ${item.population} +
- Region: ${item.region} +
- capital: ${item.capital} +
- population: ${population} +
- Region: ${region} +
- capital: ${capital} +
Where in the world?
-
-
+
+
+ `;
+ }
+ else {
+ loader.innerHtml = '';
+ }
+}
+
+
+const selectCountry = async (e) => {
+ const data = await getAllCountriesData();
+ const countryName = e.target.closest(".country");
+ const country = countryName.dataset.countryName;
+ const findCountry = data.find(({ name }) => name === country)
+
+ if (!findCountry) return;
+
+ window.location.href = `details.html?country=${country}`;
+}
+
+
+const darkModeToggle = document.querySelector('.theme-toggle');
+darkModeToggle.addEventListener('click', () => {
+ const darkMode = darkModeToggle.classList.contains('dark-mode');
+ const themeText = document.querySelector('.theme-text');
+ const themeIcon = document.querySelector('.theme-toggle>i');
+
+ themeIcon.classList.add('fa-moon');
+ themeIcon.classList.remove('fa-sun');
+ if (darkMode) {
+ document.body.style.backgroundColor = '#ffff';
+ themeText.innerHTML = 'Dark Mode';
+ themeIcon.classList.add('fa-moon');
+ themeIcon.classList.remove('fa-sun');
+ darkModeToggle.classList.remove('dark-mode')
+ }
+ else {
+ themeText.innerText = 'Light Mode';
+ document.body.style.backgroundColor = '#333';
+ themeIcon.classList.add('fa-sun');
+ themeIcon.classList.remove('fa-moon');
+ darkModeToggle.classList.add('dark-mode');
+ }
+});
+
+
+
+
+
+
+
diff --git a/js/details.js b/js/details.js
new file mode 100644
index 0000000..e587073
--- /dev/null
+++ b/js/details.js
@@ -0,0 +1,54 @@
+
+const getSelectedCountry = async () => {
+ const data = await getAllCountriesData();
+ const displayCountry = document.querySelector('.country-details');
+
+ let params = new URLSearchParams(document.location.search);
+ let countryName = params.get('country');
+ if (!countryName) return;
+
+ const myCountry = data?.find(({ name }) => name === countryName);
+ console.log(countryName);
+
+ const { name,nativeName,subRegion, flag, population, region, capital,topLevelDomain,currencies,languages ,borders} = myCountry;
+ displayCountry.innerHTML = `
+
+
+
+
+
+ `;
+
+
+}
diff --git a/js/filters.js b/js/filters.js
new file mode 100644
index 0000000..644dda4
--- /dev/null
+++ b/js/filters.js
@@ -0,0 +1,97 @@
+
+const allCountries = async () => {
+ const data = await getAllCountriesData();
+
+ const countries = document.querySelector('.countries-grid');
+ countries.innerHTML = '';
+
+ return data.forEach(item => {
+ countries.innerHTML += `
+
+
+ 
+
+
+
+ +
+ ${name}
++ +
+
+
+ -
+
-
+
Border Countries:
+
+ ${borders.length > 0? borders?.map(item =>
+ `
+
+ `
+
+ ).join(' '): 'No border countries found.'}
+
+
+
+ 
+
+
+
+
+ `
+ });
+}
+
+const searchByRegion = async (e) => {
+ const data = await getAllCountriesData();
+ const selectRegion = e.target.attributes[0].nodeValue;
+ const clearInputValue = document.querySelector('.search-input');
+ if (clearInputValue.value !== '') clearInputValue.value = '';
+
+
+ const regionData = data?.filter(({ region }) => {
+ if (region.toLowerCase() === selectRegion)
+ return region;
+ else if (selectRegion == 'all')
+ return region
+ });
+
+ return displayCountries(regionData)
+
+}
+
+const displayCountries = (data) => {
+
+ const countries = document.querySelector('.countries-grid');
+ countries.innerHTML = '';
+
+ data?.forEach(({ name, flag, population, region, capital }) => {
+ countries.innerHTML += `
+
+ ${item.name}
+-
+
+
+
+
+
+
+ `
+ });
+}
+
+
+const searchByInputCountries = async (e) => {
+ const data = await getAllCountriesData();
+ let searchInput = e.target.value.toLowerCase()
+ let searchLength = searchInput.length;
+ const filteredData = data?.filter(({ name }) => {
+ const space = name.toLowerCase().indexOf(searchInput[0]);
+ if (name.slice(0, searchLength).toLowerCase() == searchInput)
+ return name;
+ else if (name[space - 1] === ' ' && name.slice(space, space + searchLength).toLowerCase() == searchInput)
+ return name;
+ });
+
+ return displayCountries(filteredData);
+}
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..4b74b92
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,21 @@
+function toggleDropdown() {
+ const wrapper = document.querySelector('.dropdown-wrapper');
+ wrapper.classList.toggle('open');
+
+ if (wrapper.classList.contains('open')) {
+ document.addEventListener('click', handleOutsideClick);
+ } else {
+ document.removeEventListener('click', handleOutsideClick);
+ }
+}
+
+function handleOutsideClick(event) {
+ const wrapper = document.querySelector('.dropdown-wrapper');
+ const body = document.querySelector('.dropdown-body');
+ const header = document.querySelector('.dropdown-header');
+
+ if (!body.contains(event.target) && !header.contains(event.target)) {
+ wrapper.classList.remove('open');
+ document.removeEventListener('click', handleOutsideClick);
+ }
+}
${name}
+-
+