Skip to content

Commit 8d267e7

Browse files
PamWebDevPamWebDev
authored
Merge pull request #14 from Susana-equihua/data-filter
CSS responsive
2 parents dbc86db + 76059d6 commit 8d267e7

File tree

6 files changed

+311
-174
lines changed

6 files changed

+311
-174
lines changed

‎src/data/dataset.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export default [
9898
filmGenre: ['Comedia', 'Musical']
9999
},
100100
extraInfo: {
101-
curiousFact: 'Una de las frases más icónicas de Marie es: "Porque soy una dama, por eso". Su diseño está inspirado en la raza Angora Turco.'
101+
curiousFact: 'Una de las frases más icónicas de Marie es: "Porque soy una dama, por eso".'
102102
}
103103
},
104104
{
@@ -132,7 +132,7 @@ export default [
132132
filmGenre: ['Comedia', 'Musical']
133133
},
134134
extraInfo: {
135-
curiousFact: 'El nombre “Duquesa” refleja un enfoque aristocrático y refinado, subrayando a una gata de alta sociedad en la romántica y culturalmente rica ciudad de París.'
135+
curiousFact: 'Su nombre refleja a una gata de alta sociedad en la romántica y culturalmente rica ciudad de París.'
136136
}
137137
},
138138
{
@@ -268,7 +268,7 @@ export default [
268268
filmGenre: ['Drama', 'Musical']
269269
},
270270
extraInfo: {
271-
curiousFact: 'Sus sonidos fueron creados por el legendario actor de voz Frank Welker, quien también ha dado vida a personajes como Scooby-Doo y el gato Garfield.'
271+
curiousFact: 'Sus sonidos fueron creados por el actor de voz Frank Welker, mismo que ha dado vida a Scooby-Doo y el gato Garfield.'
272272
}
273273
},
274274
{
@@ -333,7 +333,7 @@ export default [
333333
speciesGroup: 'Domestico',
334334
gender: 'Hembra',
335335
livesIn: 'Casa de Querida y Querido',
336-
filmGenre: ['Fantasía', 'Romance', 'Familiar']
336+
filmGenre: ['Romance', 'Familiar']
337337
},
338338
extraInfo: {
339339
curiousFact: 'La escena del espagueti es una de las más icónicas del cine animado y ha sido parodiada en numerosas ocasiones.'

‎src/dataFunctions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export const sortData = (data, sortBy, sortOrder) => {
105105
}
106106
};*/
107107

108-
export const computeStats = (data, property, value) => {
108+
/*export const computeStats = (data, property, value) => {
109109
//Creamos
110110
if (property === "gender") {
111111
const calculo = data.reduce((accumulator, currentObject) => {

‎src/index.html‎

Lines changed: 40 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -38,25 +38,18 @@ <h2>¡BIENVENIDOS!</h2>
3838
</p>
3939
</div>
4040
<a href="#mainContenidoPrincipal" id="btnConocelos">¡Quiero conocerlos!</a>
41-
<!--<div class="disney-castle">
42-
<img id="castle"
43-
src="https://raw.githubusercontent.com/Susana-equihua/DEV015-dataverse/main/Disney%20pets/castillo%20de%20disney%20-%20header.png"
44-
alt="Aquí había un castillo de Disney"
45-
/>
46-
</div>-->
4741
</div>
4842
</header>
49-
<main>
43+
<main id="mainContenidoPrincipal">
5044
<div class="container">
5145
<nav>
52-
<div id="div-filtro-ordenar">
46+
<div id="barra-filtro-ordenar">
5347
<div id="div-filtro">
54-
<button id="filter">
48+
<button id="btn-filter">
5549
<i class="fas fa-bars filter-icon"></i>
5650
</button>
5751
<label for="filter" class="label-filtro">Filtros de búsqueda</label>
5852
</div>
59-
<button id="btn-stats">¿Sabías qué...?</button>
6053
<div id="div-ordenar">
6154
<button id="btnUp">
6255
<i class="fa-solid fa-arrow-up-a-z"></i>
@@ -66,48 +59,48 @@ <h2>¡BIENVENIDOS!</h2>
6659
</button>
6760
<label id="label-ordenar">Ordenar</label>
6861
</div>
62+
<button id="btn-stats">¿Sabías qué...?</button>
6963
</div>
7064
</nav>
7165
<aside>
7266
<div class="container">
73-
<!--<p id="filtra">FILTRA A LAS MASCOTAS:</p>-->
74-
<label class="label" for="gender-select">Género:</label>
75-
<select name="genero" id="gender-select" data-testid="select-filter">
76-
<option value="opcion">Elige una opción</option>
77-
<option value="Hembra">Hembra</option>
78-
<option value="Macho">Macho</option>
79-
</select>
80-
81-
<label class="label" for="specie-select">Tipo de mascota:</label>
82-
<select
83-
name="speciesGroup"
84-
id="specie-select"
85-
data-testid="select-filter"
86-
>
87-
<option value="opcion">Elige una opción</option>
88-
<option value="Aves">Aves</option>
89-
<option value="Animales Acuáticos">Acuáticos</option>
90-
<option value="Domestico">Domesticos</option>
91-
<option value="Pequeñas especies">Especies pequeñas</option>
92-
<option value="Animales de Granja">Granja</option>
93-
<option value="Animales Salvajes">Salvajes</option>
94-
</select>
95-
96-
<label class="label" for="film-select">Pertenece a una película de:</label>
97-
<select name="filmGenre" id="film-select" data-testid="select-filter">
98-
<option value="opcion">Elige una opción</option>
99-
<option value="Comedia">Comedia</option>
100-
<option value="Infantil">Infantil</option>
101-
<option value="Fantasía">Fantasía</option>
102-
<option value="Musical">Musical</option>
103-
<option value="Drama">Drama</option>
104-
<option value="Romance">Romance</option>
105-
</select>
106-
<button id="btnClear" data-testid="button-clear">
67+
<!--<p id="filtra">FILTRA A LAS MASCOTAS:</p>-->
68+
<div class="div-select">
69+
<label class="label" for="gender-select">Género:</label>
70+
<select name="genero" id="gender-select" data-testid="select-filter">
71+
<option value="" disable selected hidden>Elige una opción</option>
72+
<option value="Hembra">Hembra</option>
73+
<option value="Macho">Macho</option>
74+
</select>
75+
</div>
76+
<div class="div-select">
77+
<label class="label" for="specie-select">Tipo de mascota:</label>
78+
<select name="speciesGroup" id="specie-select" data-testid="select-filter">
79+
<option value="" disable selected hidden>Elige una opción</option>
80+
<option value="Aves">Aves</option>
81+
<option value="Animales Acuáticos">Acuáticos</option>
82+
<option value="Domestico">Domesticos</option>
83+
<option value="Pequeñas especies">Especies pequeñas</option>
84+
<option value="Animales de Granja">Granja</option>
85+
<option value="Animales Salvajes">Salvajes</option>
86+
</select>
87+
</div>
88+
<div class="div-select">
89+
<label class="label" for="film-select">Es de una película de:</label>
90+
<select name="filmGenre" id="film-select" data-testid="select-filter">
91+
<option value="" disable selected hidden>Elige una opción</option>
92+
<option value="Comedia">Comedia</option>
93+
<option value="Infantil">Infantil</option>
94+
<option value="Fantasía">Fantasía</option>
95+
<option value="Musical">Musical</option>
96+
<option value="Drama">Drama</option>
97+
<option value="Romance">Romance</option>
98+
</select>
99+
</div>
100+
<button id="btnClear" data-testid="button-clear">
107101
Limpiar filtros
108-
</button>
109-
110-
</div>
102+
</button>
103+
</div>
111104
</aside>
112105
<section id="root"></section>
113106
</div>

‎src/main.js‎

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

44
import data from './data/dataset.js';
@@ -70,10 +70,10 @@ estadistica.addEventListener('click', function(){
7070
});*/
7171

7272
//Manejo de DOM para botón de estadistica
73-
const estadistica = document.querySelector('button[id=btn-stats]');
73+
/*const estadistica = document.querySelector('button[id=btn-stats]');
7474
estadistica.addEventListener('click', function(){
7575
const calculoDos = computeStats(data, 'gender', 'Hembra');
7676
console.log(calculoDos);
7777
7878
//return data
79-
});
79+
});*/

0 commit comments

Comments
 (0)