Ajustes del CSS y Readme

Kav02 · Feb 7, 2024 · 7e8ad21 · 7e8ad21
1 parent c2a7105
commit 7e8ad21
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 130 deletions.
diff --git a/README.md b/README.md
@@ -337,8 +337,8 @@ npm run test:oas // Esto es para correr todos los tests de OAs
   - [x] Tiene un `<header>` con `<h1>`
   - [x] Tiene un `<footer>`
   - [x] Tiene un `<main>` con `<h2>`
-  - [] Todas las etiquetas de controles (inputs, selects, radio, etc) tienen `<label>`
-  - [] `<ul>` esta usado para dibujar la data
+  - [x] Todas las etiquetas de controles (inputs, selects, radio, etc) tienen `<label>`
+  - [x] `<ul>` esta usado para dibujar la data
   - [x] Los hijos de `<li>` usan attributos de microdata `itemscope` e `itemprop`
 
 #### CSS
@@ -439,10 +439,10 @@ Los usuarios quieren una página donde puedan consultar obras de arte cómodamen
 
 Se crearon las historias de usuario para ir trabajando por sprint. Ejemplo de la primer historia de usuario:
 Historia de Usuario
-**Como** (descripcion del usuario) persona interesada en el arte
-**Quiero** (Funcionalidad)__ poder ver obras de arte a modo de tarjetas
-**Para** (beneficio): __Explorarlas fácilmente
-**Criterios de aceptación**
+* **Como** (descripcion del usuario) persona interesada en el arte
+* **Quiero** (Funcionalidad)__ poder ver obras de arte a modo de tarjetas
+* **Para** (beneficio): __Explorarlas fácilmente
+* **Criterios de aceptación**
 • Las tarjetas deben mostrar una imagen de la obra de arte, el título de la obra, el nombre del artista
 • Las tarjetas deben ser de tamaño uniforme y estar dispuestas en una cuadrícula.
 Aceptación: Definition of done
@@ -499,7 +499,12 @@ https://www.figma.com/file/ZNw3k3LMWIG5G5F0D1e31R/Data-verse?type=design&node-id
 
 #### Testeos de usabilidad
 
-A través del desarrollo del proyecto, encontramos que el diseño inicial no era agradable a la vista por la combinación de las imágenes de las obras de arte y la mezcla de color. Se cambió el diseño a colores neutros y sobrios. 
+A través del desarrollo del proyecto, encontramos los siguientes problemas de usabilidad:
+* El diseño inicial no era agradable a la vista por la combinación de las imágenes de las obras de arte y la mezcla de color. Se cambió el diseño a colores neutros y sobrios.
+* El botón de cerrar la tarjeta detallada se cambió para los móviles para que fuera mas amigable al usuario
+* Se hicieron pruebas con tamaños de letra.
+* Se modificó la forma que se muestra la estadística y la tarjeta detallada en la versión móvil.
+
 
 #### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)
 
@@ -681,7 +686,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
 
 - [x] **GitHub: Creación de cuenta y repos, configuración de llaves SSH**
 
-- [ ] **GitHub: Despliegue con GitHub Pages**
+- [x] **GitHub: Despliegue con GitHub Pages**
 
   <details><summary>Links</summary><p>
 
@@ -841,24 +846,26 @@ Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:
 
 * [ ] Cumple con todos los criterios mínimos de aceptación al ejecutar `npm run test:oas`
 * [ ] Cumple con todas las pruebas _end to end_ al ejecutar `npm run test:e2e`
-* [ ] Cumple con todas las pruebas unitarias al ejecutar `npm run test` y
+* [x] Cumple con todas las pruebas unitarias al ejecutar `npm run test` y
   que tienen una cobertura del 70% de _statements_ (_sentencias_),
   _functions_ (_funciones_), _lines_ (_líneas_), y _branches_
-* [ ] Esta libre de _errores_ de `eslint` al ejecutar `npm run pretest`
-* [ ] Está subido a GitHub y desplegado en GitHub Pages
-* [ ] Captura de pantalla del prompt utilizado para generar los datos.
+  ![alt text](image-11.png)
+* [x] Esta libre de _errores_ de `eslint` al ejecutar `npm run pretest`
+![alt text](image-12.png)
+* [x] Está subido a GitHub y desplegado en GitHub Pages
+* [x] Captura de pantalla del prompt utilizado para generar los datos.
 * Tiene un `README.md` con la siguente:
-  - [ ] _Definición del producto_ clara e informativa
-  - [ ] Historias de usuario
-  - [ ] Un _Diseño de la Interfaz de Usuaria_ (prototipo de alta fidelidad)
-  - [ ] El listado de problemas que detectaste a través de tests
+  - [x] _Definición del producto_ clara e informativa
+  - [x] Historias de usuario
+  - [x] Un _Diseño de la Interfaz de Usuaria_ (prototipo de alta fidelidad)
+  - [x] El listado de problemas que detectaste a través de tests
     de usabilidad en el `README.md`
 * Tiene un UI que cumple las funcionalidades:
