Laboratoria · AlvarezF7 · Jun 24, 2024 · Jun 26, 2024 · Jun 27, 2024 · Jun 28, 2024
diff --git a/alta fidelidad.jpg b/alta fidelidad.jpg
diff --git a/historia de usuario.jpg b/historia de usuario.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,8 +30,8 @@
     "acorn": "^8.8.2",
     "babel-jest": "^27.0.1",
     "css": "^3.0.0",
-    "eslint": "^8.3.0",
-    "gh-pages": "^3.1.0",
+    "eslint": "^8.57.0",
+    "gh-pages": "^6.1.1",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "jsdom": "^22.1.0",
@@ -49,4 +49,4 @@
   "jest": {
     "testEnvironment": "jsdom"
   }
-}
+}
diff --git a/prototipo baja fidelidad.jpg b/prototipo baja fidelidad.jpg
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,57 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+//Este archivo contiene las funciones
 
-export const example = () => {
-  return 'example';
-};
+//  aqui van las funciones del filtro
+export const filterData = (data, value) => {
+  if (value === "all") {
+    return data; // Retornar todos los datos si el filtro es "Todos los años"
+  }
 
-export const anotherExample = () => {
-  return [];
+  const filterDataResult = data.filter(element => element.facts.añoCreacion === value);
+  return filterDataResult;
 };
+
+export const sortData = (data,sortBy,sortOrder) =>{ //ordena el arreglo
+  const sortDataResult = data.sort(function(a,b){//funcion compara y determina como ordenar los
+    if (sortOrder === "asc") {
+      if (a[sortBy] > b[sortBy]) {
+        return 1; 
+      } else if (a[sortBy] < b[sortBy]) {
+        return -1; 
+      } else {
+        return 0;//es para asegurar que el ordenamiento sea estable
+      }
+    } else if (sortOrder === "desc") {
+      if (b[sortBy] > a[sortBy]) {
+        return 1; 
+      } else if (b[sortBy] < a[sortBy]) {
+        return -1; 
+      } else {
+        return 0;
+      }
+    }
+  }); 
+  return sortDataResult;
+}
+
+//funcion para recibir los calculos de las estadistica de pais
+export  function computeStats(data) {
+  const usaBands = data.filter(band => band.facts.pais === "Estados Unidos") /* esta busca y contiene todas pas USAband*/
+  const usaPromedio = (usaBands.length * 100 / data.length);
+
+  return usaPromedio; 
+
+}
+//calular el porcentaje de bandas por decada
+export function decadasData(data) {
+  const decadaDeCreacion= data.map(data => data.facts.añoCreacion);
+  const bandasNoventeras= decadaDeCreacion.reduce((count, year) => {
+    if (year >= 1990 && year < 2000) {
+      return count + 1;
+    } else {
+      return count;
+    }
+  }, 0);
+
+  return bandasNoventeras;
+}
+
diff --git a/src/img/banner2.jpg b/src/img/banner2.jpg
diff --git a/src/img/banner4.jpg b/src/img/banner4.jpg
diff --git a/src/index.html b/src/index.html
@@ -6,6 +6,64 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+  <div class="container" >
+  <div class="banner" id="banner">
+  <img src="img/banner4.jpg" alt="banner">
+  </div>
+  <div class="title">
+   <header>
+      <h1>House of Rock</h1> 
+   </header> 
+   <main>
+    <h2><p>¡Bienvenido a House of Rock! En esta plataforma encontrarás las bandas más emblemáticas
+            del rock.</p></h2>
+   </main>
+  </div>
+  <div class="filtros" name="filtros"> 
+    <form action="" class="form">
+      <label for="select-order" >Buscar:</label>
+      <select name="name" data-testid="select-sort" id="select-order">
+        <option value="selecionar"> selección</option>
+        <option value="asc"> A-Z</option>
+        <option value="desc"> Z-A</option>
+      </select>
+
+      <label for="year"> </label>
+      <select data-testid="select-filter" name="año"  id="year"> 
+        <option value="elige un año">Selecciona un año </option>
+        <option value="1960">1960</option> <!-- The Beatles -->
+        <option value="1962">1962</option> <!-- The Rolling Stones -->
+        <option value="1970">1970</option> <!-- Queen Aerosmith -->
+        <option value="1973">1973</option> <!-- AC/DC -->
+        <option value="1976">1976</option> <!-- U2 -->
+        <option value="1978">1978</option> <!-- Duran Duran -->
+        <option value="1981">1981</option> <!-- Metallica -->
+        <option value="1983">1983</option> <!-- Bon Jovi  Red Hot Chili Peppers -->
+        <option value="1985">1985</option> <!-- Guns N' Roses -->
+        <option value="1987">1987</option> <!-- Nirvana -->
+        <option value="1990">1990</option> <!-- Pearl Jam -->
+        <option value="1992">1992</option> <!-- Blink-182 -->
+        <option value="1993">1993</option> <!-- Korn -->
+        <option value="1994">1994</option> <!-- System of a Down  Foo Fighters-->
+        <option value="1995">1995</option> <!-- Evanescence -->
+        <option value="1996">1996</option> <!-- Linkin Park -->
+        <option value="1998">1998</option> <!-- 30 Seconds to Mars -->
+        <option value="2004">2004</option> <!-- Paramore Panic! at the Disco -->
+        <option value="2006">2006</option> <!-- Black Veil Brides -->
+      </select>
+      <button type="reset" data-testid="button-clear" id="btn">Limpiar</button>
+    </form>
+    <div class="estadistica" id="estadisticas"> 
+      <div class="pais" id="paises"></div>
+      <div class="decadas" name="decadas" id="decade"></div>
+     </div>
+  </div> 
+  <div class="tarjetas" id="root">
+   <!-- aqui van las tarjetas------>
+
+  </div>
+  <footer> Catalina Betancur y Fernanda Álvarez @All Rigth Reserved </footer>
+  </div>
     <script src="main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,56 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
-
+import {filterData,sortData,computeStats,decadasData} from './dataFunctions.js';
+import {renderItems,renderResult,renderDecadas} from './view.js';
 import data from './data/dataset.js';
 
-console.log(example, renderItems(data), data);
+computeStats(data);
+decadasData(data);
+//aqui va todo lo del DOM eventos de escucha y mostrar datos en pantalla
+
+//contiene el resultado de la estadistica DE LUGAR DE CREACION
+const result = computeStats(data);
+renderResult(result);
+
+// contiene el resultado de la estadistica de bandas POR decadas
+const decadaResult = decadasData(data);
+renderDecadas(decadaResult);  
+
+
+//console.log(sortData,renderItems(data), data);
+const root =  document.getElementById("root");
+root.appendChild(renderItems(data)) //esta inyectando el contenido generado en data
+
+const selectFilter = document.getElementById("year");
+selectFilter.addEventListener("change", (event)=> {
+  const valueFilter = event.target.value;
+  const filteredData = filterData(data,valueFilter);
+
+  root.innerHTML= ""; //limpia el contenido actual
+  root.appendChild(renderItems(filteredData)); //mostara los datos filtrados)
+});
+
+const selectOrder = document.getElementById("select-order"); 
+selectOrder.addEventListener ("change", (event) => {
+  const newValue = event.target.value; ///esta es la q capta loas asc y desc
+  const ordenLetras = sortData(data,"name",newValue) //este es el q ordena el array y los muestra
+
+  root.innerHTML= ""  // captura el div  del root y lo limpia
+  root.appendChild(renderItems(ordenLetras)); //agrega los nuevos elementos ordenados
+
+
+  const clearbtn = document.querySelector('[data-testid="button-clear"]'); //es el evento para que el boton limpie
+  clearbtn.addEventListener('click', () => {
+    root.innerHTML=""
+    root.appendChild(renderItems(data));
+
+  })
+
+});
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,161 @@
+.container{
+  margin:1%;
+  padding:1%;
+  position: relative;
+}
+
+body{
+background:linear-gradient(135deg,#0b0b27,#000000);
+background-attachment: fixed;
+color:#f3eaea;
+}
+#banner img{
+  height:300px; 
+  width: 70%; /*ancho*/
+  display:flex;
+  margin:0 auto;/*centra imgen*/
+
+  }
+
+header,main{
+ height:45px ;
+ width:90% ;
+ font-family:'Georgia'; 
+ margin: 40px auto;
+ text-align: center; 
+ display:flexbox;
+ color:#f3eaea;   
+ }
+
+.filtros{ /* este div contiene los selesct y el div pais*/
+  height:80px;
+  width: 35%;
+  padding: 12px;
+  margin: 0 auto;
+  display:inline-flexbox;
+  justify-content: space-between 5px;
+  position: relative;
+
+}
+select{
+  height:35px;
+  width:160px ;
+  margin:15px auto;
+  flex:content;
+  font-size: 15px;
+  display:inline-block;
+  padding:6px ;
+  background-color: #3F8FA0;
+}
+.estadistica { /*este contiene paises y decadas*/
+  width:35% ; 
+  padding:4px;
+  margin: 0 auto;/*centra el div*/
+  font-family: 'georgia';
+  font-size: 17px;
+  border:2px solid rgb(223, 17, 10); 
+  background:linear-gradient(145deg,#e20e0e,#ad0a0a,#eb2907,#ad0a0a,#7a0606);
+  display:flex;
+  /*justify-content:flex-start;*/ 
+}
+
+#paises{
+ width:50% ;
+ margin:10px ;
+ padding:5px;
+ text-align: center;
+ border:2px solid rgb(228, 186, 162);
+ justify-content:space-between ;
+ flex-direction: column;
+ color:whitesmoke;
+ font-family: 'calibri';
+ font-size: larger;
+ display:flex;
+} 
+#decade{
+  width:50% ;
+  margin:10px ;
+  padding: 5px;
+  text-align: center;
+  border:2px solid rgb(228, 186, 162);
+  justify-content:space-between ;
+  flex-direction: column;
+  color:whitesmoke;
+  font-family: 'calibri';
+  font-size: larger;
+  display:flex;
+ } 
+/*boton limpia fltros*/
+[data-testid="button-clear"]{
+    height:35px;
+    width:100px; /*ancho*/
+    background-color: #162a9b49;
+    margin:0 auto;
+    border-color: #19194b;
+    border-radius: 09px;
+    font-size: 15px;
+    color:whitesmoke;
+    cursor: pointer;  /*Cambia la forma del cursor al pasar sobre el botón */  
+}
+[data-testid="button-clear"]:hover{
+  background-color: #6e70df;
+}
+
+/*estilos para las tarjetas ul y li*/
+.root{
+  height:60% ;
+  width: 60%;
+  /*margin:35%;*/
+  justify-content: space-between;
+  /*margin-block:80px ;*/
+ /* display:inline-flexbox;*/
+ /* flex-wrap:wrap ;/*este envuelve los elementos li*/
+
+}
+ul{
+  height:70% ;
+  width:85% ;
+  margin:0 auto ;/*centra el ul con las tarjetas*/
+  padding:1%;
+  color:#0e0d0d; 
+  display:flex;/* agrupa las tarjetas horizontalmente*/
+  flex-wrap:wrap; /*asegura que los li se envuelvan*/
+  justify-content:space-around;
+  /*list-style-type: none;/*elimina las viñeta*/
+ }
+ .cards{  
+  width:90px; /*ancho*/
+  margin-left:2%; /*esta separa las tarjetas*/
+  margin-bottom:30px;
+  color:whitesmoke;
+  font-size:larger;
+  font-family: 'arial';
+  flex-basis:27% ;/*este da tamaño a la tarjeta*/
+  padding-top:20px;
+  padding:2% ;
+  text-align:center;
+  border: 2px solid #e22b0a;
+  background:linear-gradient(145deg,#e20e0e,#ad0a0a,#eb2907,#ad0a0a,#7a0606);
+  border-radius: 15px;
+  /*flex: 1 1 calc(33.333% - 100px); /* Distribución flexible de los elementos? */
+  list-style-type: none;/*elimina las viñeta*/
+ }
+
+img{
+  height:170px; 
+  width:79%; /*210px*/
+  padding:0;
+  display:center ;
+  border:5px solid #000000;
+  border-radius:15px;
+}
+
+footer{
+  color:#f3eaea; 
+  font-size: larger; 
+  text-align: center;
+  margin:60px; 
+  padding:5px;
+
+}
+