Readme

Kav02 · Feb 5, 2024 · f10477f · f10477f
1 parent 2abd7a7
commit f10477f
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 279 deletions.
diff --git a/README.md b/README.md
diff --git a/image-1.png b/image-1.png
diff --git a/image-2.png b/image-2.png
diff --git a/image.png b/image.png
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -37,7 +37,7 @@ export const sortData = (data, sortBy, sortOrder) => {
     sortOrder === "desc";
     sortedCard.sort((a, b) => b.name.localeCompare(a.name));
   }
-  console.log(sortedCard)
+
   return sortedCard;
 
 };
@@ -52,7 +52,7 @@ export const computeStats = (data) => {
   {});
   const percentage = {};
   for (const Move in Estadistic) {
-    percentage[Move] = ((Estadistic[Move] / movementTotal) * 100);
+    percentage[Move] = Number((Estadistic[Move] / movementTotal) * 100);
   }
   return percentage;
 };

diff --git a/src/index.html b/src/index.html
@@ -26,6 +26,7 @@ <h2>GALERIA</h2>
                   <label for="artmovement-filter">Corrientes</label>
           <select data-testid="select-filter" id="artmovement-filter" name="artmovement-filter">
           </select>
+          <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>
@@ -48,7 +49,11 @@ <h2>GALERIA</h2>
       <div id = "stats"></div>
       <div id = "graphs"></div>
     </section>
-    <section id="root"></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="detailCard"></section>
     <!-- <section class="chart" id="statsCard">
       <ul class= "bars"></ul> -->
@@ -62,40 +67,3 @@ <h2>GALERIA</h2>
   </body>
 </html>
 
-
-<!--No se está usando
-
-        <nav>
-          <ul class="nav">
-            <li>
-              <a href="#">Ordenar por</a>
-              <ul>
-                <li>
-                  <a class="opciones" href="#">Año</a>
-                  <ul>
-                    <li><a href="#">1900's</a></li>
-                    <li><a href="#">1800's</a></li>
-                    <li><a href="#">Año</a></li>
-                  </ul>
-                </li>
-                <li>
-                  <a class="opciones" href="#">Alfabeticamente</a>
-                  <ul>
-                    <li><a href="#">A-Z</a></li>
-                    <li><a href="#">Z-A</a></li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </nav>
-
-        <button data-testid="button-clear">Limpiar</button>
-      </article>
-    </div>
-
-    <section id="root"></section>
-    <section id="detailCard">
-       <button id="close-button"> Cerrar </button> -->
-
-
diff --git a/src/main.js b/src/main.js
@@ -54,12 +54,12 @@ document
   .querySelector("#artist-filter")
   .addEventListener("change", function (event) {
     const artistDisplay = event.target.value;
-    document.getElementById("artmovement-filter").value = "Corrientes";
-    document.getElementById("alphabetical-order").value = "Ordenar";
+    document.querySelector("artmovement-filter").value = "Corrientes";
+    document.querySelector("alphabetical-order").value = "Ordenar";
     const artistCards = filterData(data, "artistName", artistDisplay);
     currentData = [...artistCards];
     const filteredCards = renderItems(artistCards);
-    const clearScreen = document.getElementById("root");
+    const clearScreen = document.querySelector("root");
     clearScreen.innerHTML = "";
     clearScreen.appendChild(filteredCards);
   });

diff --git a/src/style.css b/src/style.css
@@ -171,7 +171,7 @@ article {
   margin-bottom: 20px;
 }
 
-#ContenedorTarjeta {
+#cardContainer {
   /*tarjetas independientes*/
   background-color: #F8F8F1;
   max-width: 100%;

diff --git a/src/view.js b/src/view.js
@@ -7,7 +7,7 @@ export const renderItems = (data) => {
 
     /* ` se utiliza para delimitar las plantillas de cadena, y ${}` se utiliza para insertar expresiones en esas plantillas de cadena.
     dt: description term y dd: description details. El dt está vacio porque no queremos mostrar el nombre de la caracteristica solo el dato*/
-    listItem.innerHTML = `<dl id="ContenedorTarjeta">
+    listItem.innerHTML = `<dl id="cardContainer">
     <dt><img itemprop="image" src="${painting.imageUrl}" alt="${painting.name}"></dd>
           <dt class="contenedor1"></dt><dd itemprop="name">${painting.name}</dd>
           <dt class="contenedor1"></dt><dd itemprop="artistName">${painting.facts.artistName}</dd>
@@ -45,6 +45,7 @@ export const renderCards = (data) => {
   longCard.setAttribute("itemscope", "");
   data.forEach((painting) => {
     const listCard = document.createElement("li");
+    listCard.setAttribute('itemscope', '');
     listCard.setAttribute("itemtype", "");
     listCard.innerHTML = `<dl id="ContenedorDetails">
     <dt><img itemprop="imageDetails" src="${painting.imageUrl}" alt="${painting.name}"></dd>

diff --git a/tests-read-only/e2e/app.spec.js b/tests-read-only/e2e/app.spec.js
@@ -4,7 +4,7 @@ import { test, expect } from '@playwright/test';
 test.describe('Pagina interraciones', () => {
 
   const sortOptions = { asc: 'asc', desc: 'desc'};
-  const liSelector = '#root > ul > li';
+  const liSelector = '#root > dt > dl';
 
   const getItempropValues = async (page, property) => {
     const liElements = await page.$$(liSelector);