-  - [ ] Muestra lista con datos y/o indicadores
-  - [ ] Permite ordenar data por uno o más campos (asc y desc)
-  - [ ] Permite filtrar data con base en una condición
-  - [ ] Permite limpiar los filtros con un botón
-  - [ ] Es _responsive_
+  - [x] Muestra lista con datos y/o indicadores
+  - [x] Permite ordenar data por uno o más campos (asc y desc)
+  - [x] Permite filtrar data con base en una condición
+  - [x] Permite limpiar los filtros con un botón
+  - [x] Es _responsive_
 
 Recuerda que debes hacer una autoevaluación de _objetivos de aprendizaje_ y
 _life skills_ desde tu dashboard de estudiante.

diff --git a/image-11.png b/image-11.png
diff --git a/image-12.png b/image-12.png
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,30 +1,13 @@
 
 
 export const filterData = (data, filterBy, value) => {
-  /*Crear filtro por artista en main
+  /*Filtro por artista creado en main
 Crear un desplegable recorriendo la información del artdata buscando los artistas para desplegar la lista para que el usario seleccione*/
-  //Crear un evento para que al hacer click en el artista recorra la base de datos y cuando encuentre coincidencia despliegue la tarjeta en pantalla
-  //  1-Buscar en cada tarjeta el nombre del artista y cuando coincide despliega la tarjeta en pantalla, mostrando todas las que tienen coincidencia
-  const paintingsperFilter = [];
-  for (const painting of data) {
-    if (painting.facts[filterBy] === value) {
-      paintingsperFilter.push(painting);
-    }
-  }
-  return paintingsperFilter;
+  //Evento para que al hacer click en el artista filtre la base de datos y cuando encuentre coincidencia despliegue la tarjeta en pantalla
+  //  Filtra haciendo una búsqueda en cada tarjeta el nombre del artista y cuando coincide despliega la tarjeta en pantalla, mostrando todas las que tienen coincidencia
+  return data.filter((painting) => painting.facts[filterBy] === value);
 };
