ADD information countries

src/data.js

@@ -9,7 +9,7 @@ const searchCountries = (countries, inputText) => {
     }
   });
   return result;
-}
+};
 
 // La función `generateAlphabet` genera las letras del alfabeto.
 const generateAlphabet = () => {
@@ -20,16 +20,16 @@ const generateAlphabet = () => {
     alphabet.push(letter);
   }
   return alphabet;
-}
+};
 
 // La función `filterByContinents` filtra un conjunto de datos (data) para encontrar los elementos que pertenecen a un continente específico (continent).
 const filterByContinents = (data, continent) => {
-  return data.filter(country=>country.continents.includes(continent));
+  return data.filter(country => country.continents.includes(continent));
 };
 
 // La función `filterBySubregion` filtra un conjunto de datos (data) para encontrar los elementos que pertenecen a una subregion en específico (subRegion).
 const filterBySubregion = (data, subRegion) => {
-  return data.filter(country=>country.subregion===subRegion)
+  return data.filter(country => country.subregion === subRegion)
 };
 
 // La función `filterByLanguages` filtra un conjunto de datos (data) para encontrar los países que tienen un idioma específico (language)
@@ -58,7 +58,7 @@ const sortByPopulation = (data, sortOrder) => {
     break;
   }
   case -1: {
-    result= data.countries.slice().sort(
+    result = data.countries.slice().sort(
       (a, b) => b.population - a.population
     );
     break;
@@ -91,7 +91,7 @@ const sortByArea = (data, sortOrder) => {
 };
 
 // La función me calcula la densidad poblacion y la adiciona como parametro key al objeto countries
-const addPopulationDensity = (data)=>{
+const addPopulationDensity = (data) => {
   data.map((country) => {
     country.populationDensity = Math.trunc(country.population/country.area);
   });
@@ -118,6 +118,20 @@ const sortByPopulationDensity = (data, sortOrder) => {
   return result;
 };
 
+const averagePopulationDensityByContinent = (data,continent) => {
+  const countriesByContinent = filterByContinents(data,continent);
+  return countriesByContinent.reduce((sum,country) => sum + country.populationDensity,0) / countriesByContinent.length; 
+};
+
+const filterPopulationDensityByContinent = (data,continent) => {
+  const  popDensityArray = [];
+  const countries = filterByContinents(data,continent);
+  countries.forEach((country) => {
+    popDensityArray.push(country.populationDensity)
+  });
+  return popDensityArray
+};
+
 export {
   searchCountries,
   generateAlphabet,
@@ -127,5 +141,7 @@ export {
   sortByPopulation,
   sortByArea,
   addPopulationDensity,
-  sortByPopulationDensity
+  sortByPopulationDensity,
+  averagePopulationDensityByContinent,
+  filterPopulationDensityByContinent
 };

src/main.js

@@ -8,7 +8,8 @@ import {
   sortByPopulation,
   sortByArea,
   addPopulationDensity,
-  sortByPopulationDensity
+  sortByPopulationDensity,
+  // averagePopulationDensityByContinent
 } from "./data.js";
 
 const section = document.querySelector(".countries-main");
@@ -47,8 +48,26 @@ const generateCountriesUl = (data, tittle) => {
         alt="flag country"
         width="30"/>
         <a href="#">${countryName}</a>
-      </li>`;
+        <div class="country-info-container hidden">
+          <h2>${country.name.common}</h2>
+          <p>Capital: ${country.capital}</p>
+          <p>Gini: ${country.gini}</p>
+          <p>Time Zone: ${country.timezones.join(', ')}</p>
+          </div>
+      </li>
+      `;
     containerList.insertAdjacentHTML("beforeend", html);
+
+    // Obtener todos los elementos <li> recién insertados
+    const countryItems = containerList.querySelectorAll('.country-item-li');
+
+    // Agregar evento de clic a cada elemento <li>
+    countryItems.forEach((countryItem) => {
+      countryItem.addEventListener('click', function () {
+        const infoContainer = this.querySelector('.country-info-container');
+        infoContainer.classList.toggle('hidden');
+      });
+    });
   }
 };
 
@@ -251,7 +270,7 @@ window.addEventListener("load", () => {
 
     // Se agrega el evento al icono de la flecha 
     iconArrow.addEventListener('click', () => {
-      sortOrderType=sortOrderType*-1
+      sortOrderType = sortOrderType * -1
       switch (filterKind) {
       case "area": {
         countriesSortedBy = sortByArea(countries, sortOrderType);
@@ -334,13 +353,17 @@ window.addEventListener("load", () => {
 // const countriesByG = filterByLetter(countries.countries, "G");
 // console.log(countriesByG);
 
-// const countriesSortedByPopulationDown = sortByPopulation(countries, -1);
+// const temCountries = countries.countries.slice()
+// const temCountries2 = countries.countries.slice()
+
+// const countriesSortedByPopulationDown = sortByPopulation(temCountries, -1);
 // console.log("Sorted by population down");
 // console.log(countriesSortedByPopulationDown);
 
-// const countriesSortedByPopulationUp = sortByPopulation(countries, 1);
+// const countriesSortedByPopulationUp = sortByPopulation(temCountries2, 1);
 // console.log("Sorted by population up");
 // console.log(countriesSortedByPopulationUp);
+// console.log(typeof(countriesSortedByPopulationUp));
 
 // const countruiessortedByAreaUp = sortByArea(countries, 1);
 // console.log("Sorted by area up");
@@ -371,4 +394,7 @@ window.addEventListener("load", () => {
 
 // console.log("Filter by population density down");
 // console.log(sortByPopulation(countries, -1));
+
+// console.log("America average population density")
+// console.log(Math.trunc(averagePopulationDensityByContinent(countries.countries, "America")))
 ////////////////   aque terminan pruebas de filtros   //////////////////