Skip to content

Commit dbc86db

Browse files
PamWebDevPamWebDev
authored
Merge pull request #13 from Susana-equihua/data-filter
Inicio de la funcion computeStats, seguimiento CSS
2 parents aa102aa + 41a1755 commit dbc86db

File tree

5 files changed

+312
-144
lines changed

5 files changed

+312
-144
lines changed

‎src/dataFunctions.js‎

Lines changed: 112 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,121 @@ export const filterData = (data, filterBy, value) => {
3232
};
3333

3434
export const sortData = (data, sortBy, sortOrder) => {
35-
if (sortBy === 'name'){
35+
if (sortBy === "name") {
3636
data.sort(function (a, b) {
37-
if (sortOrder === 'ascendente'){ //Añadir el parametro sortOrder ascendente
38-
if (a.name < b.name) return -1; //a aparece antes
39-
if (a.name > b.name) return 1; //b aparece antes
37+
if (sortOrder === "ascendente") {
38+
//Añadir el parametro sortOrder ascendente
39+
if (a.name < b.name) return -1; //a aparece antes
40+
if (a.name > b.name) return 1; //b aparece antes
4041
}
41-
if (sortOrder === 'descendente'){ //Añadir el parametro sortOrder descendente; la lógica de invierte
42-
if (a.name < b.name) return 1; //a aparece antes
43-
if (a.name > b.name) return -1; //b aparece antes
42+
if (sortOrder === "descendente") {
43+
//Añadir el parametro sortOrder descendente; la lógica de invierte
44+
if (a.name < b.name) return 1; //a aparece antes
45+
if (a.name > b.name) return -1; //b aparece antes
4446
}
45-
return 0; //si son iguales no se cambia el orden
47+
return 0; //si son iguales no se cambia el orden
4648
});
47-
return data //retornar la data ordenada
49+
return data; //retornar la data ordenada
4850
}
4951
};
52+
53+
54+
55+
/*export const computeStats = (data) =>{
56+
57+
const hembras = data.filter((element) => element.facts.gender === 'Hembra');
58+
const cantidadHembras = hembras.length;
59+
60+
/*data.reduce((acumulador, elementoActual) => {*/
61+
62+
/*const calculo = (cantidadHembras / data.length) * 100;
63+
return calculo
64+
//console.log(cantidadHembras);
65+
//return cantidadHembras
66+
67+
//}, 1);
68+
69+
/*data.reduce((accumulator, currentObject) => {
70+
71+
72+
});*/
73+
//};
74+
75+
//1. Escoger la propiedad que usaremos para hacer el primer cálculo (genero hembra)
76+
//const totalHembras =
77+
//PRUEBAS
78+
/*export const computeStats = (data, gender, value) => {
79+
const computeStats = (data, property, value) => {
80+
if (property === "gender") {
81+
const calculo = data.reduce((accumulator, currentObject) => {
82+
if (currentObject[property] === value) {
83+
accumulator += 1;
84+
}
85+
return accumulator;
86+
}, 1);
87+
88+
//console.log((calculo / data.length) * 100);
89+
return data.length > 0 ? (calculo / data.length) * 100 : 0;
90+
91+
}
92+
};
93+
};*/
94+
95+
/*export const computeStats = (data, property, value) => { //Creamos
96+
if (property === "gender") {
97+
const calculo = data.reduce((accumulator, currentObject) => {
98+
if (currentObject[property] === value) {
99+
accumulator += 1;
100+
}
101+
return accumulator;
102+
}; 0);
103+
104+
return (calculo / data.length) * 100;
105+
}
106+
};*/
107+
108+
export const computeStats = (data, property, value) => {
109+
//Creamos
110+
if (property === "gender") {
111+
const calculo = data.reduce((accumulator, currentObject) => {
112+
// El metodo reduce es un acumulador, es decir, se encarga de reducir todo un Array a un único valor
113+
if (currentObject[property] === value) {
114+
accumulator += 1;
115+
}
116+
console.log(accumulator);
117+
return accumulator;
118+
}, 0);
119+
return calculo;
120+
}
121+
};
122+
123+
export const computeStats = (data) => {
124+
125+
}
126+
127+
//const hembras = data.gender.Hembra.length
128+
/*const ciudades = [
129+
{ id: 1, nombre: "New york", temperatura: 25 },
130+
{ id: 2, nombre: "Los Ángeles", temperatura: 30 },
131+
{ id: 3, nombre: "Chicago", temperatura: 15 },
132+
{ id: 4, nombre: "Queens", temperatura: 27 }
133+
];
134+
135+
const sumaDeLasTemperaturas = ciudades.reduce((acumulador, ciudad, indice) => {
136+
console.log(`La temperatura de la ciudad de ${ciudad.nombre} es de ${ciudad.temperatura} grados`);
137+
138+
const temperaturaCiudad = ciudad.temperatura;
139+
return acumulador + temperaturaCiudad;
140+
}, 0);
141+
142+
const temperaturaPromedio = sumaDeLasTemperaturas / ciudades.length;
143+
144+
console.log(`La temperatura promedio de los Estados Unidos es de ${temperaturaPromedio} grados`);
145+
146+
147+
148+
//2. Sacar el porcentaje de las que son hembras (Cantidad de hembras/Total de animales x 100)
149+
//2.1. Conseguir la cantidad total de hembras
150+
//2.2. Cantidad total de animales
151+
console.log(data);
152+
};*/

‎src/index.html‎

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
56
<title>Dataverse</title>
67
<link rel="stylesheet" href="style.css" />
78
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -18,65 +19,58 @@
1819
<body>
1920
<header>
2021
<div class="container">
21-
<div id="text-header">
22-
<div id="titular">
23-
<h1>
24-
<img
25-
id="imgLogoDisney"
26-
src="https://raw.githubusercontent.com/Susana-equihua/DEV015-dataverse/main/Disney%20pets/logo%20disney.png"
27-
alt="DISNEY"
28-
/>
29-
MASCOTAS
30-
</h1>
31-
<h2>¡BIENVENIDOS!</h2>
32-
</div>
33-
<div id="presentation-text">
34-
<p id="parrafoBienvenidos">
35-
Descubre el mágico mundo de las mascotas de Disney. Conoce las
36-
historias, aventuras y datos curiosos de los adorables compañeros
37-
de tus personajes favoritos de Disney. Desde el valiente Maximus
38-
hasta el travieso Abu, ¡explora todo lo que hace especiales a
39-
estos encantadores animales!
40-
</p>
41-
</div>
22+
<div clas="text-header">
23+
<h1>
24+
<img
25+
id="imgLogoDisney"
26+
src="https://raw.githubusercontent.com/Susana-equihua/DEV015-dataverse/main/Disney%20pets/logo%20disney.png"
27+
alt="DISNEY"
28+
/>
29+
MASCOTAS
30+
</h1>
31+
<h2>¡BIENVENIDOS!</h2>
32+
<p id="parrafoBienvenidos">
33+
Descubre el mágico mundo de las mascotas de Disney. Conoce las
34+
historias, aventuras y datos curiosos de los adorables compañeros
35+
de tus personajes favoritos de Disney. Desde el valiente Maximus
36+
hasta el travieso Abu, ¡explora todo lo que hace especiales a
37+
estos encantadores animales!
38+
</p>
4239
</div>
4340
<a href="#mainContenidoPrincipal" id="btnConocelos">¡Quiero conocerlos!</a>
44-
</div>
45-
<div id="disney-castle">
46-
<img
47-
id="imgCastilloDisney"
48-
class="castle"
41+
<!--<div class="disney-castle">
42+
<img id="castle"
4943
src="https://raw.githubusercontent.com/Susana-equihua/DEV015-dataverse/main/Disney%20pets/castillo%20de%20disney%20-%20header.png"
5044
alt="Aquí había un castillo de Disney"
51-
/>
45+
/>
46+
</div>-->
5247
</div>
5348
</header>
54-
<main id="mainContenidoPrincipal">
49+
<main>
5550
<div class="container">
56-
<nav id="barraDeFiltroYOrden">
57-
<div id="divFiltroyOrdenar">
58-
<div id="divFiltro">
51+
<nav>
52+
<div id="div-filtro-ordenar">
53+
<div id="div-filtro">
5954
<button id="filter">
6055
<i class="fas fa-bars filter-icon"></i>
6156
</button>
62-
<label for="filter" class="labelFiltro">Filtros de búsqueda</label>
57+
<label for="filter" class="label-filtro">Filtros de búsqueda</label>
6358
</div>
64-
<div id="divOrdenar">
59+
<button id="btn-stats">¿Sabías qué...?</button>
60+
<div id="div-ordenar">
6561
<button id="btnUp">
6662
<i class="fa-solid fa-arrow-up-a-z"></i>
6763
</button>
6864
<button id="btnDown">
6965
<i class="fa-solid fa-arrow-down-z-a"></i>
7066
</button>
71-
<label id="btnOrdenar">Ordenar</label>
67+
<label id="label-ordenar">Ordenar</label>
7268
</div>
7369
</div>
7470
</nav>
75-
</div>
76-
<aside>
77-
<div class="container">
78-
<p id="filtra">FILTRA A LAS MASCOTAS:</p>
79-
71+
<aside>
72+
<div class="container">
73+
<!--<p id="filtra">FILTRA A LAS MASCOTAS:</p>-->
8074
<label class="label" for="gender-select">Género:</label>
8175
<select name="genero" id="gender-select" data-testid="select-filter">
8276
<option value="opcion">Elige una opción</option>
@@ -112,9 +106,11 @@ <h2>¡BIENVENIDOS!</h2>
112106
<button id="btnClear" data-testid="button-clear">
113107
Limpiar filtros
114108
</button>
109+
115110
</div>
116-
</aside>
117-
<section id="root"></section>
111+
</aside>
112+
<section id="root"></section>
113+
</div>
118114
</main>
119115

120116
<footer>

‎src/main.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { filterData, sortData } from './dataFunctions.js';
1+
import { filterData, sortData, computeStats} from './dataFunctions.js';
22
import { renderItems } from './view.js';
33

44
import data from './data/dataset.js';
@@ -36,7 +36,7 @@ filterFilmGenre.addEventListener('change',function(event){
3636

3737

3838
//Manejo del DOM para ordenar por orden alfabético
39-
const sortDataAsc = document.querySelector('button[id=btnDown]'); //Llamar al botón de orden ascendente
39+
const sortDataAsc = document.querySelector('button[id=btnUp]'); //Llamar al botón de orden ascendente
4040
sortDataAsc.addEventListener('click', function(){ //Escuchar el evento click sobre el boton de ordenar ascendente
4141
elementSection.innerHTML = ''; //Para eliminar el renderizado. Se asigna una cadena vacía como contenido HTML al elementSection
4242
const ordenAsc = sortData([...filteredData], 'name', 'ascendente'); //Constante para guardar la funcion de sortData con se le pasa como parametro filteredData
@@ -59,3 +59,21 @@ filterClear.addEventListener('click', function(){ //Escuchar
5959
filterGender.value = '';
6060
filterFilmGenre.value = '';
6161
});
62+
63+
/*const estadistica = document.querySelector('button[id=btn-stats]');
64+
estadistica.addEventListener('click', function(){
65+
const hembrasTotal = computeStats(data);
66+
console.log(hembrasTotal);
67+
//const resultadoHembras = computeStats(data, 'gender', 'Hembra');
68+
//console.log(resultadoHembras)
69+
//return data
70+
});*/
71+
72+
//Manejo de DOM para botón de estadistica
73+
const estadistica = document.querySelector('button[id=btn-stats]');
74+
estadistica.addEventListener('click', function(){
75+
const calculoDos = computeStats(data, 'gender', 'Hembra');
76+
console.log(calculoDos);
77+
78+
//return data
79+
});

0 commit comments

Comments
 (0)