Countries-APP/script.js at main · hbapte/Countries-APP · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

const countryList = document.getElementById('countryList');

async function fetchCountries() {
  try {
    const response = await fetch('https://restcountries.com/v3.1/all');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching countries:', error);
    return [];
  }
}

const themeToggle = document.getElementById('themeToggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-theme');
  if (body.classList.contains('dark-theme')) {
    themeToggle.innerHTML = '<p> <i class="theme-icon bx bx-sun"></i>Light Mode</p>';
  } else {
    themeToggle.innerHTML = '<p> <i class="theme-icon bx bx-moon"></i>Dark Mode</p>';
  }
});

const searchButton = document.getElementById('searchButton');
searchButton.addEventListener('click', performSearch);


function performSearch() {
  const searchTerm = document.getElementById('searchInput').value.toLowerCase();
  const filteredCountries = countries.filter(country =>
    country.name.common.toLowerCase().includes(searchTerm)
  );
  renderCountries(filteredCountries);
}


(async function () {
  countries = await fetchCountries();
  renderCountries(countries);
})();


const regionSelect = document.getElementById('choosen_region');
regionSelect.addEventListener('change', filterByRegion);

function filterByRegion() {
  const selectedRegion = regionSelect.value;
  if (selectedRegion === '') {
    renderCountries(countries);
  } else {
    const filteredCountries = countries.filter(country =>
      country.region.toLowerCase() === selectedRegion
    );
    renderCountries(filteredCountries);
  }
}


(async function () {
  countries = await fetchCountries();
  renderCountries(countries);
})();


  function renderCountries(countries) {
    countryList.innerHTML = '';
    countries.forEach(country => {
      const countryCard = document.createElement('div');
      countryCard.classList.add('country-card');

      const languages = Object.values(country.languages).join(', ');
      const currencies = Object.values(country.currencies).map(currency => `${currency.name} (${currency.symbol})`).join(', ');

      countryCard.innerHTML = `
        <img class="country-flag" src="${country.flags.png}" alt="${country.name.common} Flag">
        <h2 class="country-name">${country.name.common}</h2>
        <p class="country-info"><span class="info-label">Capital:</span> <span class="capital">${country.capital[0]}</span></p>
        <p class="country-info"><span class="info-label">Region:</span> <span class="region">${country.region}</span></p>
        <p class="country-stat">Population: <span class="population">${country.population}</span></p>
        <p class="country-info"><span class="info-label">Currency:</span> <span class="currency">${currencies}</span></p>
        <p class="country-info"><span class="info-label">Language:</span> <span class="language">${languages}</span></p>

      `;
      countryList.appendChild(countryCard);
    });
  }


  function toggleTheme() {
    darkMode = !darkMode;
    document.body.classList.toggle('dark-theme', darkMode);
  }


  (async function () {
    const countries = await fetchCountries();
    renderCountries(countries);
  })();


(async function () {
  const countries = await fetchCountries();
  renderCountries(countries);
})();