Merge pull request #21 from DianaVilchez/main

readme y responsive

README.md

@@ -10,8 +10,10 @@
 * [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. Pistas, tips y lecturas complementarias](#9-pistas-tips-y-lecturas-complementarias)
-* [10. Consideraciones para pedir tu Project Feedback](#10-consideraciones-para-pedir-tu-project-feedback)
+  [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)
 
 ***
 
@@ -724,7 +726,28 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [Few shot prompting | Learn Prompting: Your Guide to Communicating with AI](https://learnprompting.org/es/docs/basics/few_shot)
 </p></details>
 
-## 9. Pistas, tips y lecturas complementarias
+## 9. Diseño
+Aunque experimentamos cambios a lo largo del proceso, desde el inicio teníamos una idea clara de la distribución de nuestra página web. A pesar de los ajustes, logramos mantener elementos clave de nuestro diseño inicial, lo que contribuyó a preservar la estructura y la esencia de nuestro proyecto.
+![alt text](image-9.png)
+
+Enfrentamos ciertas complicaciones al seleccionar una paleta de colores, dado que nuestras obras presentaban una amplia variedad cromática. Fue un desafío encontrar un color que se adaptara armoniosamente a todas las piezas. Como solución, optamos por una paleta de colores neutros, proporcionando una base equilibrada que complementa cada obra sin restarle protagonismo a sus colores individuales.
+![alt text](image-10.png)
+
+
+## 10. Proyecto Final
+
+Iniciamos nuestro proyecto con una investigación y la creación de prototipos,a medida que materializábamos nuestras ideas en la interfaz, enfrentamos múltiples desafíos y experimentamos cambios constantes. Realizamos ajustes significativos hasta lograr fusionar nuestras decisiones . El proyecto final que presentamos es el fruto de nuestro esfuerzo, creatividad y perseverancia en cada etapa del desarrollo.
+![alt text](image-6.png)
+
+Nuestra interfaz ofrece una visión detallada de las obras de arte presentadas, brindándote la oportunidad de explorar cada pieza en profundidad y apreciar sus detalles únicos.
+![alt text](image-7.png)
+
+**RESPONSIVE**
+Este proyecto web tiene un diseño responsivo que brinda una experiencia de usuario fluida en dispositivos móviles y computadoras, en la cual aun podemos ver mas detalles de las obras de arte, sinembargo el diseño cambia para que la información mostrada se pueda ver con facilidad. 
+
+![alt text](image-8.png)
+
+## 11. Pistas, tips y lecturas complementarias
 
 ### Primeros pasos
 
@@ -812,7 +835,7 @@ Cuando ya estés lista para codear, te sugerimos empezar de esta manera:
   Aceptación_ y nosotros sí lo haremos. Más detalles en la guía.
 * [Cómo dividir H.U.](https://www.youtube.com/watch?v=Ueq786iZ30I&t=341s)
 
-## 10. Consideraciones para pedir tu Project Feedback
+## 12. Consideraciones para pedir tu Project Feedback
 
 Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:
 
@@ -842,3 +865,5 @@ _life skills_ desde tu dashboard de estudiante.
 
 Si no has completado todo lo anterior, no consideramos que estás lista para
 tu sesión de Project Feedback.
+
+

src/dataFunctions.js

@@ -32,10 +32,10 @@ export const sortData = (data, sortBy, sortOrder) => {
     sortedCard.push(list);
   }
   if (sortOrder === "asc") {
-    sortedCard.sort((a, b) => a.name.localeCompare(b.name));
+    sortedCard.sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
   } else {
     sortOrder === "desc";
-    sortedCard.sort((a, b) => b.name.localeCompare(a.name));
+    sortedCard.sort((a, b) => b[sortBy].localeCompare(a[sortBy]));
   }
 
   return sortedCard;

src/main.js

@@ -55,11 +55,11 @@ document
   .addEventListener("change", function (event) {
     const artistDisplay = event.target.value;
     document.getElementById("artmovement-filter").value = "Corrientes";
-    document.querySelector("alphabetical-order").value = "Ordenar";
+    document.querySelector("#alphabetical-order").value = "Ordenar";
     const artistCards = filterData(data, "artistName", artistDisplay);
     currentData = [...artistCards];
     const filteredCards = renderItems(artistCards);
-    const clearScreen = document.querySelector("root");
+    const clearScreen = document.querySelector("#root");
     clearScreen.innerHTML = "";
     clearScreen.appendChild(filteredCards);
   });
@@ -94,7 +94,7 @@ document
   .querySelector("#alphabetical-order")
   .addEventListener("change", function (event) {
     const sortOrder = event.target.value;
-    const sortItems = sortData(currentData, "Ordenar", sortOrder);
+    const sortItems = sortData(currentData,"name", sortOrder);
     const sortedCards = renderItems(sortItems);
     const rootSorted = document.getElementById("root");
     rootSorted.innerHTML = ""; // .innerHTML = "" :se limpia el contenedor antes de agregar nuevas tarjetas

src/style.css

@@ -5,6 +5,7 @@
 body {
   margin: 0;
   box-sizing: border-box;
+  font-size: 100%;
   }
 main{
   display:flex;
@@ -49,10 +50,8 @@ h2 {
   /*Galeria*/
   font-family: "JetBrains Mono";
   background-color: #f5f1e5;
-  width:max-content;
-  padding-right:8vw;
-  padding-left: 8vw;
-  font-size: 200%;
+  min-width:30%;
+  font-size: 35px;
   text-align: center;
   position: absolute;
   margin-top: 14px;
@@ -104,14 +103,18 @@ article {
   }
   #button-clear {
     font-family: "JetBrains Mono";
-    font-size: 14px;
-    color: white;
-    background-color: black;
-    border-radius: 15px;
-    padding: 2px 30px;
-
-    }
-  #button-stats {
+    color:white;
+    background-color: #000000;
+    border-radius: 20px;
+    border-color: #F8F8F1;
+    padding: 5px 25px;
+    box-shadow: 2px 1px 5px 0px rgba(0,0,0,0.63);
+}
+#button-clear:hover{
+  background-color:#575656;
+    transition: 0.3s;
+  }
+#button-stats {
     color: rgb(0, 0, 0);
     background-color: #929191;
     border-radius: 30%;
@@ -121,7 +124,7 @@ article {
     box-shadow: 2px 1px 5px 0px rgba(0,0,0,0.63);  
     }
   #button-stats:hover{
-    background-color:#cacbcb;
+    background-color:#cfcea7;
     transition: 0.3s;
     }
   .material-symbols-outlined {
@@ -141,7 +144,7 @@ article {
   /*distancia entre columnas*/
   display: inline-block;
   /* Asegura que las tarjetas se comporten como bloques en línea */
-  /* padding: 6vw; */
+  padding-right: 1vw;
   list-style: none;
   /*para que los puntitos desaparezcan*/
   margin-top: 50px;
@@ -166,41 +169,28 @@ li {
   list-style: none;
   /*para que los puntitos desaparezcan*/
 }
-
-dt.contenedor1 {
-  /*cada item dentro de las tarjetas*/
-  font-family: "JetBrains Mono";
-  font-size: small;
-  max-width: 100%;
-  margin: 1px 0px;
-  text-align: center;
-  /* Centra el texto horizontalmente */
-}
-
 dd {
   /*cada item dentro de las tarjetas*/
   font-family: "JetBrains Mono";
-  font-size: small;
+  /* font-size:small; */
   max-width: 100%;
   margin: 1px 0px;
   text-align: center;
+  font-size:15px;
   /* Centra el texto horizontalmente */
 }
-
 img[itemprop="image"] {
   margin: 0 px;
   padding: 0px;
   width: 100%;
   object-fit: cover;
 }
-
 dd[itemprop="name"] {
   font-family: "Sometype Mono";
   font-weight: bold;
-  font-size: larger;
+  font-size:20px;
   margin: 3px;
 }
-
 footer {
   font-family: "JetBrains Mono";
   /* width: 100%; */
@@ -210,8 +200,6 @@ footer {
   border-top: 2px solid black;
 }
 
-
-
 /*fILTRAR POR*/
 label{
   display: none;
@@ -302,6 +290,7 @@ flex-shrink: 0;
   z-index: 999;
   margin-top: 7vh;
   width: 100%; 
+  box-shadow: 0px 0px 20px 3px rgba(135,135,135,1);
 
 }
 
@@ -310,35 +299,27 @@ flex-shrink: 0;
 }
 
 #close-button {
-  /*position: absolute;right: 100px;top: 200px;*/
-
   align-items: center;
   cursor: pointer;
-  border-radius: 15px;
   float:right;
-  margin:auto;
-  height: auto;
   background-color: #000000;
-  padding:5px;
-  border-width: 5px;
-  border-radius: 15px;
+  padding:3px 6px 3px 6px;
+  width:9%;
+  border-radius: 30px;
   border-color: #949292;
-
+  border-width: 4px;
+  margin-right:4%;
   /* box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);  */
 }
+
 #close-button::after {
   content:"Cerrar";
-
-
   background-color: #000000;
     height: 30px;
   width: 100px;
     color: white;
-  font-size: medium;
-
+  font-size: medium; 
 }
-
-
 #tarjeta {
   list-style-type: none;
   background-color: #f6f6ec;
@@ -394,20 +375,20 @@ dd[itemprop="descriptionDetails"] {
   /* font-size: 12.5px; */
   margin-top:2vw;
   margin-bottom:2vw;
-  font-size: 1.8vh;
+  font-size:14px;
 
 }
 /* Nombre de la ficha  */
 dd[itemprop="nameDetails"] {
-  font-size: larger;
+  font-size:x-large;
   font-weight: bold;
   margin-top:1vw;
   margin-bottom: 1vw;
 }
 
  /* imagen de la ficha  */
 #detailCard img {
-  margin: 0 px;
+  margin-left: 20px;
   padding: 0px;
   height: 480px;
   left: 0;
@@ -443,6 +424,15 @@ dd[itemprop="nameDetails"] {
   border: none;
   margin: 0;
 }
+@media (max-width: 1500px) {
+dd {
+  font-size:17px;
+}
+
+dd[itemprop="name"] {
+  font-size:22px;
+}
+}
 @media (max-width: 1100px) {
   dd[itemprop="descriptionDetails"] {
     text-align: justify;
@@ -452,7 +442,7 @@ dd[itemprop="nameDetails"] {
     /* font-size: 12.5px; */
     margin-top:2vw;
     margin-bottom:2vw;
-    font-size:90%;
+    font-size:15px;
     padding-right:4vw;
   } 
   /* imagen de la ficha  */
@@ -488,7 +478,10 @@ dd[itemprop="nameDetails"] {
   display:none;
 }
 }
-@media (max-width: 800px) {
+@media (max-width: 870px) {
+  dd[itemprop="descriptionDetails"] {
+    font-size:16.5px;
+  } 
   #tarjeta li {
     display: flex; /* Utiliza flexbox para la disposición horizontal */
     flex-direction: column; /* Alinea los elementos en columna */
@@ -530,38 +523,40 @@ dd[itemprop="nameDetails"] {
 
 #close-button::after{
   content:"x";
-  font-size:30px;
-  color:chartreuse;
-  border-color: #949292;
-  border-width: 5px;
-  border-radius: 50%;
+  font-size:20px;
   background-color: #000000;
-  height: 50px;
-  width: 50px;
-  color: white;
+}
+h2 {
+  /*Galeria*/
+  font-family: "JetBrains Mono";
+  background-color: #f5f1e5;
+  min-width:50%;
+  font-size: 35px;
+  text-align: center;
+  position: absolute;
+  margin-top: 14px;
+
+}
 }
 @media (max-width: 450px) {
 /* imagen de la ficha  */
 #detailCard img {
-  margin: 0 px;
+  /* margin: 0 px;
   padding: 0px;
-  /* max-width:100vw; */
   left: 0;
   float: left;
-  max-width: 45%; /* Ajusta el tamaño de la imagen al 100% del ancho del contenedor */
-  height: auto; /* Permite que la altura se ajuste automáticamente */
-  object-fit: contain;
+  max-width: 45%; 
+  height: auto; 
+  object-fit: contain; */
+  display: none;
 }
-dd[itemprop="descriptionDetails"] {
-  text-align: justify;
-  display: flex;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  /* font-size: 12.5px; */
-  margin-top:2vw;
-  margin-bottom:2vw;
-  font-size:95%;
-  padding-right:4vw;
+.show{
+  background-color:#ececdc ;
+}
+#textDetails {
+  background-color:#ececdc ;
 }
+#ContenedorDetails {
+  background-color:#ececdc ;
 }
 }