-
-//data, filterBy, value
-//Crear filtro por artista en main
-
-//Crear un desplegable recorriendo la información del artdata buscando los artistas para desplegar la lista para que el usario seleccione
-//Crear un evento para que al hacer click en el artista recorra la base de datos y cuando encuentre coincidencia despliegue la tarjeta en pantalla
-//  1-Buscar en cada tarjeta el nombre del artista y cuando coincide despliega la tarjeta en pantalla, mostrando todas las que tienen coincidencia
-//  2-Al dar click en el botón limpiar regresa a "home"
-//  3- Ordenar (desarrollar aparte)
-//Crear orden
-
-
+
 
 export const sortData = (data, sortBy, sortOrder) => {
   const sortedCard = [];
@@ -42,7 +25,6 @@ export const sortData = (data, sortBy, sortOrder) => {
 
 };
 
-
 export const computeStats = (data) => {
   const movementTotal=data.length;
   const Estadistic= data.reduce((acumulador,movementCount)=>{
@@ -58,6 +40,24 @@ export const computeStats = (data) => {
 };
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 /*No se está usando
 const artName = [];
 for (const list of data) {

diff --git a/src/index.html b/src/index.html
@@ -1,69 +1,67 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Data Verse</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet"&gt>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"/>
-    <link rel="stylesheet" href="style.css" />
-  </head>
 
-  <body>
-    <main>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Data Verse</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
+    rel="stylesheet" />
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <main>
     <header>
       <h1>ART PLACE</h1>
     </header>
     <div id="banner">
       <h2>GALERIA</h2>
       <article>
-      <div class="select-menu">
-        <label for ="artist-filter">Artista</label>
-          <select data-testid="select-filter" name = "artist-filter" id = "artist-filter">
+        <div class="select-menu">
+          <label for="artist-filter">Artista</label>
+          <select data-testid="select-filter" name="artist-filter" id="artist-filter">
           </select>
-                  <label for="artmovement-filter">Corrientes</label>
+          <label for="artmovement-filter">Corrientes</label>
           <select data-testid="select-filter" id="artmovement-filter" name="artmovement-filter">
           </select>
-          <label for ="alphabetical-order">Ordenar</label>
+          <label for="alphabetical-order">Ordenar</label>
           <select data-testid="select-sort" id="alphabetical-order" name="alphabetical-order">
             <option value="Ordenar" disabled selected>Ordenar</option>
             <option value="asc">A - Z</option>
             <option value="desc">Z - A</option>
           </select>
         </div>
-      <div class ="buttons"> 
-      <button data-testid="button-stats" id="button-stats">
-        <span class="material-symbols-outlined">
-          bar_chart
-          </span> 
-      </button>
-        <button data-testid="button-clear" id = "button-clear">Limpiar
-        </button>
-      </div> 
+        <div class="buttons">
+          <button data-testid="button-stats" id="button-stats">
+            <span class="material-symbols-outlined">
+              bar_chart
+            </span>
+          </button>
+          <button data-testid="button-clear" id="button-clear">Limpiar
+          </button>
+        </div>
       </article>
     </div>
-    <section id="movementEstadistic">
-    <div id="iconContainer"></div> 
-      <div id = "stats"></div>
-      <div id = "graphs"></div>
+    <section id="movementEstadistic"> 
+      <div id="titulo">Porcentaje de Obras por Corriente</div>
+      <div id="iconContainer">
+      <div id="stats"></div>
+      <div id="graphs"></div></div>
     </section>
-    <section id="root">
-      <!-- <ul id = "artCard" itemscope itemtype="https://schema.org/VisualArtwork">
-      <li id = "cardContainer" itemscope itemtype="https://schema.org/VisualArtwork"></li>
-  </ul>  -->
-  </section>
+    <section id="root"></section>
     <section id="detailCard"></section>
-    <!-- <section class="chart" id="statsCard">
-      <ul class= "bars"></ul> -->
-    </section>
-
-    </main>
+
+  </main>
 
-    <footer>Korin Amador y Diana Vilchez</footer>
-    <script src="main.js" type="module"></script>
+  <footer>Korin Amador y Diana Vilchez</footer>
+  <script src="main.js" type="module"></script>
 
-  </body>
-</html>
+</body>
 
+</html>
diff --git a/src/main.js b/src/main.js
@@ -44,7 +44,7 @@ for (const artwork of data) {
 const movementOptions = movementList.map(
   (move) => `<option value="${move}">${move}</option>`
 );
-const movementSelect = document.getElementById("artmovement-filter");
+const movementSelect = document.querySelector("#artmovement-filter");
 movementSelect.innerHTML = `<option disabled selected>Corrientes</option>
 ${movementOptions.join("")}`;
 
@@ -54,9 +54,9 @@ document
   .querySelector("#artist-filter")
   .addEventListener("change", function (event) {
     const artistDisplay = event.target.value;
-    document.getElementById("artmovement-filter").value = "Corrientes";
+    document.querySelector("#artmovement-filter").value = "Corrientes";
     document.querySelector("#alphabetical-order").value = "Ordenar";
-    const artistCards = filterData(data, "artistName", artistDisplay);
+    const artistCards = filterData(currentData, "artistName", artistDisplay);
     currentData = [...artistCards];
     const filteredCards = renderItems(artistCards);
     const clearScreen = document.querySelector("#root");
@@ -66,8 +66,8 @@ document
 //Por movimiento
 movementSelect.addEventListener("change", function () {
   //change:se dispara cuando hay una alteración para <select> al valor de un elemento es confirmada por el usuario.
-  document.getElementById("artist-filter").value = "Artistas"; //Resetear filtro artistas
-  document.getElementById("alphabetical-order").value = "Ordenar";
+  document.querySelector("#artist-filter").value = "Artistas"; //Resetear filtro artistas
+  document.querySelector("#alphabetical-order").value = "Ordenar";
   const selectedArtMovement = movementSelect.value; // Filtrar y mostrar las tarjetas correspondientes
   const filterMovement = filterData(data, "artMovement", selectedArtMovement);
   currentData = [...filterMovement];
@@ -82,9 +82,9 @@ function clear_filters() {
   const clearScreen = document.getElementById("root");
   clearScreen.innerHTML = "";
   clearScreen.appendChild(shortCards);
-  document.getElementById("artist-filter").value = "Artistas";
-  document.getElementById("artmovement-filter").value = "Corrientes";
-  document.getElementById("alphabetical-order").value = "Ordenar";
+  document.querySelector("#artist-filter").value = "Artistas";
+  document.querySelector("#artmovement-filter").value = "Corrientes";
+  document.querySelector("#alphabetical-order").value = "Ordenar";
 }
 const buttonClear = document.querySelector('[data-testid="button-clear"]');
 buttonClear.addEventListener("click", clear_filters);
@@ -103,7 +103,7 @@ document
 
 //ESTADISTICA
 const dataEstadistic = computeStats(data);
-const selectEstadistic = document.getElementById("movementEstadistic");
+const selectEstadistic = document.querySelector("#movementEstadistic");
 document.querySelector("#button-stats").addEventListener("click", function () {
   if (selectEstadistic.style.display === "flex") {
     selectEstadistic.style.display = "none";
@@ -117,11 +117,9 @@ document.querySelector("#button-stats").addEventListener("click", function () {
         const cardEsta = document.createElement("div");
         cardEsta.id = "cardEsta";
         cardEsta.innerHTML = `${key}: ${value} %`;
-
         const graph = document.createElement("div");
         graph.id = "graph";
         graph.innerHTML = graphIcon(value);
-
         stats.appendChild(cardEsta);
         graphs.appendChild(graph);
       });
@@ -136,6 +134,22 @@ function graphIcon(count) {
   }
   return icon;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 // const iconContainer = document.getElementById("iconContainer");
 // iconContainer.innerHTML = graphIcon();