From 7bea9c2b483d5c2a20efa18bdebbae640cc8ee6f Mon Sep 17 00:00:00 2001
From: karen
Date: Mon, 1 Jul 2024 16:10:41 -0500
Subject: [PATCH 01/13] agrega comentario
---
src/main.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/main.js b/src/main.js
index 039f889a..658ba039 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,7 +11,7 @@ let filteredData = data; // Inicialmente, los datos filtrados son todos los dato
function resetSelectIndex(selectElement) {
selectElement.selectedIndex = 0;
}
-
+//
function displayCards(filteredData) {
mainElement.removeChild(ulElement);
ulElement = renderItems(filteredData);
From bf8b4dec5065e50ddacc8712fb9a2d4e45e33fbb Mon Sep 17 00:00:00 2001
From: karen
Date: Mon, 1 Jul 2024 16:34:15 -0500
Subject: [PATCH 02/13] agrega comentario para nuevo cambio
---
src/main.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/main.js b/src/main.js
index 658ba039..254995ec 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,7 @@ import data from './data/dataset.js';
const mainElement = document.getElementById("root");
let ulElement = renderItems(data);
mainElement.appendChild(ulElement);
-
+// agrega nueva linea para ejecutar los cambios
let filteredData = data; // Inicialmente, los datos filtrados son todos los datos
function resetSelectIndex(selectElement) {
From 777478bf0e584e991e50e17e9eae11b08291e8e6 Mon Sep 17 00:00:00 2001
From: Franchesca Fatima Zelaya Contreras
Date: Tue, 2 Jul 2024 11:50:23 -0500
Subject: [PATCH 03/13] save
---
src/style.css | 85 ++++++++++++++++++++++++---------------------------
1 file changed, 40 insertions(+), 45 deletions(-)
diff --git a/src/style.css b/src/style.css
index 110f2f3e..4ba9d9af 100644
--- a/src/style.css
+++ b/src/style.css
@@ -64,6 +64,7 @@ header {
color: #ffffff;
padding: 20px;
text-align: center;
+ padding-bottom: 0px;
}
h1{
@@ -71,7 +72,7 @@ h1{
font-weight: 900;
line-height: 100px;
color: #511f52;
- font-family: 'Montserrat', sans-serif;
+ font-family: 'Poppins', sans-serif;
}
.header__description{
@@ -90,7 +91,15 @@ h1{
gap: 10px;
}
-.filter-row, .button-row {
+.button-row {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+}
+
+.filter-row{
+ max-width: 100%;
+ width: auto;
display: flex;
justify-content: center;
gap: 10px;
@@ -105,7 +114,7 @@ h1{
border: 1px solid #ccc;
border-radius: 5px;
margin:auto;
- width: 250px;
+ width: 150px;
max-width: 100%;
display: flex;
flex-direction: row;
@@ -115,7 +124,6 @@ h1{
margin-bottom: 5px;
font-weight: bold;
color: #511f52; /* Color de las Etiquetas */
-
}
.button-average {
@@ -170,18 +178,6 @@ h1{
transform: translateY(0);
}
-.average-container.show1 {
- display: block;
- opacity: 1;
- transform: translateY(0);
-}
-
-.average-container.show2 {
- display: block;
- opacity: 1;
- transform: translateY(0);
-}
-
.button-clear, .metrics, .button-average {
padding: 10px 20px;
font-size: 15px;
@@ -220,7 +216,6 @@ h1{
box-sizing: border-box;
height:630px;
max-height: 100%;
-
}
.card__title {
@@ -246,17 +241,17 @@ h1{
}
.card_image {
- max-width: 180%;
+ max-width: 100%;
width: 270px;
border-radius: 10px;
max-height: 100%;
height: 400px;
object-fit: cover;
-
}
+
/*sombrear la tarjeta al pasar el mouse */
.cardli:hover{
-background:#cfb3d3;;
+ background:#cfb3d3;;
}
/*Estilos para el footer*/
.footer {
@@ -282,29 +277,37 @@ background:#cfb3d3;;
/*Modo responsive*/
/* Para tablets */
@media (min-width: 501px) and (max-width: 768px) {
- .card-container {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
+ .card-container ul {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
}
.button-container {
flex-direction: column;
}
- .card {
+ .cardli {
max-width: 100%;
+ width: auto;
+ height: auto;
+ max-height: 100%;
}
.filter-container {
flex-direction: column;
}
- h1{
+ .filter-container select{
+ width: 100px;
+ max-width: 100%;
+ }
+
+ h1 {
font-size: 50px;
line-height: 46px;
}
- .header__description{
+ .header__description {
display: none; /* Ocultar descripción en pantallas pequeñas */
}
@@ -316,53 +319,46 @@ background:#cfb3d3;;
display: none; /* Ocultar descripción en pantallas pequeñas */
}
- .card-container{
+ .card-container ul {
+ display: grid;
grid-template-columns: 1fr;
}
- h1{
+ h1 {
width: 100%;
font-size: 45px;
line-height: 40px;
}
- .filter-row{
+ .filter-row {
flex-direction: column;
margin: auto;
}
- .filter-row label{
+ .filter-row label {
display: flex;
text-align: left;
justify-content: space-between;
-
}
- .block-average{
+ .block-average {
flex-direction: column;
align-items: center;
-
- }
- #average-container{
- margin-bottom: 5px;
- width: 60%;
- }
- #average-container1{
- margin-bottom: 5px;
- width: 60%;
}
- #average-container2{
+ .average-container {
margin-bottom: 5px;
width: 60%;
}
.filter-container select {
- width: 100px;
+ width: auto;
max-width: 100%;
}
- .card-container li.cardli {
+ .cardli {
+ width: auto;
+ max-width: 100%;
height: auto;
max-height: 100%;
}
@@ -375,4 +371,3 @@ background:#cfb3d3;;
margin: auto;
}
}
-
From 365fc1b9d55cc0973459a7d6b29ce48c962c1b92 Mon Sep 17 00:00:00 2001
From: Franchesca Fatima Zelaya Contreras
Date: Tue, 2 Jul 2024 13:08:40 -0500
Subject: [PATCH 04/13] save
---
README.md | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 115 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index f2ac8b7b..bc080858 100644
--- a/README.md
+++ b/README.md
@@ -16,4 +16,118 @@
## 1. Resumen del proyecto
-**Kdrama Database** es una página web diseñada para facilitar la búsqueda y filtrado de doramas coreanos. Los usuarios pueden filtrar doramas por género, año de lanzamiento y número de episodios, así como ver estadísticas como el promedio de capítulos, el género más común y el dorama con el mayor ranking.
+**Kdrama Database** es una página web diseñada para facilitar la búsqueda y filtrado de doramas coreanos.Los usuarios pueden filtrar doramas por género, año de lanzamiento y número de episodios, así como ver estadísticas como el promedio de capítulos, el género más común y el dorama con el mayor ranking.
+
+Además, podras ver los 3 primeros Kdramas mas visto en lo que lleva del año 2007 al 2023, tambien con la función de limpiar con un solo click puedes reiniciar la busqueda, lo que facilita el filtrado de nuevos datos.
+
+## 2. Definición de producto
+
+En consideración con la lluvia de ideas inicial, identificamos que el **usuario de Kdrama Database** incluye en su mayoría mujeres entre 20-45 años. Este público busca pasar el rato viendo una serie tomando en cuenta ciertos puntos como la cantidad de cápitulos lo que le permitiria calcular cuando tiempo debe dedicarle a la serie y escoger una serie de acuerdo a su género de su preferencia.
+
+### Necesidades:
+
+- **Información Rápida y Clara:** El proyecto está diseñado para proporcionar información precisa sobre diversos Kdramas. Cada Kdrama incluyendo detalles esenciales como el nombre, una breve descripción, el género, el año de lanzamiento y el número de capítulos. Esto facilita a los usuarios el acceso rápido a la información que necesitan para decidir qué Kdrama ver.
+
+- **Filtrado de Información:** Los usuarios tienen la capacidad de filtrar la información de los Kdramas según distintos criterios, como el género, el año de lanzamiento y el número de capítulos.
+
+- **Ordenamiento de Datos:** El proyecto incluye opciones para ordenar la información filtrada, los datos pueden ordenarse en orden ascendente o descendente según varios atributos, como el nombre del Kdrama, el año de lanzamiento, el número de capítulos.
+
+- **Acceso a Estadísticas:** Los usuarios pueden acceder a estadísticas que incluyen el promedio de capítulos, el género más común entre los Kdramas disponibles, y el Kdrama con el mayor porcentaje de audiencia. Esta información es útil para los usuarios que desean comprender mejor las tendencias y características de los Kdramas.
+
+### Resolución de Necesidades del Usuario:
+
+KdramaDatabase es una solución web que responde a todas las necesidades de los entusiastas de los Kdramas. La plataforma permite a los usuarios explorar y descubrir los últimos y más populares Kdramas, ofreciendo las siguientes funcionalidades:
+
+- **Visualización Dinámica:** Los usuarios exploran Kdramas de forma intuitiva con una interfaz visualmente atractiva. Cada Kdrama incluye nombre, imagen, descripción breve, género, año de lanzamiento y número de capítulos.
+- **Filtros Avanzados:** Sistema eficiente para aplicar y quitar filtros con un click, permitiendo búsquedas personalizadas por género, año y número de capítulos.
+- **Ordenación Flexible:** Opciones para ordenar el título de los Kdramas en forma ascendente y descendente.
+- **Acceso a Rankings:** Visualización de datos como promedio de capítulos, géneros más comunes, ratings más altos y el top 3 de los Kdramas mas vistos, ayudando a los usuarios a entender tendencias y tomar decisiones informadas.
+
+## 3. Historias de Usuario 🚀
+
+### Historia de Usuario 1:
+
+**Definición de Terminado (DoD):**
+
+**Criterios de Aceptación (AC):**
+
+### Historia de Usuario 2:
+
+**Definición de Terminado (DoD):**
+
+**Criterios de Aceptación (AC):**
+
+### Historia de Usuario 3:
+
+**Definición de Terminado (DoD):**
+
+**Criterios de Aceptación (AC):**
+
+### Historia de Usuario 4:
+
+**Definición de Terminado (DoD):**
+
+**Criterios de Aceptación (AC):**
+
+## 4. Generación de datos 📝
+
+A continuación, se adjuntan capturas de pantalla del prompt solicitado a la IA para la generación del conjunto de datos utilizado en la aplicación web. [ChatGPT]()
+
+![promp-IA1]()
+![promp-IA2]()
+![promp-IA3]()
+![promp-IA4]()
+![promp-IA5]()
+![promp-IA6]()
+
+Asi mismo, se adjunta captura de pantalla de la respuesta proporcionada por las IA.
+
+![respuesta-IA]()
+
+## 5. Diseño de Interfaz y Prototipos 📋
+
+La interfaz de **KdramaDatabase** está diseñada para ofrecer una experiencia intuitiva y atractiva, permitiendo a los usuarios explorar, aprender y disfrutar de Kdramas de manera eficiente y organizada. Con un enfoque en la usabilidad y la presentación clara de información, el diseño facilita la navegación y la comprensión de los datos sobre cada Kdrama.
+
+### Prototipos de Alta Fidelidad:
+
+El prototipo de alta fidelidad de **KdramaDatabase** es la versión más detallada y refinada de la interfaz, integrando todos los estilos visuales y elementos interactivos para ofrecer una experiencia de usuario completa y envolvente. Este prototipo incorpora la estética final, la funcionalidad completa y la interacción intuitiva, sirviendo como una base precisa para el desarrollo final de la aplicación. A continuación, se adjuntan algunas imágenes del prototipo de alta fidelidad de la aplicación web.
+
+![prototipo-desktop]()
+
+![prototipo-mobile]()
+
+## 6. Lenguajes y Herramientas Utilizadas 🛠️
+
+En el desarrollo de nuestro proyecto, hemos utilizado un lenguaje de programación y herramientas para garantizar su funcionalidad y diseño. A continuación, detallamos el principal lenguaje y herramientas que forman parte de nuestro proyecto:
+
+### Herramientas de Programación
+
+- **HTML Semántico:** Utilizado para estructurar y marcar nuestra página web de manera clara y accesible, definiendo la disposición y los elementos visuales de forma adecuada.
+
+- **CSS Responsive:** Utilizado para diseñar y presentar la interfaz de manera que mejora la experiencia del usuario. Se han aplicado estilos, colores y diseños mediante media queries, flexbox y grid para asegurar una visualización óptima en diversos dispositivos y tamaños de pantalla.
+
+### Lenguaje de Programación
+
+- **JavaScript (JS):** Esencial para la interactividad y la funcionalidad dinámica de nuestra aplicación web. Empleado para la creación dinámica de elementos HTML, manipulación del DOM con event listeners, y funciones que permiten acciones y comportamientos en tiempo real.
+
+### Herramientas Adicionales
+
+- **Control de Versiones (Git):** Esencial para el seguimiento eficiente de cambios en el código, facilitando la colaboración entre desarrolladores en nuestro proyecto de Kdramas.
+- **Pruebas Unitarias(Jest):** Utilizado para asegurar la calidad y robustez del código JavaScript mediante pruebas exhaustivas, garantizando su funcionamiento y rendimiento en el contexto de nuestra aplicación de Kdramas.
+- **Prototipado y Diseño de Interfaz (Figma):** Utilizado para el prototipado y diseño de la interfaz, permitiendo la creación de maquetas visuales y la planificación de la experiencia de usuario. [Prototipo-figma]()
+- **Historias de Usuario:** Utilizadas para definir claramente los requisitos y expectativas de los usuarios finales en nuestro proyecto de Kdramas. Aseguran que el desarrollo esté alineado con las necesidades y deseos de los usuarios. [Historias-figma]()
+
+Estos elementos y herramientas nos han permitido desarrollar una aplicación web completa y funcional para Kdramas, con un diseño atractivo y una experiencia de usuario optimizada. La combinación de HTML semántico, CSS responsive, JavaScript y herramientas como Git, Jest y Figma ha sido crucial para lograr un producto robusto, interactivo y de alta calidad.
+
+## 7. Responsividad
+
+### 7.1. Testing
+
+## 8. Trabajo Colaborativo 📌
+
+### Herramientas de Colaboración ⌨️
+
+### Equipo de Diseño y Desarrollo ✒️
+
+- []()
+- []()
From 01f053bf41eb869b9b07a5e1b69d357edce6aba7 Mon Sep 17 00:00:00 2001
From: Franchesca Fatima Zelaya Contreras
Date: Tue, 2 Jul 2024 13:11:41 -0500
Subject: [PATCH 05/13] save
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index bc080858..70900978 100644
--- a/README.md
+++ b/README.md
@@ -115,7 +115,7 @@ En el desarrollo de nuestro proyecto, hemos utilizado un lenguaje de programaci
- **Control de Versiones (Git):** Esencial para el seguimiento eficiente de cambios en el código, facilitando la colaboración entre desarrolladores en nuestro proyecto de Kdramas.
- **Pruebas Unitarias(Jest):** Utilizado para asegurar la calidad y robustez del código JavaScript mediante pruebas exhaustivas, garantizando su funcionamiento y rendimiento en el contexto de nuestra aplicación de Kdramas.
- **Prototipado y Diseño de Interfaz (Figma):** Utilizado para el prototipado y diseño de la interfaz, permitiendo la creación de maquetas visuales y la planificación de la experiencia de usuario. [Prototipo-figma]()
-- **Historias de Usuario:** Utilizadas para definir claramente los requisitos y expectativas de los usuarios finales en nuestro proyecto de Kdramas. Aseguran que el desarrollo esté alineado con las necesidades y deseos de los usuarios. [Historias-figma]()
+- **Historias de Usuario:** Utilizadas para definir claramente los requisitos y expectativas de los usuarios finales en nuestro proyecto de Kdramas. Aseguran que el desarrollo esté alineado con las necesidades y deseos de los usuarios.
Estos elementos y herramientas nos han permitido desarrollar una aplicación web completa y funcional para Kdramas, con un diseño atractivo y una experiencia de usuario optimizada. La combinación de HTML semántico, CSS responsive, JavaScript y herramientas como Git, Jest y Figma ha sido crucial para lograr un producto robusto, interactivo y de alta calidad.
From ab48a352fab2edea327d8a3afbdfa78140ba3ef8 Mon Sep 17 00:00:00 2001
From: Franchesca Fatima Zelaya Contreras
Date: Tue, 2 Jul 2024 13:25:14 -0500
Subject: [PATCH 06/13] save
---
src/style.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 50 insertions(+)
diff --git a/src/style.css b/src/style.css
index 4ba9d9af..fb5bd5d8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -176,6 +176,27 @@ h1{
display: block;
opacity: 1;
transform: translateY(0);
+ width: auto;
+ max-width: 100%;
+ height: auto;
+}
+
+.average-container.show1 {
+ display: block;
+ opacity: 1;
+ transform: translateY(0);
+ width: auto;
+ max-width: 100%;
+ height: auto;
+}
+
+.average-container.show2 {
+ display: block;
+ opacity: 1;
+ transform: translateY(0);
+ width: auto;
+ height: auto;
+ max-width: 100%;
}
.button-clear, .metrics, .button-average {
@@ -311,6 +332,20 @@ h1{
display: none; /* Ocultar descripción en pantallas pequeñas */
}
+ .average-container.show {
+ width: auto;
+ max-width: 100%;
+ }
+
+ .average-container.show1 {
+ width: auto;
+ max-width: 100%;
+ }
+
+ .average-container.show2 {
+ width: auto;
+ max-width: 100%;
+ }
}
/* Para móviles */
@@ -370,4 +405,19 @@ h1{
.button-row {
margin: auto;
}
+
+ .average-container.show {
+ width: auto;
+ max-width: 100%;
+ }
+
+ .average-container.show1 {
+ width: auto;
+ max-width: 100%;
+ }
+
+ .average-container.show2 {
+ width: auto;
+ max-width: 100%;
+ }
}
From 5e9081745035c8129f94c653468f952a59321452 Mon Sep 17 00:00:00 2001
From: karen
Date: Tue, 2 Jul 2024 21:55:02 -0500
Subject: [PATCH 07/13] agrega modificaciones
---
src/style.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/style.css b/src/style.css
index 183cf3f9..2d3d8049 100644
--- a/src/style.css
+++ b/src/style.css
@@ -433,3 +433,4 @@ h1{
max-width: 100%;
}
}
+}
\ No newline at end of file
From 390c6effa636a6622eaadffe88716af528d2bb7f Mon Sep 17 00:00:00 2001
From: karen
Date: Wed, 3 Jul 2024 10:31:42 -0500
Subject: [PATCH 08/13] agrega modificciones de rama remota
---
src/dataFunctions.js | 15 ++++++---------
src/index.html | 24 +++++++++++-------------
src/main.js | 29 +++++++++++++++++------------
src/style.css | 37 ++++++++++++-------------------------
src/view.js | 4 ++--
5 files changed, 48 insertions(+), 61 deletions(-)
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
index c0e96be9..8e70a4eb 100644
--- a/src/dataFunctions.js
+++ b/src/dataFunctions.js
@@ -21,20 +21,14 @@ export const sortData = (data, sortBy, sortOrder) => {
if (sortOrder === "asc") {
return dataCopy.sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
} else {
- // Ordenar por otros campos
- dataCopy.sort((a, b) => {
- if (sortOrder === 'asc') {
- return a[sortBy].localeCompare(b[sortBy]);
- } else {
- return b[sortBy].localeCompare(a[sortBy]);
- }
- });
+ return dataCopy.sort((a, b) => b[sortBy].localeCompare(a[sortBy]));
}
};
export const computeStats = (data) => {
// Calcular el promedio de capítulos
const totalChapters = data.reduce((sum, item) => sum + item.facts.chapters, 0);
+
const averageChapters = (totalChapters / data.length);
const minValue = Math.floor(averageChapters);
@@ -62,6 +56,7 @@ export const computeStats = (data) => {
mostCommonGenre,
highestAudienceDorama
};
+
};
export const metricsData = (data) => {
@@ -73,4 +68,6 @@ export const metricsData = (data) => {
parseFloat(a.facts["audiencePercentage"])
).slice(0, 3);
}, []);
-}
+
+
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index d7ce054a..e1ed386f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,9 +22,10 @@
+
-
-
Kdrama Database
+
+
Kdrama Database
¡Hola! ¿Estás buscando el Kdrama perfecto para maratonear este fin de
semana? ¡No busques más! En Kdrama Database, te ofrecemos una vasta
@@ -35,13 +36,14 @@
Kdrama Database
encontrarás recomendaciones adaptadas a tus gustos. ¡Explora y descubre
tu próximo Kdrama favorito con nosotros!