diff --git a/src/data.js b/src/data.js index 6187f3a2..ed600b26 100644 --- a/src/data.js +++ b/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 }; diff --git a/src/main.js b/src/main.js index 79b0362b..ad67108f 100644 --- a/src/main.js +++ b/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"/> ${countryName} - `; + + + `; containerList.insertAdjacentHTML("beforeend", html); + + // Obtener todos los elementos
  • recién insertados + const countryItems = containerList.querySelectorAll('.country-item-li'); + + // Agregar evento de clic a cada elemento
  • + 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 ////////////////// \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 5e77a448..0d8288d2 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,122 +1,216 @@ // import { example, anotherExample } from '../src/data.js'; import { - // generateCountriesList, searchCountries, + generateAlphabet, filterByContinents, + filterBySubregion, + filterByLanguages, + // sortByPopulation, + // sortByArea, + addPopulationDensity, + // sortByPopulationDensity, + // averagePopulationDensityByContinent, + // filterPopulationDensityByContinent } from "../src/data.js"; //crear una const que sera igual a un objeto const countries = [ { - name: { - common: "Guatemala", - official: "Republic of Guatemala", - }, - capital: ["Guatemala City"], - languages: { - spa: "Spanish", + "name": { + "common": "Guatemala", + "official": "Republic of Guatemala" }, - borders: ["BLZ", "SLV", "HND", "MEX"], - area: 108889, - population: 16858333, - gini: { - 2014: 48.3, + "tld": [ + ".gt" + ], + "independent": true, + "capital": [ + "Guatemala City" + ], + "subregion": "Central America", + "languages": { + "spa": "Spanish" }, - continents: ["America"], - flags: { - png: "https://flagcdn.com/w320/gt.png", - svg: "https://flagcdn.com/gt.svg", - alt: "The flag of Guatemala is composed of three equal vertical bands of light blue, white and light blue, with the national coat of arms centered in the white band.", + "borders": [ + "BLZ", + "SLV", + "HND", + "MEX" + ], + "area": 108889, + "flag": "🇬🇹", + "population": 16858333, + "gini": { + "2014": 48.3 }, + "fifa": "GUA", + "timezones": [ + "UTC-06:00" + ], + "continents": [ + "America" + ], + "flags": { + "png": "https://flagcdn.com/w320/gt.png", + "svg": "https://flagcdn.com/gt.svg", + "alt": "The flag of Guatemala is composed of three equal vertical bands of light blue, white and light blue, with the national coat of arms centered in the white band." + } }, { - name: { - common: "Singapore", - official: "Republic of Singapore", - }, - capital: ["Singapore"], - languages: { - zho: "Chinese", - eng: "English", - msa: "Malay", - tam: "Tamil", + "name": { + "common": "Singapore", + "official": "Republic of Singapore" }, - area: 710, - population: 5685807, - continents: ["Asia"], - flags: { - png: "https://flagcdn.com/w320/sg.png", - svg: "https://flagcdn.com/sg.svg", - alt: "The flag of Singapore is composed of two equal horizontal bands of red and white. On the hoist side of the red band is a fly-side facing white crescent which partially encloses five small five-pointed white stars arranged in the shape of a pentagon.", + "tld": [ + ".sg", + ".新加坡", + ".சிங்கப்பூர்" + ], + "independent": true, + "capital": [ + "Singapore" + ], + "subregion": "South-Eastern Asia", + "languages": { + "zho": "Chinese", + "eng": "English", + "msa": "Malay", + "tam": "Tamil" }, + "area": 710, + "flag": "🇸🇬", + "population": 5685807, + "fifa": "SIN", + "timezones": [ + "UTC+08:00" + ], + "continents": [ + "Asia" + ], + "flags": { + "png": "https://flagcdn.com/w320/sg.png", + "svg": "https://flagcdn.com/sg.svg", + "alt": "The flag of Singapore is composed of two equal horizontal bands of red and white. On the hoist side of the red band is a fly-side facing white crescent which partially encloses five small five-pointed white stars arranged in the shape of a pentagon." + } }, { - name: { - common: "Bosnia and Herzegovina", - official: "Bosnia and Herzegovina", - }, - capital: ["Sarajevo"], - languages: { - bos: "Bosnian", - hrv: "Croatian", - srp: "Serbian", + "name": { + "common": "Bosnia and Herzegovina", + "official": "Bosnia and Herzegovina" }, - borders: ["HRV", "MNE", "SRB"], - area: 51209, - population: 3280815, - gini: { - 2011: 33, + "tld": [ + ".ba" + ], + "independent": true, + "capital": [ + "Sarajevo" + ], + "subregion": "Southeast Europe", + "languages": { + "bos": "Bosnian", + "hrv": "Croatian", + "srp": "Serbian" }, - continents: ["Europe"], - flags: { - png: "https://flagcdn.com/w320/ba.png", - svg: "https://flagcdn.com/ba.svg", - alt: "The flag of Bosnia and Herzegovina has a blue field, at the center of which is a large yellow hoist-side facing right-angled triangle that is based on the top edge and spans the height of the field. Adjacent to the hypotenuse of this triangle are nine adjoining five-pointed white stars with the top and bottom stars cut in half by the edges of the field.", + "borders": [ + "HRV", + "MNE", + "SRB" + ], + "area": 51209, + "flag": "🇧🇦", + "population": 3280815, + "gini": { + "2011": 33 }, + "fifa": "BIH", + "timezones": [ + "UTC+01:00" + ], + "continents": [ + "Europe" + ], + "flags": { + "png": "https://flagcdn.com/w320/ba.png", + "svg": "https://flagcdn.com/ba.svg", + "alt": "The flag of Bosnia and Herzegovina has a blue field, at the center of which is a large yellow hoist-side facing right-angled triangle that is based on the top edge and spans the height of the field. Adjacent to the hypotenuse of this triangle are nine adjoining five-pointed white stars with the top and bottom stars cut in half by the edges of the field." + } }, { - name: { - common: "Maldives", - official: "Republic of the Maldives", - }, - capital: ["Malé"], - languages: { - div: "Maldivian", + "name": { + "common": "Maldives", + "official": "Republic of the Maldives" }, - area: 300, - population: 540542, - gini: { - 2016: 31.3, + "tld": [ + ".mv" + ], + "independent": true, + "capital": [ + "Malé" + ], + "subregion": "Southern Asia", + "languages": { + "div": "Maldivian" }, - continents: ["Asia"], - flags: { - png: "https://flagcdn.com/w320/mv.png", - svg: "https://flagcdn.com/mv.svg", - alt: "The flag of Maldives has a red field, at the center of which is a large green rectangle bearing a fly-side facing white crescent.", + "area": 300, + "flag": "🇲🇻", + "population": 540542, + "gini": { + "2016": 31.3 }, + "fifa": "MDV", + "timezones": [ + "UTC+05:00" + ], + "continents": [ + "Asia" + ], + "flags": { + "png": "https://flagcdn.com/w320/mv.png", + "svg": "https://flagcdn.com/mv.svg", + "alt": "The flag of Maldives has a red field, at the center of which is a large green rectangle bearing a fly-side facing white crescent." + } }, { - name: { - common: "Latvia", - official: "Republic of Latvia", - }, - capital: ["Riga"], - languages: { - lav: "Latvian", + "name": { + "common": "Latvia", + "official": "Republic of Latvia" }, - borders: ["BLR", "EST", "LTU", "RUS"], - area: 64559, - population: 1901548, - gini: { - 2018: 35.1, + "tld": [ + ".lv" + ], + "independent": true, + "capital": [ + "Riga" + ], + "subregion": "Northern Europe", + "languages": { + "lav": "Latvian" }, - continents: ["Europe"], - flags: { - png: "https://flagcdn.com/w320/lv.png", - svg: "https://flagcdn.com/lv.svg", - alt: "The flag of Latvia has a carmine-red field with a thin white horizontal band across the middle of the field.", + "borders": [ + "BLR", + "EST", + "LTU", + "RUS" + ], + "area": 64559, + "flag": "🇱🇻", + "population": 1901548, + "gini": { + "2018": 35.1 }, + "fifa": "LVA", + "timezones": [ + "UTC+02:00" + ], + "continents": [ + "Europe" + ], + "flags": { + "png": "https://flagcdn.com/w320/lv.png", + "svg": "https://flagcdn.com/lv.svg", + "alt": "The flag of Latvia has a carmine-red field with a thin white horizontal band across the middle of the field." + } }, { "name": { @@ -153,26 +247,45 @@ const countries = [ const CountriesAmerica=[ { - name: { - common: "Guatemala", - official: "Republic of Guatemala", - }, - capital: ["Guatemala City"], - languages: { - spa: "Spanish", + "name": { + "common": "Guatemala", + "official": "Republic of Guatemala" }, - borders: ["BLZ", "SLV", "HND", "MEX"], - area: 108889, - population: 16858333, - gini: { - 2014: 48.3, + "tld": [ + ".gt" + ], + "independent": true, + "capital": [ + "Guatemala City" + ], + "subregion": "Central America", + "languages": { + "spa": "Spanish" }, - continents: ["America"], - flags: { - png: "https://flagcdn.com/w320/gt.png", - svg: "https://flagcdn.com/gt.svg", - alt: "The flag of Guatemala is composed of three equal vertical bands of light blue, white and light blue, with the national coat of arms centered in the white band.", + "borders": [ + "BLZ", + "SLV", + "HND", + "MEX" + ], + "area": 108889, + "flag": "🇬🇹", + "population": 16858333, + "gini": { + "2014": 48.3 }, + "fifa": "GUA", + "timezones": [ + "UTC-06:00" + ], + "continents": [ + "America" + ], + "flags": { + "png": "https://flagcdn.com/w320/gt.png", + "svg": "https://flagcdn.com/gt.svg", + "alt": "The flag of Guatemala is composed of three equal vertical bands of light blue, white and light blue, with the national coat of arms centered in the white band." + } }, { "name": { @@ -207,6 +320,75 @@ const CountriesAmerica=[ }, ]; +const TEST_TEXT_ALPHABET = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] + +// Test function `searchCountries` +describe('searchCountries', () => { + it("Should return an object with a country information", () => { + expect(typeof searchCountries(countries, "Si")).toEqual("object"); + }); +}); + +// Test function `generateAlphabet` +describe('generateAlphabet', () => { + it('Should return an array of alphabet', () => { + expect(generateAlphabet()).toEqual(TEST_TEXT_ALPHABET) + }) +}); + +// Test function `filterByContinents` +describe('FilterByContinents("America")', () => { + it("Should return an object with an array of countries that belong America", () => { + expect(typeof filterByContinents(countries, "America")).toBe("object"); + }); + + it ("Should return empty array",() => { + expect(filterByContinents(countries,"Africa")).toEqual([]) + }); +}); + +test('filterByContinents should return countries from the specified continent',() => { + const continent = 'America'; + const result = filterByContinents(countries,continent); + + expect(result).toEqual(CountriesAmerica); +}); + +// Test function `filterBySubregion` +describe('filterBySubregion("Caribbean")', () => { + it("Should return an object", () => { + expect(typeof filterBySubregion(countries, "Caribbean")).toBe("object"); + }); + + it("Should return an empty array for non-existing subregion", () => { + expect(filterBySubregion(countries, "NonExistingSubregion")).toEqual([]); + }); + + // it("Should filter countries by subregion", () => { + // const filteredCountries = filterBySubregion(countries, "Caribbean"); + + // expect(filteredCountries).toEqual(countries) + // }); +}); + +// Test function `filterByLanguages` +describe('filterByLanguages', () => { + it("Should return an object", () => { + expect(typeof filterByLanguages(countries, "spa")).toBe("object"); + }); +}); + +// Test function `sortByPopulation` +describe('addPopulationDensity', () => { + it("Should return an object", () => { + expect(typeof addPopulationDensity(countries)).toBe("object"); + }); +}); + + + + + // describe("generateCountriesList result should be a function", () => { // it("is a function", () => { // expect(typeof generateCountriesList).toBe("function"); @@ -228,29 +410,6 @@ const CountriesAmerica=[ // }); // }); -describe("searchCountries should return an object with a country information", () => { - it("Should return an object", () => { - expect(typeof searchCountries(countries, "Si")).toBe("object"); - }); -}); - -describe('FilterByContinents("America")', () => { - it("Should return an object with an array of countries that belong America", () => { - expect(typeof filterByContinents(countries, "America")).toBe("object"); - }); - - it ("Should return empty array",()=>{ - expect(filterByContinents(countries,"Africa")).toEqual([]) - }); -}); - -test('filterByContinents should return countries from the specified continent',()=>{ - const continent='America'; - const result=filterByContinents(countries,continent); - - expect(result).toEqual(CountriesAmerica); -}) - // describe('example', () => { // it('is a function', () => { // expect(typeof example).toBe('function');