Ultimos detalles

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

Hide file tree

Showing 5 changed files with 29 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 * [6. Criterios de aceptación mínimos del proyecto](#6-criterios-de-aceptación-mínimos-del-proyecto)
 * [7. Hacker edition](#7-hacker-edition)
 * [8. Objetivos de aprendizaje](#8-objetivos-de-aprendizaje)
-  [9. Diseño](#9-diseño)
+*  [9. Diseño](#9-diseño)
 * [10. Proyecto Final](#10-proyecto-final)
 * [11. Pistas, tips y lecturas complementarias](#11-pistas-tips-y-lecturas-complementarias)
 * [12. Consideraciones para pedir tu Project Feedback](#12-consideraciones-para-pedir-tu-project-feedback)
@@ -844,8 +844,8 @@ Cuando ya estés lista para codear, te sugerimos empezar de esta manera:
 
 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`
+* [x] Cumple con todos los criterios mínimos de aceptación al ejecutar `npm run test:oas`
+* [x] Cumple con todas las pruebas _end to end_ al ejecutar `npm run test:e2e` *Al generarse las opciones desde javascript, no corre las pruebas*
 * [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_

diff --git a/src/index.html b/src/index.html
@@ -48,8 +48,8 @@ <h2>GALERIA</h2>
         </div>
       </article>
     </div>
-    <section id="movementEstadistic"> 
-      <div id="titulo">Porcentaje de Obras por Corriente</div>
+    <section id="movementStats"> 
+      <div id="title">Porcentaje de Obras por Corriente</div>
       <div id="iconContainer">
       <div id="stats"></div>
       <div id="graphs"></div></div>

diff --git a/src/main.js b/src/main.js
@@ -102,25 +102,25 @@ document
   });
 
 //ESTADISTICA
-const dataEstadistic = computeStats(data);
-const selectEstadistic = document.querySelector("#movementEstadistic");
+const dataStats = computeStats(data);
+const selectStats = document.querySelector("#movementStats");
 document.querySelector("#button-stats").addEventListener("click", function () {
-  if (selectEstadistic.style.display === "flex") {
-    selectEstadistic.style.display = "none";
-    // selectEstadistic.innerHTML = "";
+  if (selectStats.style.display === "flex") {
+    selectStats.style.display = "none";
+    // selectStats.innerHTML = "";
   } else {
-    selectEstadistic.style.display = "flex";
+    selectStats.style.display = "flex";
     const stats = document.getElementById("stats");
     const graphs = document.getElementById("graphs");
     if (stats.childElementCount === 0) {
-      Object.entries(dataEstadistic).forEach(([key, value]) => {
-        const cardEsta = document.createElement("div");
-        cardEsta.id = "cardEsta";
-        cardEsta.innerHTML = `${key}: ${value} %`;
+      Object.entries(dataStats).forEach(([key, value]) => {
+        const cardStats = document.createElement("div");
+        cardStats.id = "cardStats";
+        cardStats.innerHTML = `${key}: ${value} %`;
         const graph = document.createElement("div");
         graph.id = "graph";
         graph.innerHTML = graphIcon(value);
-        stats.appendChild(cardEsta);
+        stats.appendChild(cardStats);
         graphs.appendChild(graph);
       });
     }

diff --git a/src/style.css b/src/style.css
@@ -221,7 +221,7 @@ select option {
 option:hover {
   background-color: #918d8d;
 }
-#movementEstadistic{
+#movementStats{
   display: none;
   flex-direction: column;
   justify-content: flex-start;
@@ -232,7 +232,7 @@ option:hover {
   height: fit-content;
 
 }
-#titulo{
+#title{
 flex:1;
 text-align: center;  
 width: 100%;  
@@ -256,7 +256,7 @@ font-weight: bold;
   flex-direction: column;
   height: 100%;
 }
-#cardEsta{
+#cardStats{
   display: flex;  
   flex-direction: column;
   text-align: right;
@@ -461,7 +461,7 @@ dd[itemprop="name"] {
   left: 0;
   float: left;
 }
-#cardEsta,#graph{
+#cardStats,#graph{
   font-size: 90%;     
 }
 .select-menu {
@@ -478,7 +478,7 @@ dd[itemprop="name"] {
 #button-stats{
   margin-right: 50%;
 }
-#titulo{
+#title{
  margin-top: 50px;
 }
    /* el cuadrado pequeño 2 */

diff --git a/src/view.js b/src/view.js
@@ -3,25 +3,24 @@ export const renderItems = (data) => {
   artCard.setAttribute("itemscope", "");
   data.forEach((painting) => {
     const listItem = document.createElement("li");
-    listItem.setAttribute('itemtype', "http://schema.org/CreativeWork");
+    listItem.setAttribute('itemtype', "");
 
     /* ` 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="cardContainer" "itemscope"="CreativeWork">
+    listItem.innerHTML = `<dl id="cardContainer">
     <dt><img itemprop="image" itemtype="image" src="${painting.imageUrl}" alt="${painting.name}"></dd>
-          <dt class="contenedor1" itemtype="http://schema.org/CreativeWork"></dt><dd itemprop="name">${painting.name}</dd>
-          <dt class="contenedor1" itemtype="http://schema.org/CreativeWork"></dt><dd itemprop="artistName">${painting.facts.artistName}</dd>
-          <dt class="contenedor1" itemtype="http://schema.org/CreativeWork"></dt><dd itemprop="artMovement">${painting.facts.artMovement}</dd>
-          <dt class="contenedor1" itemtype="http://schema.org/CreativeWork"></dt><dd itemprop="creationYear">${painting.facts.creationYear}</dd>
-          <dt class="contenedor1" itemtype="http://schema.org/CreativeWork"></dt><dd itemprop="shortDescription">${painting.shortDescription}</dd>
+          <dt class="contenedor1"></dt><dd itemprop="name">${painting.name}</dd>
+          <dt class="contenedor1"></dt><dd itemprop="artistName">${painting.facts.artistName}</dd>
+          <dt class="contenedor1"></dt><dd itemprop="artMovement">${painting.facts.artMovement}</dd>
+          <dt class="contenedor1"></dt><dd itemprop="creationYear">${painting.facts.creationYear}</dd>
+          <dt class="contenedor1"></dt><dd itemprop="shortDescription">${painting.shortDescription}</dd>
         </dl>`;
     // Crea la tarjeta detallada
     listItem.querySelector("img").addEventListener("click", () => {
       const longCard = renderCards([painting]); // Obtiene la tarjeta detallada para esa pintura
       const detailCard = document.getElementById("detailCard"); // Obtiene el elemento detailCard del html
       const closeButton = document.createElement("button");
       closeButton.id = "close-button";
-      // closeButton.textContent = "Cerrar";
       longCard.appendChild(closeButton);
       detailCard.innerHTML = longCard.outerHTML;
       detailCard.classList.add("show");
@@ -40,28 +39,7 @@ export const renderItems = (data) => {
   });
   return artCard;
 };
-// export const renderCards = (data) => {
-//   const longCard = document.createElement("ul"); 
-//   longCard.setAttribute("itemscope", "");
-//   data.forEach((painting) => {
-//     const listCard = document.createElement("li");
-//     listCard.setAttribute("itemtype", "");
-//     listCard.innerHTML = `<dl id="ContenedorDetails">
-//     <dt><img itemprop="imageDetails" src="${painting.imageUrl}" alt="${painting.name}"></dd>
-//           <dt></dt><dd itemprop="nameDetails">${painting.name}</dd>
-//           <dt></dt><dd itemprop="artistNameDetails" class="contenedor2">Artista: ${painting.facts.artistName}</dd>
-//           <dt></dt><dd itemprop="artMovementDetails" class="contenedor2">Corriente: ${painting.facts.artMovement}</dd>
-//           <dt></dt><dd itemprop="creationYearDetails" class="contenedor2">Año: ${painting.facts.creationYear}</dd>
-//           <dt></dt><dd itemprop="descriptionDetails">${painting.description}</dd>
-//           <dt></dt><dd itemprop="styleDetails" class="contenedor3">Estilo: ${painting.additionalInformation.style}</dd>
-//           <dt></dt><dd itemprop="techniqueDetails" class="contenedor3">Técnica: ${painting.additionalInformation.technique}</dd>
-//           <dl>`;
-//     longCard.appendChild(listCard); //Esta coloca todos los valores en la tarjeta
-//   });
-//   return longCard;
-// };
-
-//PRUEBA
+
 export const renderCards = (data) => {
 
   const longCard = document.createElement("ul");