diff --git a/.eslintrc b/.eslintrc
index 0dfd1120..6d569714 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -2,7 +2,8 @@
"env": {
"browser": true,
"es6": true,
- "jest": true
+ "jest": true,
+ "node": true
},
"parserOptions": {
"ecmaVersion": 2020,
diff --git a/README.md b/README.md
index 274b650a..0921ed6a 100644
--- a/README.md
+++ b/README.md
@@ -1,770 +1,137 @@
-# Dataverse Chat
+# README
+
+# Cartoon Fun Chat 💬
## Índice
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del proyecto](#2-resumen-del-proyecto)
-* [3. Consideraciones generales](#3-consideraciones-generales)
-* [4. Funcionalidades](#4-funcionalidades)
-* [5. Consideraciones técnicas](#5-consideraciones-técnicas)
-* [6. Criterios de aceptación mínimos del proyecto](#6-criterios-de-aceptación-mínimos-del-proyecto)
-* [7. Objetivos de aprendizaje](#7-objetivos-de-aprendizaje)
-* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias)
-* [9. Consideraciones para pedir tu Project Feedback](#9-consideraciones-para-pedir-tu-project-feedback)
+- [1. Preámbulo](#1-preámbulo)
+- [2. Resumen del proyecto](notion://www.notion.so/8a7abd1066074d03a89a13c0d74904f0#2-resumen-del-proyecto)
+- [3. Información general](notion://www.notion.so/8a7abd1066074d03a89a13c0d74904f0#3-consideraciones-generales)
+- [4. Funcionalidades](notion://www.notion.so/8a7abd1066074d03a89a13c0d74904f0#4-funcionalidades)
+- [5. Información técnica](notion://www.notion.so/8a7abd1066074d03a89a13c0d74904f0#5-consideraciones-t%C3%A9cnicas)
+- [6. Maquetación del proyecto](notion://www.notion.so/8a7abd1066074d03a89a13c0d74904f0#6-criterios-de-aceptaci%C3%B3n-m%C3%ADnimos-del-proyecto)
+- [7. Herramientas](notion://www.notion.so/8a7abd1066074d03a89a13c0d74904f0#7-hacker-edition)
+- [8. Autoras](notion://www.notion.so/8a7abd1066074d03a89a13c0d74904f0#8-objetivos-de-aprendizaje)
-***
+---
## 1. Preámbulo
-En nuestro día a día, las aplicaciones web son como amigas
-inseparables. Desde las redes sociales hasta las herramientas de
-trabajo, las usamos todo el tiempo. Pero lo que hace que este
-momento sea realmente especial es que estas aplicaciones nos pueden
-abrir una puerta a algo asombroso: la interacción con inteligencia
-artificial.
-
-¿Qué tal si pudiéramos conversar con alguien que vivió hace más de
-cien años o incluso con los personajes de nuestras series y
-películas favoritas o con entidades que normalmente no pueden hablar
-como por ejemplo planetas o animales? La inteligencia artificial nos
-puede ayudar a entender el pasado y a conectarnos con figuras
-históricas, así como a sumergirnos en mundos ficticios.
+En nuestro día a día, las aplicaciones web son como amigas inseparables. Desde las redes sociales hasta las herramientas de trabajo, las usamos todo el tiempo. Pero lo que hace que este momento sea realmente especial es que estas aplicaciones nos pueden abrir una puerta a algo asombroso: la interacción con inteligencia artificial.
-
+¿Qué tal si pudiéramos conversar con alguien que vivió hace más de cien años o incluso con los personajes de nuestras series y películas favoritas o con entidades que normalmente no pueden hablar como por ejemplo planetas o animales? La inteligencia artificial nos puede ayudar a entender el pasado y a conectarnos con figuras históricas, así como a sumergirnos en mundos ficticios.
## 2. Resumen del proyecto
-En este proyecto convertirás la aplicación desarrollada
-en Dataverse en una
-[Single Page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application),
-manteniendo las funcionalidades de visualizar, filtrar, ordenar y
-calcular alguna estadística, adicionando una nueva vista para
-consultar información detallada de cada personaje/entidad y agregando
-la posibilidad de interactuar con un personaje/entidad o todos ellos
-a través de un sistema de chat impulsado por la
-[API de OpenAI](https://openai.com/product).
-
-### Los objetivos generales de este proyecto son los siguientes
-
-* Desarrollar una [Single Page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application)
-* Aplicar los conceptos de responsividad en el desarrollo de las vistas
-* Implementar un router para la navegación entre las diferentes
- vistas de la aplicación
-* Integrar una API externa
-* Entender la asincronía en JavaScript
-* Crear una suite de pruebas unitarias que permitan testear código asíncrono
-
-## 3. Consideraciones generales
+En este proyecto se convirtio la aplicación desarrollada [CartoonFun](https://isis98.github.io/DEV012-dataverse/src/) en una Single Page Application (SPA), manteniendo las funcionalidades de visualizar, filtrar, ordenar y calcular alguna estadística, adicionando una nueva vista para consultar información detallada de cada personaje/entidad y agregando la posibilidad de interactuar con un personaje/entidad o todos ellos a través de un sistema de chat impulsado por la API de OpenAI.
-* Este proyecto se debe resolver en duplas.
+Los objetivos generales de este proyecto fueron los siguientes
-* El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints.
+- Desarrollar una Single Page Application (SPA)
+- Aplicar los conceptos de responsividad en el desarrollo de las vistas
+- Implementar un router para la navegación entre las diferentes vistas de la aplicación
+- Integrar una API externa
+- Entender la asincronía en JavaScript
+- Crear una suite de pruebas unitarias que permitan testear código asíncrono
-* La lógica del proyecto debe estar implementada completamente en JavaScript
- (ES6+), HTML y CSS. Para este proyecto **no está permitido** utilizar
- _frameworks_ o librerías de CSS y JS.
+## 3. Información general
-* Es fundamental reutilizar parte del código del proyecto Dataverse, especialmente la sección relacionada con el dataset. Además, es esencial llevar a cabo una refactorización del código con el objetivo de hacerlo más modular y reutilizable. Esto implica la creación de nuevas funciones que permitan alcanzar las funcionalidades requeridas en el proyecto.
-
-* Para este proyecto **no está permitido** utilizar `async/await`.
-
-* El proyecto será entregado subiendo tu código a GitHub (commit/push) y deberás desplegarlo utilizando cualquiera de estas opciones:
- [Vercel](https://vercel.com/) o [Netlify](https://www.netlify.com/).
-
-* La división y organización del trabajo debe permitir, sin excepciones, que
- **cada integrante** del equipo practique el aprendizaje de todo lo involucrado
- en **cada historia**. _No se dividan el trabajo como en una fábrica._
- - ¿Hasta acá has avanzado en tus proyectos con cierta fluidez y sin mayores
- problemas? Sé generosa con tus compañeras, permíteles aprender y practicar
- sin restricciones, aunque tome un poco más de tiempo. Aproveha de
- _coachearlas_, de hacer _pair programming_, una de las mejores maneras de
- aprender es explicando verbalmente.
- - ¿Se te está haciendo difícil y te cuesta un poco más avanzar? No te quedes
- con las partes "fáciles" del proyecto, conversa, negocia, exige tu oportunidad
- para practicar y aprender lo que se te hace más difícil.
- Para comenzar tendrás que hacer un _fork_ y _clonar_ este repositorio.
+- Este proyecto se trabajó en duplas.
+- La lógica del proyecto fue implementada completamente en JavaScript (ES6+), HTML y CSS. Para este proyecto no se utilizó frameworks o librerías de CSS y JS.
+- Se reutilizó parte del código del proyecto [Dataverse](https://isis98.github.io/DEV012-dataverse/src/), especialmente la sección relacionada con el dataset. Además, se llevó a cabo una refactorización del código con el objetivo de hacerlo más modular y reutilizable. Esto implicó la creación de nuevas funciones que permitieron alcanzar las funcionalidades requeridas en el proyecto.
+- El proyecto fue entregado subiendo el código a GitHub (commit/push) y la interfaz fue desplegada usando [Netlify](https://www.netlify.com/).
## 4. Funcionalidades
-El entregable final será una Single Page Application (SPA) que permitira al usuario **visualizar la información, filtrarla, ordenarla y calcular alguna estadística**, tal como se hizo en Dataverse. Además, deberá permitir acceder a una página que muestre el detalle de cada personaje para _interactuar_ con cada una de las entidades del set de datos que utilizaste anteriormente.
-
-A continuación, detallamos las funcionalidades mínimas que tu proyecto debe cumplir:
-
-* La aplicación debe ser _responsive_
-* La aplicación debe ser una SPA con múltiples vistas:
- - Implementar un sistema de enrutamiento que permita la navegación
- dentro de la aplicación.
- - Cada vista de la aplicación debe ser cargada dinámicamente
- mediante JavaScript.
- - Asegurarse de que la URL se actualice de manera acorde a la vista
- cargada al igual que el `title` del documento (la pestaña del navegador).
- - La aplicación debe ser capaz de cargar la vista correspondiente a
- la URL actual al iniciar la aplicación.
-* La aplicación debe mantener las funcionalidades de Dataverse: visualizar,
- filtrar, ordenar y calcular estadística de la data.
-* Al hacer clic en una tarjeta de personaje/entidad, la aplicación debe
- redirigirse a una vista **con su propia URL** que muestre la información
- detallada sobre ese personaje/entidad en particular
-* La aplicación debe permitir a la usuaria configurar la API Key para
- interactuar con la API de Open AI
-* Usando la API de Open AI, la aplicación debe permitir al usuario
- interactuar con un personaje/entidad a través de un chat.
- Por ejemplo, si usamos la data de ejemplo de Dataverse, correspondiente
- a las mujeres con mayores contribuciones a la programación en la historia,
- una usuaria puede establecer una conversación
- interactiva con
- [Ada Lovelace](https://es.wikipedia.org/wiki/Ada_Lovelace)
- a través del sistema de chat, obteniendo
- información sobre sus logros, desafíos y contribuciones a la informática.
- La inteligencia artificial de OpenAI permite que las respuestas sean
- informativas y personalizadas según las preguntas de los usuarios.
-
-```text
-Usuaria: "Hola, Ada. Cuéntame más sobre tus contribuciones a la informática."
-
-Ada Lovelace (AI de OpenAI): "¡Hola! Claro, estaré encantada de hablar sobre eso.
-Mis contribuciones más destacadas se relacionan con el trabajo junto a Charles Babbage
-en el diseño de la Máquina Analítica. Además, desarrollé el primer algoritmo destinado
-a ser procesado por una máquina, lo que me convierte en la primera programadora de la historia.
-¿Hay algo más en particular que te gustaría saber?"
-
-Usuaria: "¡Eso es fascinante! ¿Qué desafíos enfrentaste en ese tiempo?"
-
-Ada Lovelace (AI de OpenAI): "En ese tiempo, enfrenté varios desafíos, uno de los
-principales fue la limitación de recursos y la falta de reconocimiento del potencial
-de la Máquina Analítica. También tuve que superar las restricciones sociales de
-la época, ya que las mujeres tenían un acceso limitado a la educación en
-matemáticas y ciencias. Sin embargo, mi pasión por la matemática y la visión
-de lo que estas máquinas podrían lograr me impulsaron a seguir adelante."
-```
-
-* La aplicación debe permitir al usuario interactuar de manera simultánea
- con **todos** los personajes/entidades a través de un chat:
- - Esta funcionalidad debe cargarse en la URL `/panel`
- - La usuaria puede ingresar su pregunta o mensaje para todos los
- personajes/entidades en un cuadro de texto y enviarlo con un botón
- - El mensaje de la usuaria debe ser ajustado para cada personaje/entidad,
- con el objetivo que este genere una respuesta basada en su personalidad
- y conocimiento
- - Las respuestas de todos los personajes se muestran de acuerdo al orden
- respuesta.
- - Indicar visualmente cuando uno o varios personajes/entidades esten
- generando una respuesta al mensaje enviado
-* La aplicacion debe informar a la usuaria los errores que puedan surgir al
- interactuar con la API, como por ejemplo alcanzar la cuota de tokens por
- minuto o cualquier otro error relacionado con la API. Debería
- proporcionarse una descripción clara de la causa del problema y posibles
- soluciones.
-
-Para que los chats anteriores puedan funcionar, es esencial que la aplicación
-se integre con la IA a través de la API de OpenAI. Para ello, el equipo de
-Laboratoria te proporcionará una API Key que la usuaria deberá poder ingresar
-en la aplicación que tu construirás.
-
-_Nota_: puedes revisar esta [implementación](https://laboratoria-dataverse-talks.netlify.app/)
-de ejemplo, cuyo principal objetivo es mostrarte cómo se vería la
-funcionalidad de chat en tu aplicación, más no tomes el diseño como
-referencia para tu proyecto, siente libre de hacer volar tu imaginación
-diseñando tu propia interfaz.
-
-## 5. Consideraciones técnicas
-
-La lógica del proyecto debe estar implementada completamente en JavaScript
-(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o
-frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e).
-
-El _boilerplate_ que viene con el proyecto es una estructura inicial. Ustedes
-deben ir agregando más archivos conforme vayan avanzando en su proyecto.
-La siguiente es una estructura de archivos que recomendamos:
-
-```text
-.
-├── src
-| ├── components
-| ├── data
-| | └── dataset.js
-| ├── lib
-| | └── dataFunctions.js
-| ├── views
-| ├── index.html
-| ├── index.js
-| ├── router.js
-| └── style.css
-├── test
-| └── dataFunctions.spec.js
-| └── example.spec.js
-├── README.md
-└── package.json
-
-```
-
-### `src/components`
-
-Esta carpeta contendrá archivos JavaScript
-que representan [componentes](https://lenguajejs.com/vuejs/componentes/que-es-un-componente/)
-reutilizables de tu aplicación. Estos componentes
-pueden ser elementos de la interfaz de usuario que se utilizan en varias partes
-de tu aplicación. Organizar tus componentes de esta manera ayuda a mantener un
-código más modular y reutilizable.
-
-### `src/data`
-
-En esta carpeta están los datos con los que vas a trabajar (los datos de ejemplo
-o los datos que generarías con ayuda de la inteligencia artificial).
-
-### `src/lib`
-
-En esta carpeta, crearás módulos que contengan funcionalidades no relacionadas
-al DOM. Aquí podrás incluir el archivo
-`dataFunctions.js` que contiene las funciones que te permiten filtrar,
-ordenar y hacer cálculos agregados. También podrás crear archivos con
-las funciones que
-interactúen con la API de inteligencia artificial o utilidades destinadas
-a almacenar datos en el local storage.
-
-### `src/views`
-
-Esta carpeta generalmente contiene archivos de los componentes que
-representan las diferentes páginas o vistas de tu aplicación.
-Cada vista (view) puede tener su propio archivo
-JavaScript, que exporta una función que es responsable de generar
-los elementos del DOM.
-
-### `src/index.html`
-
-Como en el proyecto anterior, existe un archivo `index.html`. En este archivo
-HTML encontrarás un elemento DOM `
` donde vas a
-renderizar las diferentes vistas de tu aplicación.
-
-### `src/index.js`
-
-El punto de partida para tu SPA sera el archivo `src/index.js`. Acá encontrarás
-algunas instrucciones y comentarios para guiarte en el inicio del desarrollo
-de tu aplicación.
-
-### `src/router.js`
-
-En este archivo vas a manejar el enrutamiento de tu aplicación. Es un archivo
-que debes crearlo por tu cuenta.
-
-### `src/style.css`
-
-Es un archivo que debes crearlo por tu cuenta para agregar los estilos que
-necesites para tu aplicación.
-
-### `src/test`
+Aquí definimos en más detalle las funcionalidades mínimas que tiene:
-Esta carpeta contiene los tests de tus funciones y componentes. Por ejemplo
-los tests de dataFunctions deben estar aquí.
+- La aplicación es una SPA con múltiples vistas:
+ - Implementa un sistema de enrutamiento que permite la navegación dentro de la aplicación.
+ - Cada vista de la aplicación es cargada dinámicamente mediante JavaScript.
+ - La URL se actualiza de manera acorde a la vista cargada al igual que el título del documento (la pestaña del navegador).
+ - La aplicación es capaz de cargar la vista correspondiente a la URL actual al iniciar la aplicación.
-## 6. Criterios de aceptación mínimos del proyecto
+- La aplicación mantiene las funcionalidades de [Dataverse](https://isis98.github.io/DEV012-dataverse/src/): visualizar, filtrar, ordenar y calcular estadística de la data.
-Además de las funcionalidades que definimos en la sección de
-[Funcionalidades](#4-funcionalidades), tu proyecto debe cumplir con los
-siguientes requisitos:
+- Al hacer clic en una tarjeta de personaje, la aplicación redirige a una vista que muestra la información detallada sobre ese personaje en particular
+
+- La aplicación permite a la usuaria configurar la API Key para interactuar con la API de Open AI
-### Definición del producto
+- La aplicación permite al usuario interactuar de manera simultánea con todos los personajes a través de un chat:
+ - Esta funcionalidad se carga en la URL `/group`
+ - La usuaria puede ingresar su pregunta o mensaje para todos los personajes en un cuadro de texto y enviarlo con un botón
+ - El mensaje de la usuaria es ajustado para cada personaje, con el objetivo que este genere una respuesta basada en su personalidad y conocimiento
+ - Las respuestas de todos los personajes se muestran de acuerdo al orden respuesta.
-Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio,
-contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve
-el problema (o problemas) que tiene tu usuaria.
+- La aplicacion debe informar a la usuaria los errores que puedan surgir al interactuar con la API
+
-### Historias de usuaria
+- La aplicación es *responsive*, es decir, se visualiza sin problemas
+desde distintos tamaños de pantallas: `móviles`, `tablets` y `desktops`.
-Una vez que entiendas las necesidades de tus usuarias, escribe las [Historias
-de Usuaria](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen
-todo lo que la usuaria necesita hacer/ver. Las **Historias de Usuaria** deben
-ser el resultado de tu proceso de investigación o _research_ de tus usuarias.
-Asegúrate de incluir la definición de terminado (_definition of done_) y los
-Criterios de Aceptación para cada una.
+## 5. Información técnica
-Usa tus historias de usuaria para planificar tus sprints dividiendo
-cada historia en tareas.
+La lógica del proyecto fue implementada completamente en JavaScript
+(ES6), HTML y CSS. En este proyecto NO se usó librerías o
+frameworks, solo vanilla JavaScript.
-En la medida de lo posible, termina una Historia de Usuaria antes de pasar
-a la siguiente (cumpliendo con la Definición de Terminado y los Criterios
-de Aceptación).
+La creacion de los test unitarios fue con el framework [Jest](https://jestjs.io/)
-### Diseño de la Interfaz de Usuaria
-#### Prototipo de baja fidelidad
+## 6. Maquetación del proyecto
-Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu
-solución usando papel y lápiz. Te recomendamos tomar fotos de todas las
-iteraciones que hagas, que las subas a tu repositorio y las menciones en tu
-`README.md`.
+### Metodologías ágiles utilizadas (Trabajo Colaborativo)
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
+En este proyecto se utilizaron las siguientes metodologías que permitieron un óptimo desempeño durante el trabajo en equipo:
-#### Prototipo de alta fidelidad
+- [SCRUM](https://www.atlassian.com/es/agile/scrum)
+- [KANBAN](https://www.atlassian.com/es/agile/kanban)
-Lo siguiente es diseñar tu Interfaz de Usuaria (UI por sus siglas en inglés -
-_User Interface_). Para eso debes aprender a utilizar alguna herramienta de
-diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es
-una herramienta que funciona en el navegador y, además, puedes crear una cuenta
-gratis. Sin embargo, eres libre de utilizar otros editores gráficos como
-Illustrator, Photoshop, etc.
+### Historias de usuario
-El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que
-desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu
-diseño debe seguir los fundamentos de _visual design_.
+Se realizaron Historias de Usuari@s que representan lo que se necesitó para hacer/ver en la página web.
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
+Las historias de usuari@s nos permitió tener una guia en la planificacion de los sprints dividiendola en tareas.
-### Testeos de usabilidad
-Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarias,
-y con base en los resultados, deberás iterar tus diseños. Cuéntanos
-qué problemas de usabilidad detectaste a través de los _tests_ y cómo los
-mejoraste en tu propuesta final.
+### Prototipo de alta fidelidad & Diseño Responsive
-### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)
+Se utilizó una herramienta de diseño visual (Figma) para crear los prototipos considerando que este debe ser un Diseño Responsive.
-Luego de diseñar tu interfaz de usuaria deberás trabajar en su implementación.
-**No** es necesario que construyas la interfaz exactamente como la diseñaste.
-Tu tiempo de hacking es escaso, así que deberás priorizar.
-
-Revisa [las funcionalidades](#4-funcionalidades) que el proyecto pide del interfaz.
+
### Pruebas unitarias
-El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es
-que tendrás que escribirlas tú para las funciones encargadas de _procesar_,
-_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas.
-Te recomendamos usar
-el framework [Jest](https://jestjs.io/) para ejecutar las pruebas unitarias.
-Consultar su documentación.
-
-Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_
-(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_
-(_ramas_) del archivo `src/dataFunctions.js` que contenga tus funciones y
-está detallado en la sección de [Consideraciones técnicas](#5-consideraciones-técnicas).
-
-## 7. Objetivos de aprendizaje
-
-
-Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
-### HTML
-
-- [ ] **Uso de HTML semántico**
-
- Links
-
- * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/html5/semantic-html)
- * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
-
Links
-
- * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/css/intro-css)
- * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)
-
Links
-
- * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/css/boxmodel-and-display)
- * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)
- * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)
-
Links
-
- * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- * [Flexbox Froggy](https://flexboxfroggy.com/#es)
- * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
-
Links
-
- * [A Complete Guide to Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)
- * [Grids - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
-
Links
-
- * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/dom/1-dom-methods-selection)
- * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
-
Links
-
- * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events)
- * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener)
- * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener)
- * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)
-
Links
-
- * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild)
- * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement)
- * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode)
- * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML)
- * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)
-
Links
-
- * [Manipulando el historial del navegador - MDN](https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador)
-
Links
-
- * [Window.localStorage - MDN](https://developer.mozilla.org/es/docs/Web/API/Window/localStorage)
-
Links
-
- * [Fetch API - MDN](https://developer.mozilla.org/es/docs/Web/API/Fetch_API)
-
Links
-
- * [Función Callback - MDN](https://developer.mozilla.org/es/docs/Glossary/Callback_function)
-
Links
-
- * [Promise - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- * [How to Write a JavaScript Promise - freecodecamp (en inglés)](https://www.freecodecamp.org/news/how-to-write-a-javascript-promise-4ed8d44292b8/)
-
Links
-
- * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/basics/values-variables-and-types)
- * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/basics/variables)
-
Links
-
- * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/functions)
- * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/functions/classic)
- * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/functions/arrow)
- * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)
-
Links
-
- * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/conditionals-and-loops)
- * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
-
Links
-
- * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/arrays)
- * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/)
- * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
- * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
-
Links
-
- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/objects/objects)
-
Links
-
- * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/flow-control/loops)
- * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
-
Links
-
- * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import)
- * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)
-
Links
-
- * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
-
Links
-
- * [Tests de código asincrónico con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/asynchronous)
-
Links
-
- * [Manual Mocks con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/manual-mocks)
-
Links
-
- * [HTTP headers - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Headers)
-
Links
-
- * [Generalidades del protocolo HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Overview)
- * [Mensajes HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Messages)
-
Links
-
- * [Códigos de estado de respuesta HTTP - MDN](https://developer.mozilla.org/es/docs/Web/HTTP/Status)
- * [The Complete Guide to Status Codes for Meaningful ReST APIs - dev.to](https://dev.to/khaosdoctor/the-complete-guide-to-status-codes-for-meaningful-rest-apis-1-5c5)
-
Links
-
- * [Priming Chatbots | Learn Prompting: Your Guide to Communicating with AI](https://learnprompting.org/es/docs/basics/priming_prompt)
-
Links
-
- * [Introduction - API Reference - OpenAI API](https://platform.openai.com/docs/introduction)
- * [Authentication - API Reference - OpenAI API](https://platform.openai.com/docs/api-reference/authentication)
- * [Making requests - API Reference - OpenAI API](https://platform.openai.com/docs/api-reference/making-requests)
- * [The chat completion object - API Reference - OpenAI API](https://platform.openai.com/docs/api-reference/chat/object)
-
Links
-
- * [Sitio oficial de GitHub Pages](https://pages.github.com/)
-
Links
-
- * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15)
- * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)
-
Dataverse Chat
+
+
+
+
+
+
+ 404
+
+
Dataverse Chat
-
-
+
+
+
-
+
+
+
-
\ No newline at end of file
+
diff --git a/src/index.js b/src/index.js
index a0e2d57c..884cf75c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,19 +1,27 @@
// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
+import { navigateTo } from "./router.js";
-/*
-import Example from './views/Example.js';
+const links = document.querySelectorAll("a.redirection");
-Ejemplo de definición de rutas:
+links.forEach((link) => {
+ link.addEventListener("click", (event) => {
+ event.preventDefault();
+ const linkRoute = event.target.href.replace(window.location.origin, "");
+ navigateTo(linkRoute);
+ });
+});
-const routes = {
- "/": Example,
- ...
-}
-*/
+window.addEventListener("popstate", (event) => {
+ if (event.state === null) {
+ const currentPath = window.location.pathname;
+ navigateTo(currentPath);
+ } else {
+ const currentPath = window.location.pathname;
+ navigateTo(currentPath);
+ }
+});
-/*
-TODO:
-1.- Definir rutas en router.
-2.- Pasar "root element" a router.
-3.- Invocar el router para renderizar la vista correcta.
-*/
\ No newline at end of file
+window.addEventListener("load", () => {
+ const currentPath = window.location.pathname;
+ navigateTo(currentPath);
+});
diff --git a/src/lib/Chat.Api.js b/src/lib/Chat.Api.js
new file mode 100644
index 00000000..3b6da61b
--- /dev/null
+++ b/src/lib/Chat.Api.js
@@ -0,0 +1,47 @@
+export const singleChatResponse = (apiKey, selectedCard, message) => {
+ const apiUrl = "https://api.openai.com/v1/chat/completions";
+
+ const requestBody = {
+ model: "gpt-3.5-turbo",
+ messages: [
+ {
+ role: "system",
+ content: `Tu eres el personaje principal de la caricatura ${selectedCard.name}`,
+ },
+ { role: "user", content: message },
+ ],
+ };
+
+ return fetch(apiUrl, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${apiKey}`,
+ },
+ body: JSON.stringify(requestBody),
+ })
+ .then((response) => {
+ return response.json();
+ })
+ .then((data) => {
+ if (data.choices && data.choices.length > 0 && data.choices[0].message) {
+ return {
+ success: true,
+ content: data.choices[0].message.content,
+ };
+ } else {
+ return {
+ success: false,
+ error: "Error al obtener respuesta de la IA",
+ };
+ }
+ })
+
+ .catch((error) => {
+ console.error("Error de red al obtener respuesta de la IA", error);
+ return {
+ success: false,
+ error: "Error de red al obtener respuesta de la IA",
+ };
+ });
+};
diff --git a/src/lib/dataFunctions.js b/src/lib/dataFunctions.js
new file mode 100644
index 00000000..bf436d0b
--- /dev/null
+++ b/src/lib/dataFunctions.js
@@ -0,0 +1,56 @@
+export const filterData = (data, filterBy, value) => {
+
+ return data.filter((element) => element[filterBy] === value);
+};
+
+export const sortData = (data, sortBy, sortOrder) => {
+ const sortedData = [...data];
+
+ const asc = sortedData.sort((a, b) => {
+ if (a[sortBy] < b[sortBy]) {
+ return -1;
+ }
+ // }else if (a[sortBy] <= b[sortBy]){
+ // return 0
+ // }
+ });
+
+ if (sortOrder === "desc") {
+ asc.reverse();
+ }
+
+ return sortedData;
+};
+
+export const computeStats = (data) => {
+ const arrayOfChannels = data.map((item) => item.channel);
+ // ["tnt", "spn", "espn", "fox", "fox"]
+ const numbersOfChannels = arrayOfChannels.reduce((accum, channel) => {
+ if (accum[channel]) {
+ // accum[channel]++;
+ accum[channel] = Number(accum[channel]) + 1;
+ } else {
+ accum[channel] = 1;
+ }
+ return accum;
+ }, {});
+ // {}
+ // { tnt: 1}
+ // { tnt : 1
+ // spn : 1 }
+ // { tnt : 1, spn : 1, espn : 1}
+ // { tnt : 1, spn : 1, espn : 1, fox : 1}
+ // { tnt : 1, spn : 1, espn : 1, fox : 1 + 1(2)}
+
+ // for (const key in numbersOfChannels) {
+ // numbersOfChannels[key] = Number(numbersOfChannels[key]);
+ // }
+
+ return numbersOfChannels;
+};
+
+export const renderInView = (element, id) => {
+ const rootElement = document.getElementById(id);
+ rootElement.innerHTML = "";
+ rootElement.appendChild(element);
+};
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 00000000..2dae37d7
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,44 @@
+import home from "./viewsComponents/homeView/home.js";
+import { errorView } from "./viewsComponents/errorView/errorView.js";
+import { apiView } from "./viewsComponents/apiView/apiView.js";
+import { groupChatView } from "./viewsComponents/groupChat/groupChat.js";
+import { singleChatView } from "./viewsComponents/singleChat/chatView.js";
+
+const routes = {
+ "/": home,
+ "/404": errorView,
+ "/api": apiView,
+ "/group": groupChatView,
+ "/chat": singleChatView,
+};
+
+function render(template) {
+ const rootElement = document.getElementById("root");
+ rootElement.innerHTML = "";
+ rootElement.appendChild(template);
+}
+
+function searchRoute(route) {
+ // routes = "/hogar/bebes"
+
+ if (routes[route]) {
+ return routes[route]();
+ } else {
+ return routes["/404"]();
+ }
+}
+
+function updateURLstate(route) {
+ const currentUrl = window.location.origin + route;
+ history.pushState({}, "", currentUrl);
+}
+
+function navigateTo(route) {
+ const template = searchRoute(route);
+ updateURLstate(route);
+ render(template);
+}
+
+
+
+export { render, searchRoute, updateURLstate, navigateTo };
diff --git a/src/staticsComponents/footer.js b/src/staticsComponents/footer.js
new file mode 100644
index 00000000..771d99cd
--- /dev/null
+++ b/src/staticsComponents/footer.js
@@ -0,0 +1,2 @@
+export const footer = document.createElement("footer");
+footer.innerHTML = ``;
diff --git a/src/staticsComponents/header.js b/src/staticsComponents/header.js
new file mode 100644
index 00000000..3fc40be4
--- /dev/null
+++ b/src/staticsComponents/header.js
@@ -0,0 +1,7 @@
+export const singleH1 = document.querySelector("h1");
+singleH1.innerHTML = `
+
+
+`;
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 00000000..b25f1e37
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,21 @@
+body {
+ background: rgb(238, 174, 202);
+ background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
+}
+
+.header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 95px;
+ padding: 10px;
+ background-image: url(./assets/images/fun.png);
+ background-repeat: no-repeat;
+ align-items: center;
+ background-position-x: 50%;
+ background-size: 650px;
+ box-sizing: border-box;
+}
+
+
diff --git a/src/stylesError.css b/src/stylesError.css
new file mode 100644
index 00000000..d69b5509
--- /dev/null
+++ b/src/stylesError.css
@@ -0,0 +1,165 @@
+.all {
+ background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+}
+
+i {
+ width: 70px;
+ height: 70px;
+ background-size: cover;
+ position: absolute;
+ left: 89%;
+ margin: 0;
+ top: 0;
+ background-image: url(./assets/images/263115.png);
+}
+
+
+
+#home {
+ text-align: center;
+ width: 10%;
+ height: 9%;
+ position: fixed;
+ margin-top: 1%;
+ z-index: 100;
+ left: 86%;
+ top: 0;
+ background-image: url(263115.png);
+ background-size: 50%;
+ background-position: center;
+ background-repeat: no-repeat;
+ border:none ;
+}
+
+.root {
+ margin-top: 5%;
+ width: 100%;
+ height: 87%;
+ margin-left: 0em;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: large;
+}
+
+#triste {
+ background-image: url(./assets/images/patotriste.png);
+ margin-top: 10%;
+ width: 100%;
+ height: 20em;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position-x: center;
+}
+
+section {
+ font-size: xx-large;
+ font-family: 'circular';
+ text-align: center;
+}
+
+.footer {
+ position: fixed;
+ text-align: center;
+ width: 100%;
+ bottom: 0;
+}
+
+p {
+ font-size: xx-large;
+ text-align: center;
+}
+
+/* Media Query para dispositivos móviles */
+@media (max-width: 480px) {
+ #home {
+ width: 20%;
+ height: auto;
+ left: 80%;
+ }
+
+ .header {
+ position: absolute;
+ top: 8px;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+ background-position-x: -1%;
+ border-bottom: 3px solid black;
+ background-size: 340px;
+ }
+
+ #root {
+ margin-top: 17%;
+ font-size: medium;
+ }
+
+ i {
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 10%;
+ height: 100%;
+ background-size: 80%;
+ left: 85%;
+ }
+
+ p {
+ margin-top: 0;
+ font-size: medium;
+ }
+
+}
+
+/* Media Query para tablets */
+@media (min-width: 481px) and (max-width: 1024px) {
+ #home {
+ width: 15%;
+ left: 82%;
+ }
+
+ .header {
+ position: absolute;
+ top: 5px;
+ left: 0;
+ width: 100%;
+ height: 70px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+ background-size: 520px;
+ }
+ #root {
+ margin-top: 8%;
+ font-size: large;
+ height: 5em;
+ }
+
+
+
+ i {
+ width: 60px;
+ height: 60px;
+ background-size: cover;
+ position: absolute;
+ margin: 0px;
+ top: 6px;
+ background-image: url(263115.png);
+ left: 89%;
+ }
+}
+
+/* Media Query para pantallas más grandes */
+@media (min-width: 1025px) {
+ #home {
+ width: 10%;
+ left: 86%;
+ }
+
+ #root {
+ margin-top: 5%;
+ }
+
+
+
+}
\ No newline at end of file
diff --git a/src/views/Example.js b/src/views/Example.js
index baca4441..c78b7c92 100644
--- a/src/views/Example.js
+++ b/src/views/Example.js
@@ -1,5 +1,17 @@
-const Example = () => {
+export const Home = () => {
+ const p = document.createElement("p");
+ p.innerHTML = "Hola mundo";
+ return p;
+};
+export const Chat = () => {
+ const p = document.createElement("p");
+ p.innerHTML = "chat personal";
+ return p;
};
-export default Example;
\ No newline at end of file
+export const ChatGrupal = () => {
+ const p = document.createElement("p");
+ p.innerHTML = "chat grupal";
+ return p;
+};
diff --git a/src/viewsComponents/apiView/263115.png b/src/viewsComponents/apiView/263115.png
new file mode 100644
index 00000000..a3e500c8
Binary files /dev/null and b/src/viewsComponents/apiView/263115.png differ
diff --git a/src/viewsComponents/apiView/apiView.js b/src/viewsComponents/apiView/apiView.js
new file mode 100644
index 00000000..c9dd32db
--- /dev/null
+++ b/src/viewsComponents/apiView/apiView.js
@@ -0,0 +1,53 @@
+import { footer } from "../../staticsComponents/footer.js";
+export const apiView = () => {
+ const link = document.getElementById("pageStyles");
+
+ if (link) {
+ link.href = "./viewsComponents/apiView/stylesAPI.css";
+ }
+
+ const container = document.createElement("div");
+ container.setAttribute("id", "apiView");
+ //Seleccionamos elemento padre que contendrá todos los nodos
+ // const apiKeyView = document.querySelector('.all')
+ //Creamos elementos
+ const apiHeader = document.createElement("header");
+ apiHeader.setAttribute("class", "header");
+ apiHeader.innerHTML = `
+
+
+ `;
+ const apiRoot = document.createElement("main");
+ apiRoot.setAttribute("id", "apiRoot");
+ apiRoot.setAttribute("class", "main");
+ apiRoot.innerHTML = `
+ Ingresa tu API key:
+
+ Enviar
+
+
+ `;
+
+ //Agregamos los elementos con appendChild
+ container.appendChild(apiHeader);
+ container.appendChild(apiRoot);
+ document.body.appendChild(container);
+ document.body.appendChild(footer);
+
+ const scriptPage = document.getElementById("pageScript");
+ if (scriptPage) {
+ scriptPage.remove();
+ }
+
+ const script = document.createElement("script");
+ script.type = "module";
+ script.src = "./viewsComponents/apiView/mainApi.js";
+ script.id = "pageScript";
+ document.body.appendChild(script);
+
+ return container;
+};
diff --git a/src/viewsComponents/apiView/mainApi.js b/src/viewsComponents/apiView/mainApi.js
new file mode 100644
index 00000000..6b1803c3
--- /dev/null
+++ b/src/viewsComponents/apiView/mainApi.js
@@ -0,0 +1,24 @@
+import { navigateTo } from "../../router.js";
+
+
+const apiKey = localStorage.getItem("apiKey");
+if (apiKey !== null) {
+ const dataItemValue = localStorage.getItem("dataItem");
+ if (dataItemValue === "group") {
+ navigateTo("/group");
+ } else {
+ navigateTo("/chat");
+ }
+}
+
+document.getElementById("button").addEventListener("click", () => {
+ const apiKey = document.getElementById("password").value;
+ localStorage.setItem("apiKey", apiKey);
+
+ const dataItemValue = localStorage.getItem("dataItem");
+ if (dataItemValue === "group") {
+ navigateTo("/group");
+ } else {
+ navigateTo("/chat");
+ }
+});
diff --git a/src/viewsComponents/apiView/stylesAPI.css b/src/viewsComponents/apiView/stylesAPI.css
new file mode 100644
index 00000000..431bf15b
--- /dev/null
+++ b/src/viewsComponents/apiView/stylesAPI.css
@@ -0,0 +1,177 @@
+
+body {
+ background: rgb(238,174,202);
+ background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+}
+
+
+i {
+ width: 90px;
+ height: 90px;
+ background-size: cover;
+ position: absolute;
+ left: 88%;
+ margin: 0;
+ top: 0;
+ background-image: url(263115.png);
+}
+.main{
+ display: flex;
+ position: absolute;
+ left: 10px;
+ right: 0;
+ top: 150px;
+ margin: 50px 50px;
+ flex-direction: column;
+ align-items: center;
+}
+#phrase {
+ align-self: center;
+ font-size: xx-large;
+}
+
+#button {
+ margin: 0;
+ font-size: x-large;
+ padding: 9px 45px;
+ border-radius: 18px;
+}
+
+#password {
+ width: 58%;
+ border-radius: 30px;
+ margin: 55px 0;
+ font-size: 25px;
+}
+
+.footer {
+ position: fixed;
+ bottom: 0;
+ left: 0px;
+ right: 0px;
+ text-align: center;
+}
+
+/* Mediaquery Mobile */
+@media ( max-width: 480px) {
+
+ .header {
+ position: absolute;
+ top: 8px;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+ background-position-x: -1%;
+ border-bottom: 3px solid black;
+ background-size: 340px;
+ }
+
+ i {
+ width: 40px;
+ height: 40px;
+ background-size: cover;
+ position: absolute;
+ left: 89%;
+ margin: 0;
+ top: 6px;
+ background-image: url(263115.png);
+ }
+
+
+ .main{
+ display: flex;
+ position: absolute;
+ left: 10px;
+ right: 0;
+ top: 150px;
+ margin: 50px 10px;
+ flex-direction: column;
+ align-items: center;
+
+ }
+ #phrase {
+ font-size: 34px;
+ text-align: center;
+ }
+
+ #button {
+ margin: 0;
+ font-size: 25px;
+ padding: 9px 25px;
+ border-radius: 18px;
+
+ }
+
+ #password {
+ width: 90%;
+ border-radius: 30px;
+ margin: 20px;
+ font-size: xx-large;
+ }
+
+}
+
+/* Mediaquery Tablets*/
+@media ( min-width: 481px) and (max-width:1023px){
+
+
+ .header {
+ position: absolute;
+ top: 5px;
+ left: 0;
+ width: 100%;
+ height: 70px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+ border-bottom: 3px solid black;
+ background-size: 520px;
+ }
+
+ i {
+ width: 60px;
+ height: 60px;
+ background-size: cover;
+ position: absolute;
+ margin: 0px;
+ top: 6px;
+ background-image: url(263115.png);
+ left: 89%;
+ }
+
+
+ .main{
+ display: flex;
+ position: absolute;
+ left: 10px;
+ right: 0;
+ top: 150px;
+ margin: 50px 10px;
+ flex-direction: column;
+ align-items: center;
+
+ }
+ #phrase {
+ align-self: center;
+ font-size: 35px;
+ }
+
+ #button {
+ margin: 0;
+ font-size: 25px;
+ padding: 9px 25px;
+ border-radius: 18px;
+
+ }
+
+ #password {
+ width: 85%;
+ border-radius: 30px;
+ margin: 22px;
+ font-size: xx-large;
+ }
+
+}
\ No newline at end of file
diff --git a/src/viewsComponents/errorView/263115.png b/src/viewsComponents/errorView/263115.png
new file mode 100644
index 00000000..a3e500c8
Binary files /dev/null and b/src/viewsComponents/errorView/263115.png differ
diff --git a/src/viewsComponents/errorView/errorView.js b/src/viewsComponents/errorView/errorView.js
new file mode 100644
index 00000000..40112465
--- /dev/null
+++ b/src/viewsComponents/errorView/errorView.js
@@ -0,0 +1,51 @@
+/* const errorView = () => {
+ const errorPage = document.createElement("main");
+ errorPage.innerHTML = `
+ 404 Pagina no encontrada
+ `;
+
+ return errorPage;
+};
+
+export default errorView;
+*/
+import { footer } from "../../staticsComponents/footer.js";
+export const errorView = () => {
+ /*const meta = document.createElement("meta");
+ meta.name = "viewport";
+ meta.content = "width=device-width, initial-scale=1.0" */
+
+ const link = document.getElementById("pageStyles");
+ link.href = "./viewsComponents/errorView/stylesError.css";
+
+
+
+ //Seleccionamos elemento padre que contendrá todos los nodos
+ const errorPageView = document.querySelector(".all");
+
+ //Creamos elementos
+ const apiHeader = document.createElement("header");
+ apiHeader.setAttribute("class", "header");
+ apiHeader.innerHTML = `
+
+
+ `;
+
+ const errorRoot = document.createElement("section");
+ errorRoot.setAttribute("class", "root");
+ errorRoot.innerHTML = `404
`;
+
+ // document.body.appendChild(footer);
+ // errorPageView.appendChild(apiHeader);
+ // errorPageView.insertBefore(errorRoot);
+
+ errorPageView.appendChild(apiHeader);
+ errorPageView.appendChild(errorRoot);
+
+ // Append the footer to the error view container
+ errorPageView.appendChild(footer);
+
+ return errorPageView;
+};
diff --git a/src/viewsComponents/errorView/patotriste.png b/src/viewsComponents/errorView/patotriste.png
new file mode 100644
index 00000000..48772a4d
Binary files /dev/null and b/src/viewsComponents/errorView/patotriste.png differ
diff --git a/src/viewsComponents/errorView/stylesError.css b/src/viewsComponents/errorView/stylesError.css
new file mode 100644
index 00000000..de2f6086
--- /dev/null
+++ b/src/viewsComponents/errorView/stylesError.css
@@ -0,0 +1,165 @@
+.all {
+ background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+}
+
+i {
+ width: 70px;
+ height: 70px;
+ background-size: cover;
+ position: absolute;
+ left: 89%;
+ margin: 0;
+ top: 0;
+ background-image: url(263115.png);
+}
+
+
+
+#home {
+ text-align: center;
+ width: 10%;
+ height: 9%;
+ position: fixed;
+ margin-top: 1%;
+ z-index: 100;
+ left: 86%;
+ top: 0;
+ background-image: url(263115.png);
+ background-size: 50%;
+ background-position: center;
+ background-repeat: no-repeat;
+ border:none ;
+}
+
+.root {
+ margin-top: 5%;
+ width: 100%;
+ height: 87%;
+ margin-left: 0em;
+ font-family: 'Courier New', Courier, monospace;
+ font-size: large;
+}
+
+#triste {
+ background-image: url(patotriste.png);
+ margin-top: 10%;
+ width: 100%;
+ height: 20em;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position-x: center;
+}
+
+section {
+ font-size: xx-large;
+ font-family: 'circular';
+ text-align: center;
+}
+
+.footer {
+ position: fixed;
+ text-align: center;
+ width: 100%;
+ bottom: 0;
+}
+
+p {
+ font-size: xx-large;
+ text-align: center;
+}
+
+/* Media Query para dispositivos móviles */
+@media (max-width: 480px) {
+ #home {
+ width: 20%;
+ height: auto;
+ left: 80%;
+ }
+
+ .header {
+ position: absolute;
+ top: 8px;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+ background-position-x: -1%;
+ border-bottom: 3px solid black;
+ background-size: 340px;
+ }
+
+ #root {
+ margin-top: 17%;
+ font-size: medium;
+ }
+
+ i {
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 10%;
+ height: 100%;
+ background-size: 80%;
+ left: 85%;
+ }
+
+ p {
+ margin-top: 0;
+ font-size: medium;
+ }
+
+}
+
+/* Media Query para tablets */
+@media (min-width: 481px) and (max-width: 1024px) {
+ #home {
+ width: 15%;
+ left: 82%;
+ }
+
+ .header {
+ position: absolute;
+ top: 5px;
+ left: 0;
+ width: 100%;
+ height: 70px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+ background-size: 520px;
+ }
+ #root {
+ margin-top: 8%;
+ font-size: large;
+ height: 5em;
+ }
+
+
+
+ i {
+ width: 60px;
+ height: 60px;
+ background-size: cover;
+ position: absolute;
+ margin: 0px;
+ top: 6px;
+ background-image: url(263115.png);
+ left: 89%;
+ }
+}
+
+/* Media Query para pantallas más grandes */
+@media (min-width: 1025px) {
+ #home {
+ width: 10%;
+ left: 86%;
+ }
+
+ #root {
+ margin-top: 5%;
+ }
+
+
+
+}
\ No newline at end of file
diff --git a/src/viewsComponents/groupChat/263115.png b/src/viewsComponents/groupChat/263115.png
new file mode 100644
index 00000000..a3e500c8
Binary files /dev/null and b/src/viewsComponents/groupChat/263115.png differ
diff --git a/src/viewsComponents/groupChat/groupChat.js b/src/viewsComponents/groupChat/groupChat.js
new file mode 100644
index 00000000..035d072c
--- /dev/null
+++ b/src/viewsComponents/groupChat/groupChat.js
@@ -0,0 +1,47 @@
+import { footer } from "../../staticsComponents/footer.js";
+export const groupChatView = () => {
+ const link = document.getElementById("pageStyles")
+ link.href = "./viewsComponents/groupChat/stylesGroup.css";
+
+ const container = document.createElement("div");
+ container.setAttribute("id", "chatView");
+
+ const groupHeader = document.createElement("header");
+ groupHeader.setAttribute("class", "header");
+ groupHeader.innerHTML = `
+
+
+ `;
+
+ const groupChatSection = document.createElement("section");
+ groupChatSection.setAttribute("id", "singleSection");
+ groupChatSection.innerHTML = `
+
+
+ `;
+
+ const inputText = document.createElement("section");
+ inputText.setAttribute("id", "inputText");
+ inputText.innerHTML = `
+ Enviar
+ `;
+
+ container.appendChild(groupHeader);
+ container.appendChild(groupChatSection);
+ container.appendChild(inputText);
+ document.body.appendChild(container);
+ document.body.appendChild(footer);
+
+ const script = document.getElementById("pageScript");
+
+ script.src = "./viewsComponents/groupChat/mainGroup.js";
+
+
+ return container;
+};
diff --git a/src/viewsComponents/groupChat/mainGroup.js b/src/viewsComponents/groupChat/mainGroup.js
new file mode 100644
index 00000000..2cca969e
--- /dev/null
+++ b/src/viewsComponents/groupChat/mainGroup.js
@@ -0,0 +1,93 @@
+import data from "../../data/dataset.js";
+import { navigateTo } from "../../router.js";
+const apiKey = localStorage.getItem("apiKey");
+
+if (!apiKey) {
+ // Solo redirigir si no hay una API key
+ navigateTo("/api");
+} else {
+ // Manejar la interacción por mensajes
+ const interactionWithIa = document.getElementById("button");
+ interactionWithIa.addEventListener("click", sendMessage);
+}
+
+const interactionWithIa = document.getElementById("button");
+interactionWithIa.addEventListener("click", sendMessage); //
+//Evento KeyPress
+window.addEventListener("keydown", function (event) {
+ if (event.key === "Enter") {
+ sendMessage();
+ }
+});
+
+const programs = data.map((programa) => programa.name);
+
+function sendMessage() {
+ const mainContainer = document.querySelector(".singleChat");
+ const messageInput = document.getElementById("text");
+ const message = messageInput.value;
+
+ addMessage("Usuari@:", message);
+ getAnswerIA("Personaje:", message);
+
+ messageInput.value = "";
+
+ mainContainer.scrollTop = mainContainer.scrollHeight;
+}
+function addMessage(sender, message) {
+ const mainContainer = document.querySelector(".singleChat");
+ const newMessage = document.createElement("section");
+ newMessage.setAttribute("class", "messageUser");
+ newMessage.innerHTML = `Usuari@:
${message}`;
+ mainContainer.appendChild(newMessage);
+}
+function getAnswerIA(sender, message) {
+ const mainContainer = document.querySelector(".singleChat");
+ const messageIA = document.createElement("section");
+ messageIA.setAttribute("class", "messageIa");
+
+ const apiUrl = "https://api.openai.com/v1/chat/completions";
+
+ const requestBody = {
+ model: "gpt-3.5-turbo",
+ messages: [
+ {
+ role: "system",
+ content: `Tu eres uno de los personajes principales de la caricatura ${programs.join(
+ ", "
+ )}`,
+ },
+ { role: "user", content: message },
+ ],
+ };
+
+ fetch(apiUrl, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${apiKey}`,
+ },
+ body: JSON.stringify(requestBody),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ if (data.choices && data.choices.length > 0 && data.choices[0].message) {
+ // Agregar la respuesta de la IA al mensaje
+ messageIA.innerHTML = `${sender}
${data.choices[0].message.content}`;
+ } else {
+ messageIA.innerHTML = `${sender}
Error al obtener respuesta de la IA`;
+ }
+ // Agregar el mensaje completo al contenedor principal
+ mainContainer.appendChild(messageIA);
+
+ // Hacer scroll hacia abajo para mostrar el último mensaje
+ mainContainer.scrollTop = mainContainer.scrollHeight;
+ });
+
+ // .catch((error) => {
+ // console.error("Error de red al obtener respuesta de la IA", error);
+ // messageIA.innerHTML = `${sender}
Error de red al obtener respuesta de la IA`;
+ // mainContainer.appendChild(messageIA);
+ // mainContainer.scrollTop = mainContainer.scrollHeight;
+ // });
+}
diff --git a/src/viewsComponents/groupChat/stylesGroup.css b/src/viewsComponents/groupChat/stylesGroup.css
new file mode 100644
index 00000000..b227d2dd
--- /dev/null
+++ b/src/viewsComponents/groupChat/stylesGroup.css
@@ -0,0 +1,217 @@
+body {
+ background: rgb(238,174,202);
+ background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+}
+
+i {
+ width: 70px;
+ height: 70px;
+ background-size: cover;
+ position: absolute;
+ left: 89%;
+ margin: 0;
+ top: 0;
+ background-image: url(263115.png);
+}
+.main{
+ position: fixed;
+ left: 10px;
+ right: 0;
+ top: 7%;
+}
+#singleSection{
+ display: flex;
+ margin-top: 8%;
+ margin-left: 10%;
+ margin-bottom: 3%;
+ width: 80%;
+ height: 350px;
+}
+
+.singleChat {
+ background-color: rgba(255, 255, 255, 0.45);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ border-radius: 40px;
+ padding: 25px;
+ flex-direction: column;
+ display: flex;
+ overflow: scroll;
+ font-size: small;
+ width: 90%;
+ margin: 0;
+ overflow-y: auto;
+ scroll-behavior: smooth;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+#sender {
+ color: red;
+}
+#inputText {
+ display: flex;
+ margin-left: 3%;
+ justify-content: center;
+ margin-top: -2%;
+}
+#questions {
+ width: 60%;
+ text-align: justify;
+
+}
+#button {
+ font-size: medium;
+ width: 10%;
+ margin-top: 1%;
+ margin-left: -5%;
+ border-radius: 10%;
+ height: 50px;
+ background-color: rgba(238,174,202,1);
+}
+.messageIa {
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ border-radius: 25px 25px 25px 0;
+ background-color: #E3E4CB;
+ border: solid black 1px;
+ margin: 5px;
+ padding: 10px;
+ word-wrap: break-word;
+ align-self: start;
+ width: inherit;
+}
+.messageUser {
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ border-radius: 25px 25px 0 25px;
+ background-color: white;
+ border: solid black 1px;
+ margin: 5px;
+ padding: 10px;
+ align-self: end;
+ text-align: end;
+ width: inherit;
+}
+
+p {
+ margin:2px;
+}
+#text {
+ text-align: left;
+ border-radius: 30px;
+ width: 80%;
+ font-size: medium;
+ height: 30px;
+}
+.footer {
+ position: relative;
+ bottom: 0;
+ left: 0px;
+ right: 0px;
+ text-align: center;
+}
+
+ /* Mediaquery Mobile */
+ /* @media ( max-width: 480px) {
+ * {
+ display: flex;
+ }
+
+} */
+
+/*@media ( min-width: 481px) and (max-width:1024px) {
+ .header {
+ background-size: 45%;
+ }
+ #singleSection {
+ margin-top: 10%;
+ }
+
+ .singleChat {
+ height: 70%;
+ }
+ #inputText {
+ margin-top: -7%;
+ width: 80%;
+ margin-left: 10%;
+ }
+
+ #button {
+ font-size: medium;
+ }
+
+} */
+
+@media (max-width: 480px) {
+ #singleSection {
+ margin-top: 3em;
+ }
+
+ .header {
+ padding: 0;
+ background-size: 50%;
+ background-position: center;
+ height: 3em;
+ }
+
+ i {
+ width: 7%;
+ height: 3em;
+ background-size: 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
+ .singleChat {
+ margin-top: 3em;
+ }
+
+ #button {
+ width: 30%;
+ }
+
+ #questions {
+ font-size: small;
+ width: 70%;
+ }
+
+ #text {
+ font-size: small;
+ height: 30%;
+ height: 1em;
+ }
+
+ #button {
+ width: 4em;
+ height: 2em;
+}
+}
+/* Media Query para tablets */
+@media (min-width: 481px) and (max-width: 1024px) {
+ #button {
+ width: 15%;
+ font-size: medium;
+ }
+
+ .header {
+ padding: 0;
+ background-size: 50%;
+ height: 4em;
+ background-position: center;
+ }
+
+ i {
+ background-position: center;
+ background-size: 70%;
+ background-repeat: no-repeat;
+ left: 80%;
+ width: 10%;
+ }
+
+ #singleSection {
+ margin-top: 6em;
+ }
+
+}
+
+/* Media Query para pantallas más grandes */
+@media (min-width: 1025px) {
+ #button {
+ width: 10%;
+ }
+}
diff --git a/src/viewsComponents/homeView/chat.png b/src/viewsComponents/homeView/chat.png
new file mode 100644
index 00000000..fff6433a
Binary files /dev/null and b/src/viewsComponents/homeView/chat.png differ
diff --git a/src/viewsComponents/homeView/createCards.js b/src/viewsComponents/homeView/createCards.js
new file mode 100644
index 00000000..454174ce
--- /dev/null
+++ b/src/viewsComponents/homeView/createCards.js
@@ -0,0 +1,73 @@
+export const createCards = (data) => {
+ // Aquí comienza tu código y puedes retornar lo que tu necesites
+ //Crear un elemento ul por cada elemento en data
+ const ul = document.createElement("ul");
+ ul.setAttribute("class", "ulClass");
+ data.forEach(createLi);
+
+ function createLi(element) {
+ // const li = document.createElement("li");
+ // //Inyectar cada li con los datos de cada elemento
+ const li = `
+
+
+
+
+
+
+
+
+
+ ${element.name}
+ Canal de televisión: ${element.channel}
+ Transmision: ${element.status}
+ Audiencia: ${element.targetAudience}
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ //Cada li inyectarlo en la ul
+ ul.innerHTML += li;
+ }
+
+ //Renderizar el ul, esto debe estar en el main.js
+ return ul;
+};
+
+export function createCard(infoCard) {
+ const li = document.createElement("li");
+ li.innerHTML = `
+
+
+
+
+
+
+
+ ${infoCard.name} ${infoCard.description}
+
+
+ `;
+
+ return li;
+}
diff --git a/src/viewsComponents/homeView/home.js b/src/viewsComponents/homeView/home.js
new file mode 100644
index 00000000..698285fa
--- /dev/null
+++ b/src/viewsComponents/homeView/home.js
@@ -0,0 +1,116 @@
+import data from "../../data/dataset.js";
+import { computeStats } from "../../lib/dataFunctions.js";
+import { createCards } from "./createCards.js";
+import { footer } from "../../staticsComponents/footer.js";
+
+const home = () => {
+ const link = document.getElementById("pageStyles");
+ link.href = "./viewsComponents/homeView/stylesHome.css";
+
+ const homeHeader = document.createElement("header");
+ homeHeader.setAttribute("class", "header");
+ homeHeader.innerHTML = `
+
+ Chatea con los personajes
+
+ `;
+
+ const container = document.createElement("section");
+ container.setAttribute("id", "home");
+
+ const buttonToggle = document.createElement("section");
+ buttonToggle.innerHTML = `
+
+ `;
+
+ const filtersHtml = `
+
+
+ Filtros
+
+
+ Canales de televisión
+
+ Todos
+ Disney Channel
+ Cartoon Network
+ Nickelodeon
+ Discovery Kids
+ Público dirigido
+
+ Todos
+ Niños
+ Niños y adolescentes
+ Transmisión
+
+ Todos
+ En curso
+ Finalizada
+ Orden alfabético
+
+ Seleccionar
+ A - Z
+ Z - A
+ Limpiar
+
+
+
+ `;
+
+ const ulStatistics = `
+ Disney Channel: ${computeStats(data)["Disney Channel"]}
+ Cartoon Network: ${computeStats(data)["Cartoon Network"]}
+ Discovery Kids: ${computeStats(data)["Discovery Kids"]}
+ Nickelodeon: ${computeStats(data)["Nickelodeon"]}
+
+ `;
+
+ const sidebarHtml = document.createElement("section");
+ sidebarHtml.innerHTML = `
+ `;
+
+ const cards = createCards(data);
+ const containerCards = document.createElement("section");
+ containerCards.setAttribute("id", "containerCards");
+ containerCards.appendChild(cards);
+
+ //container.appendChild(containerHeader);
+ container.appendChild(homeHeader);
+ container.appendChild(buttonToggle);
+ container.appendChild(sidebarHtml);
+ container.insertAdjacentElement("beforeend", containerCards);
+ container.appendChild(footer);
+
+ const scriptPage = document.getElementById("pageScript")
+
+ scriptPage.remove()
+
+
+ const script = document.createElement("script");
+ script.type = 'module';
+ script.src = "./viewsComponents/homeView/mainHome.js";
+ script.id = "pageScript"
+ document.body.appendChild(script);
+
+ return container;
+};
+
+export default home;
diff --git a/src/viewsComponents/homeView/mainHome.js b/src/viewsComponents/homeView/mainHome.js
new file mode 100644
index 00000000..04e52355
--- /dev/null
+++ b/src/viewsComponents/homeView/mainHome.js
@@ -0,0 +1,126 @@
+import { filterData, sortData } from "../../lib/dataFunctions.js";
+import data from "../../data/dataset.js";
+import { createCards } from "./createCards.js";
+import { renderInView } from "../../lib/dataFunctions.js";
+import { navigateTo } from "../../router.js";
+
+
+addEventListeners();
+document.querySelector("#containerCards").addEventListener("click", (e) => {
+ const card = e.target.closest(".liClass");
+
+ if (card) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ const cartoonId = card.getAttribute("data-id");
+
+ const cartoonSelected = data.find((element) => element.id === cartoonId);
+
+ sessionStorage.setItem("cartoonSelected", JSON.stringify(cartoonSelected));
+
+ const dataItemValue = card.getAttribute("data-item");
+ //console.log("Clicked on chatGroup. Data-item value:", dataItemValue);
+ localStorage.setItem("dataItem", dataItemValue);
+
+ navigateTo("/api");
+ }
+});
+
+function addEventListeners() {
+ //console.log("Event listeners are active.");
+
+ //Variable que almacena los filtros seleccionados y crean un objeto a la vez.
+
+ const channel = document.querySelector("select[name='channel']");
+ const targetAudience = document.querySelector(
+ "select[name='targetAudience']"
+ );
+ const status = document.querySelector("select[name='status']");
+
+ channel.addEventListener("change", applyFilters);
+ targetAudience.addEventListener("change", applyFilters);
+ status.addEventListener("change", applyFilters);
+
+ const originalData = [...data];
+ let filteredData = [...data];
+
+ function applyFilters() {
+ //console.log("applyFilters function called");
+ // Create a copy of the original data to apply filters
+ filteredData = [...originalData];
+
+ // const selectedChannel = channel.value;
+ const selectedPublic = targetAudience.value;
+ const selectedTransmission = status.value;
+
+ if (channel.value !== "Todos") {
+ filteredData = filterData(filteredData, "channel", channel.value);
+ }
+
+ if (selectedPublic !== "Todos") {
+ filteredData = filterData(filteredData, "targetAudience", selectedPublic);
+ }
+
+ if (selectedTransmission !== "Todos") {
+ filteredData = filterData(filteredData, "status", selectedTransmission);
+ }
+ //console.log(
+ //"🚀 ~ file: mainHome.js:54 ~ applyFilters ~ filteredData:",
+ //filteredData
+ //);
+
+ // Display the filtered data in the HTML.
+ const filteredCards = createCards(filteredData);
+ renderInView(filteredCards, "containerCards");
+ }
+
+ const sort = document.querySelector("select[data-testid='select-sort']");
+ sort.addEventListener("change", (event) => {
+ const selectedSort = event.target.value;
+ if (selectedSort !== "Seleccionar") {
+ const sortedData = sortData(filteredData, "name", selectedSort);
+ // {"ant","bolivar"}
+ const sortedCards = createCards(sortedData);
+ renderInView(sortedCards, "containerCards");
+ }
+ });
+
+ const btnToggle = document.querySelector(".toggle-btn");
+ btnToggle.addEventListener("click", function () {
+ // {}
+ document.getElementById("sideBar").classList.toggle("active");
+ });
+
+ const buttonReset = document.querySelector(
+ "button[data-testid='button-clear']"
+ );
+
+ buttonReset.addEventListener("click", resetFiltersAndRenderItems);
+
+ function resetFiltersAndRenderItems() {
+ // console.log(
+ // "🚀 ~ file: index.js:131 ~ resetFiltersAndRenderItems ~ resetFiltersAndRenderItems:",
+ // resetFiltersAndRenderItems
+ // );
+
+ channel.selectedIndex = 0;
+ targetAudience.selectedIndex = 0;
+ status.selectedIndex = 0;
+ sort.selectedIndex = 0;
+ filteredData = data;
+
+ const resetedData = createCards(data);
+ renderInView(resetedData, "containerCards");
+ }
+}
+
+const chatGroupIcon = document.querySelector(".chatGroup");
+chatGroupIcon.addEventListener("click", handleChatGroupClick);
+
+function handleChatGroupClick(event) {
+ const dataItemValue = event.currentTarget.getAttribute("data-item");
+ // console.log("Clicked on chatGroup. Data-item value:", dataItemValue);
+ localStorage.setItem("dataItem", dataItemValue);
+ navigateTo("/api");
+}
diff --git a/src/viewsComponents/homeView/stylesHome.css b/src/viewsComponents/homeView/stylesHome.css
new file mode 100644
index 00000000..d9aea3ad
--- /dev/null
+++ b/src/viewsComponents/homeView/stylesHome.css
@@ -0,0 +1,393 @@
+ body {
+ background: rgb(238, 174, 202);
+ background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
+ }
+
+
+ ul {
+ list-style: none;
+ padding: 0;
+ }
+
+
+ #containerCards {
+ margin-top: 4%;
+ }
+
+ .liClass {
+ font-family: Arial, Helvetica, sans-serif;
+ box-sizing: border-box;
+ }
+
+
+ select {
+ color: black;
+ text-align: center;
+ width: 95%;
+ }
+
+
+ .toggle-btn {
+ width: 0px;
+ height: 0px;
+ left: 80%;
+ position: absolute;
+ top: 0;
+ padding: 0px;
+ color: transparent;
+ }
+
+ button {
+ border-radius: 7px;
+ border: 1px solid black;
+ height: 25px;
+ }
+
+ .chatGroup {
+ width: 65px;
+ height: 65px;
+ background-size: cover;
+ position: absolute;
+ margin: 0;
+ top: 0;
+ background-image: url(chat.png);
+ border: none;
+ margin-left: 30px;
+ cursor: pointer;
+ }
+
+ .iconChatGroup {
+ margin-left: 85%;
+ }
+
+ .panel {
+ font-size: medium;
+ line-height: 14px;
+ text-align: center;
+ color: black;
+ margin: 0;
+ width: 150px;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ margin-top: 35px;
+ }
+
+ .ulClass {
+ margin-left: 18%;
+ display: flex;
+ align-items: baseline;
+ flex-wrap: wrap;
+ list-style: none;
+ column-gap: 2%;
+ row-gap: 60px;
+ justify-content: center;
+ padding: 1%;
+ }
+
+ .img {
+
+ width: 100%;
+ height: 14em;
+ border: black solid;
+ border-radius: 20% 0;
+ }
+
+ .front dd {
+ margin-inline-start: auto;
+ }
+
+ .back dt {
+ font-size: small;
+ }
+
+ .card {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 18em;
+ height: 25em;
+ text-align: center;
+ }
+
+ .card section {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ backface-visibility: hidden;
+ transition: 1s;
+ }
+
+ .card .front {
+ width: 85%;
+ height: 100%;
+ background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
+ transform: perspective(500px) rotateY(0deg);
+ border: black solid;
+ border-radius: 30px;
+ padding: 15px;
+ font-size: medium;
+ text-align: center;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+ }
+
+
+ .card:hover .front {
+ transform: perspective(500px) rotateY(-15deg);
+ }
+
+
+
+
+ .card .front dl {
+ display: block;
+ margin: inherit;
+ width: 100%;
+ height: 100%;
+
+ }
+
+ .footer {
+ position: relative;
+ margin-left: 53%;
+ margin-bottom: 0%;
+ text-align: center;
+ width: 80px;
+ height: 0px;
+ }
+
+ /* Mediaquery Mobile */
+ @media (max-width: 480px) {
+ .header {
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 85px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+ align-items: center;
+ background-position-x: 50%;
+ background-size: 442px;
+ }
+
+ .chatGroup {
+ width: 65px;
+ height: 65px;
+ background-size: cover;
+ position: absolute;
+ margin: 0;
+ top: 0;
+ background-image: url(chat.png);
+ border: none;
+ margin-left: 80px;
+ cursor: pointer;
+ }
+
+
+ #sideBar {
+ top: 0;
+ position: fixed;
+ width: 13%;
+ height: 100%;
+ background-color: #6a9eda;
+
+ left: 0px;
+ align-items: center;
+ text-align: center;
+ background-color: rgba(255, 255, 255, 0.3);
+ box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ border: 1px solid #d0d0d0;
+ }
+
+ select {
+ color: black;
+ text-align: center;
+ width: 95%;
+ }
+
+ #sideBar .toggle-btn {
+ left: 36%;
+ top: 0px;
+ cursor: pointer;
+ }
+
+ #sideBar.active {
+ left: -36%;
+ }
+
+ .toggle-btn {
+ display: block;
+ width: 50px;
+ text-align: center;
+ font-size: 30px;
+ color: black;
+ position: fixed;
+ cursor: pointer;
+ z-index: 100;
+ }
+
+ #root {
+ /* width: calc(100% - 180px); */
+ margin: auto;
+ padding-top: 4em;
+ display: flex;
+ }
+
+ .totalChannels ul {
+
+ list-style: none;
+ text-align: initial;
+ padding-left: 10px;
+ }
+
+ .panel {
+ font-size: medium;
+ line-height: 16px;
+ text-align: center;
+ color: black;
+ margin: 0;
+ width: 150px;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ margin-top: 35px;
+ margin-left: 13px;
+ }
+ }
+
+ /* Mediaquery Tablets*/
+ @media (min-width: 481px) and (max-width:1023px) {
+
+ .header {
+ position: absolute;
+ top: 5px;
+ left: 0;
+ width: 100%;
+ height: 70px;
+ padding: 10px;
+ background-image: url(fun.png);
+ background-repeat: no-repeat;
+
+ background-size: 520px;
+ }
+
+ #sideBar {
+ position: fixed;
+ width: 18%;
+ height: 100%;
+ left: 0px;
+ top: 0;
+ text-align: center;
+ background-color: rgba(255, 255, 255, 0.3);
+ box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
+ border: 1px solid #d0d0d0;
+ }
+
+ select {
+ color: black;
+ text-align: center;
+ width: 95%;
+ }
+
+ #sideBar .toggle-btn {
+ left: 18%;
+ top: 0px;
+ cursor: pointer;
+ z-index: 100;
+ }
+
+ #sideBar.active {
+ left: -18%;
+ }
+
+ .toggle-btn {
+ text-align: center;
+ font-size: 20px;
+ color: black;
+ cursor: pointer;
+ z-index: 100;
+ left: 1%;
+ }
+
+ main {
+ padding-top: 90px;
+ }
+
+ .spam {
+ position: fixed;
+ font-size: 65px;
+ margin: 0px 0 0 40px;
+ }
+
+ #root {
+ width: calc(100% - 180px);
+ margin: auto;
+ padding-top: 4em;
+ display: flex;
+ justify-content: center;
+ }
+
+ .totalChannels ul {
+
+ list-style: none;
+ text-align: initial;
+ padding-left: 10px;
+ }
+
+ .ulClass {
+ margin-left: 0%;
+ column-gap: 2%;
+ }
+
+ .footer {
+ margin-left: 45%;
+ }
+
+
+
+ .panel {
+ font-size: larger;
+ }
+ }
+
+ /* Mediaquery Desktop*/
+ @media (min-width: 1024px) {
+
+
+ #sideBar {
+ top: 0;
+ position: fixed;
+ width: 13%;
+ height: 100%;
+ left: 0px;
+ text-align: center;
+ background-color: rgba(255, 255, 255, 0.3);
+ box-shadow: 3px 0 5px rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ border: 1px solid #d0d0d0;
+ }
+
+ select {
+ color: black;
+ text-align: center;
+ width: 95%;
+ }
+
+ #root {
+ width: calc(100% - 180px);
+ margin: auto;
+ padding-top: 4em;
+ display: flex;
+ justify-content: center;
+ }
+
+ .totalChannels ul {
+
+ list-style: none;
+ text-align: initial;
+ padding-left: 10px;
+ }
+ }
\ No newline at end of file
diff --git a/src/viewsComponents/singleChat/263115.png b/src/viewsComponents/singleChat/263115.png
new file mode 100644
index 00000000..a3e500c8
Binary files /dev/null and b/src/viewsComponents/singleChat/263115.png differ
diff --git a/src/viewsComponents/singleChat/chatView.js b/src/viewsComponents/singleChat/chatView.js
new file mode 100644
index 00000000..85dc3362
--- /dev/null
+++ b/src/viewsComponents/singleChat/chatView.js
@@ -0,0 +1,59 @@
+import { footer } from "../../staticsComponents/footer.js";
+// import { createCard } from "./mainSingleChat.js";
+
+export const singleChatView = () => {
+ const link = document.getElementById("pageStyles");
+ link.href = "./viewsComponents/singleChat/stylesChatView.css";
+
+
+
+ const container = document.createElement("div");
+ container.setAttribute("id", "chatView");
+
+ const singleHeader = document.createElement("header");
+ singleHeader.setAttribute("class", "header");
+ singleHeader.innerHTML = `
+
+
+ `;
+
+ const singleChatSection = document.createElement("section");
+ singleChatSection.setAttribute("id", "singleSection");
+ singleChatSection.innerHTML = `
+
+
+
+ `;
+
+ const inputText = document.createElement("section");
+ inputText.setAttribute("id", "inputText");
+ inputText.innerHTML = `
+ Enviar
+ `;
+
+ container.appendChild(singleHeader);
+ container.appendChild(singleChatSection);
+ container.appendChild(inputText);
+ document.body.appendChild(container);
+ document.body.appendChild(footer);
+
+ const scriptPage = document.getElementById("pageScript")
+
+ scriptPage.remove()
+
+ const script = document.createElement("script");
+ script.src = "./viewsComponents/singleChat/mainSingleChat.js";
+ script.type = 'module';
+ script.id = "pageScript"
+ document.body.appendChild(script);
+
+
+ return container;
+};
diff --git a/src/viewsComponents/singleChat/fun.png b/src/viewsComponents/singleChat/fun.png
new file mode 100644
index 00000000..306685fa
Binary files /dev/null and b/src/viewsComponents/singleChat/fun.png differ
diff --git a/src/viewsComponents/singleChat/mainSingleChat.js b/src/viewsComponents/singleChat/mainSingleChat.js
new file mode 100644
index 00000000..52640102
--- /dev/null
+++ b/src/viewsComponents/singleChat/mainSingleChat.js
@@ -0,0 +1,86 @@
+import { createCard } from "../homeView/createCards.js";
+import { renderInView } from "../../lib/dataFunctions.js";
+import { singleChatResponse } from "../../lib/Chat.Api.js";
+import { navigateTo } from "../../router.js";
+
+console.log("Se esta enderizao")
+
+//1 Traer la info de la card seleccionada de la session storage
+//2 Convertir toda la cadena de texto de la card seleccionada en un objeto
+const selectedCard = JSON.parse(sessionStorage.getItem("cartoonSelected"));
+
+//3 Crear la tarjeta con la info del objeto
+const createdCard = createCard(selectedCard);
+
+//4 Renderizar la tarjeta(elemento)
+renderInView(createdCard, "cardInfo");
+
+const apiKey = localStorage.getItem("apiKey");
+
+if (!apiKey) {
+ // Solo redirigir si no hay una API key
+ navigateTo("/api");
+} else {
+ // Manejar la interacción por mensajes
+ const interactionWithIa = document.getElementById("button");
+ interactionWithIa.addEventListener("click", sendMessage);
+}
+
+const interactionWithIa = document.getElementById("button");
+interactionWithIa.addEventListener("click", sendMessage); //
+
+//Evento KeyPress
+window.addEventListener("keydown", function (event) {
+ if (event.key === "Enter") {
+ sendMessage();
+ }
+});
+function sendMessage() {
+ const mainContainer = document.querySelector(".singleChat");
+ const messageInput = document.getElementById("text");
+ const message = messageInput.value;
+
+ addMessage("Usuari@:", message);
+ getAnswerIA("Personaje:", message);
+
+ messageInput.value = "";
+
+ mainContainer.scrollTop = mainContainer.scrollHeight;
+}
+function addMessage(sender, message) {
+ const mainContainer = document.querySelector(".singleChat");
+ const newMessage = document.createElement("section");
+ newMessage.setAttribute("class", "messageUser");
+ newMessage.innerHTML = `${sender}
${message}`;
+ mainContainer.appendChild(newMessage);
+}
+
+function getAnswerIA(message) {
+ singleChatResponse(apiKey, selectedCard, message)
+ .then((response) => {
+ const mainContainer = document.querySelector(".singleChat");
+ const messageIA = document.createElement("section");
+ messageIA.setAttribute("class", "messageIa");
+
+ if (response.success) {
+ messageIA.innerHTML = `Personaje:
${response.content}`;
+ } else {
+ messageIA.innerHTML = `Personaje:
${response.error}`;
+ }
+
+ // Agregar el mensaje completo al contenedor principal
+ mainContainer.appendChild(messageIA);
+
+ // Hacer scroll hacia abajo para mostrar el último mensaje
+ mainContainer.scrollTop = mainContainer.scrollHeight;
+ })
+ .catch((error) => {
+ console.error("Error:", error);
+ });
+}
+// .catch((error) => {
+// console.error("Error de red al obtener respuesta de la IA", error);
+// messageIA.innerHTML = `${sender}
Error de red al obtener respuesta de la IA`;
+// mainContainer.appendChild(messageIA);
+// mainContainer.scrollTop = mainContainer.scrollHeight;
+// });
diff --git a/src/viewsComponents/singleChat/stylesChatView.css b/src/viewsComponents/singleChat/stylesChatView.css
new file mode 100644
index 00000000..d2fbdab2
--- /dev/null
+++ b/src/viewsComponents/singleChat/stylesChatView.css
@@ -0,0 +1,377 @@
+body {
+ background: rgb(238,174,202);
+ background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
+}
+
+
+i {
+ width: 70px;
+ height: 70px;
+ background-size: cover;
+ position: absolute;
+ left: 89%;
+ margin: 0;
+ top: 0;
+ background-image: url(263115.png);
+}
+
+.main{
+ position: fixed;
+ left: 10px;
+ right: 0;
+ top: 7%;
+}
+#singleSection{
+ display: flex;
+ margin-top: 5%;
+ margin-left: 10%;
+ margin-bottom: 3%;
+ width: 85%;
+ height: 400px;
+ justify-content: center;
+}
+
+li{
+ list-style-type: none;
+}
+.img {
+
+ width: 100%;
+ height: 14em;
+ border: black solid;
+ border-radius: 20% 0;
+}
+
+.front dd {
+ margin-inline-start: auto;
+}
+
+
+
+.card {
+ position:relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 19em;
+ height: 26em;
+ text-align: center;
+ margin-top:5%;
+}
+
+.card section{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ backface-visibility: hidden;
+ transition: 1s;
+}
+
+.card .front {
+ width: 70%;
+ height: 85%;
+ background: rgba(254 209 229) ;
+ transform: perspective(500px) rotateY(0deg);
+ border: black solid;
+ border-radius: 30px;
+ padding: 15px;
+ font-size: small;
+ text-align: center;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+ justify-content: center;
+}
+
+
+
+.card:hover .front {
+ transform: perspective(500px) rotateY(-15deg);
+}
+
+.card .front dl {
+ display: block;
+ margin: inherit;
+ width: 100%;
+ height: 100%;
+}
+
+.p {
+ border-radius: 10%;
+ background-color: white;
+ border: solid black 1px;
+ margin: 5px;
+}
+.singleChat {
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ flex-direction: column;
+ display: flex;
+ overflow: scroll;
+ width: 61%;
+ margin: 0 65px;
+ overflow-y: auto;
+ background-color: rgba(255, 255, 255, 0.3);
+ border-radius: 40px;
+ padding: 12px;
+ scroll-behavior: smooth;
+ height: 75%;
+ font-size: small;
+ margin-top: 3%;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+p {
+ margin:2px;
+}
+
+#inputText {
+ display: flex;
+ margin-top: -5%;
+ margin-left: 3%;
+
+}
+
+#questions {
+ width: 34%;
+ text-align: justify;
+ margin-left: 38%;
+
+}
+#button {
+ font-size: large;
+ width: 10%;
+ height: 50px;
+ margin-top: 2%;
+ margin-left: 3%;
+ border-radius: 10%;
+ background-color: rgba(238,174,202,1);
+}
+
+#text {
+ text-align: left;
+ border-radius: 30px;
+ width: 100%;
+ height: 25px;
+ font-size: small;
+ margin: 10px 0;
+}
+.footer {
+ position: relative;
+ bottom: 0;
+ left: 0px;
+ right: 0px;
+ text-align: center;
+}
+
+.messageIa {
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ border-radius: 25px 25px 25px 0;
+ background-color: #E3E4CB;
+ border: solid black 1px;
+ margin: 5px;
+ padding: 10px;
+ word-wrap: break-word;
+ align-self: start;
+}
+.messageUser {
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ border-radius: 25px 25px 0 25px;
+ background-color: white;
+ border: solid black 1px;
+ margin: 5px;
+ padding: 10px;
+ align-self: end;
+ text-align: end;
+}
+
+p {
+ margin:2px;
+}
+
+
+
+ /* Mediaquery Mobile */
+ @media ( max-width: 480px) {
+ .singleChat {
+ width: 100%;
+ margin: 0;
+ }
+ .header {
+ height: auto;
+ background-position: center;
+ background-size: 50%;
+ }
+
+ i {
+ background-size: 50%;
+ left: 85%;
+ background-repeat: no-repeat;
+ width: 12%;
+ height: 100%;
+ background-position: center;
+ }
+
+ #singleSection {
+ margin-top: 4em;
+ margin-left: 0%;
+ width: 100%;
+ height: 22em;
+ }
+
+ .singleChat {
+ width: 65%;
+ margin:0;
+ height: 90%;
+ }
+
+ #cardInfo {
+ width: 45%;
+ }
+
+ .card {
+ width: 100%;
+ height: 100%;
+ margin-top: 0;
+ }
+
+ .card .front {
+ width: 80%;
+ height: 85%;
+ padding: 5%;
+ border-radius: 30px;
+ }
+
+ li {
+ height: 100%;
+ }
+
+ .card .front dl {
+ height: 70%;
+ margin-top: -6em;
+ font-size: xx-small;
+ }
+
+ figure {
+ width: 50%;
+ margin: 1%;
+ margin-left: 16%;
+ }
+
+ .img {
+ width: 130%;
+ height: 100%;
+ }
+
+ .card .front dl {
+ margin-top:-2em;
+ font-size: smaller;
+ }
+
+ #inputText {
+ margin: 2%;
+ }
+
+ #questions {
+ width: 100%;
+ margin-left: 0;
+ }
+
+ #text {
+ width: 80%;
+ }
+
+ #button {
+ width: 30%;
+ margin-left: 0;
+ }
+
+ }
+
+ @media ( min-width: 481px) and (max-width:1024px) {
+ i {
+ background-size: 73%;
+ width: 10%;
+ height: 4em;
+ background-position: center;
+ left: 80%;
+ background-repeat: no-repeat;
+ }
+
+ .header {
+ height: 3em;
+ background-size: 40%;
+ background-position: center;
+ }
+
+ #singleSection {
+ margin-top: 4em;
+ margin-left: 0%;
+ width: 100%;
+ height: 22em;
+ margin-top:5em;
+ }
+
+ .singleChat {
+ width: 65%;
+ margin:0;
+ height: 90%;
+ }
+
+ #cardInfo {
+ width: 35%;
+ }
+
+ .card {
+ width: 100%;
+ height: 100%;
+ margin-top: 0;
+ }
+
+ .card .front {
+ width: 60%;
+ height: 85%;
+ padding: 5%;
+ }
+
+ li {
+ height: 100%;
+ }
+
+ .card .front dl {
+ height: 70%;
+ }
+
+ figure {
+ width: 50%;
+ margin: 1%;
+ margin-left: 16%;
+ }
+
+ .img {
+ width: 130%;
+ height: 100%;
+ }
+
+ .card .front dl {
+ margin-top:-2em;
+ font-size: smaller;
+ }
+
+ #inputText {
+ margin: 2%;
+ }
+
+ #questions {
+ width: 100%;
+ margin-left: 0;
+ }
+
+ #text {
+ width: 80%;
+ }
+
+ #button {
+ width: 30%;
+ margin-left: 0;
+ }
+ }
\ No newline at end of file
diff --git a/test/dataFunctions.spec.js b/test/dataFunctions.spec.js
new file mode 100644
index 00000000..52d2efbc
--- /dev/null
+++ b/test/dataFunctions.spec.js
@@ -0,0 +1,97 @@
+import {
+ computeStats,
+ filterData,
+ renderInView,
+} from "../src/lib/dataFunctions.js";
+import data from "../src/data/dataset.js";
+import { sortData } from "../src/lib/dataFunctions.js";
+import { apiView } from "../src/viewsComponents/apiView/apiView.js";
+
+describe("filtro por canales", () => {
+ it("Debe filtrar por programas de Disney Channel", () => {
+ const filterDisney = filterData(data, "channel", "Disney Channel");
+ expect(filterDisney.length).toStrictEqual(6);
+ });
+
+ it("Debe filtrar por programas de Cartoon", () => {
+ const filterCartoon = filterData(data, "channel", "Cartoon Network");
+ expect(filterCartoon.length).toStrictEqual(6);
+ });
+
+ it("Debe filtrar por programas de Discovery", () => {
+ const filterDiscovery = filterData(data, "channel", "Discovery Kids");
+ expect(filterDiscovery.length).toStrictEqual(6);
+ });
+
+ it("Debe filtrar por programas de Nickelodeon", () => {
+ const filterNickelodeon = filterData(data, "channel", "Nickelodeon");
+ expect(filterNickelodeon.length).toStrictEqual(6);
+ });
+});
+
+describe("filtro por público dirigido", () => {
+ it("Debe filtrar por programas para niños", () => {
+ const filterKids = filterData(data, "targetAudience", "Niños");
+ expect(filterKids.length).toBe(7);
+ });
+ it("Debe filtrar por programas para niños y adolescentes", () => {
+ const filterTeenagers = filterData(
+ data,
+ "targetAudience",
+ "Niños y adolescentes"
+ );
+ expect(filterTeenagers.length).toBe(17);
+ });
+});
+
+describe("Ordenamiento", () => {
+ it("Ordenamiento ascendente", () => {
+ const ascendente = sortData(data, "name", "asc");
+ expect(ascendente[0]).toStrictEqual(data[12]);
+ });
+ it("Ordenamiento descendente", () => {
+ const descendente = sortData(data, "name", "desc");
+ expect(descendente[0]).toStrictEqual(data[3]);
+ });
+});
+
+describe("Estadistica Global", () => {
+ it("Estadistica General por Canales", () => {
+ const channelStatistics = {
+ "Cartoon Network": 6,
+ "Discovery Kids": 6,
+ "Disney Channel": 6,
+ Nickelodeon: 6,
+ };
+ const globalStatictic = computeStats(data);
+ expect(globalStatictic).toStrictEqual(channelStatistics);
+ });
+});
+
+describe("Muestra el id de manera correcta", () => {
+ it("Id por programa", () => {
+ const fakeId = "fake-id";
+ document.body.innerHTML = `
`;
+ renderInView(document.createElement("div"), fakeId);
+ expect(document.getElementById(fakeId)).not.toBeNull();
+ });
+});
+
+/*
+const {apiView} = require("../src/viewsComponents/apiView/apiView.js")
+describe("La vista apiView contiene un footer", () => {
+ it ("Contiene un footer" , () => {
+ document.body.innerHTML = apiView();
+ const footerInApiView = document.querySelector('.footer');
+ expect(footerInApiView).not.toBeNull();
+ })
+}) */
+
+describe("la vista apiView contiene un footer", () => {
+ it("apiView renderiza con el componente footer", () => {
+ document.body.innerHTML = "";
+ document.body.appendChild(apiView());
+ const footerElement = document.querySelector(".footer");
+ expect(footerElement).not.toBeNull();
+ });
+});
diff --git a/test/example.spec.js b/test/example.spec.js
new file mode 100644
index 00000000..185292b7
--- /dev/null
+++ b/test/example.spec.js
@@ -0,0 +1,68 @@
+import { singleChatResponse } from "../src/lib/Chat.Api.js";
+
+const cartoon = "Gravity Falls";
+const OpenIAResponse = jest.fn();
+
+global.fetch = jest.fn(() => Promise.resolve({ json: OpenIAResponse }));
+
+// jest.setTimeout(15000);
+
+describe("Endpoint de OpenIA", () => {
+ it("La API es llamada con los datos adecuados", () => {
+ OpenIAResponse.mockResolvedValueOnce({ choices: [{ message: "foo" }] });
+
+ const messages = [{ role: "user", content: "foo" }];
+
+
+ return new Promise((resolve) => {
+ singleChatResponse("1234", {name: cartoon}, messages).then(() => {
+
+ expect(fetch).toBeCalledWith(
+ "https://api.openai.com/v1/chat/completions",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer 1234`,
+ },
+ body: JSON.stringify({
+ model: "gpt-3.5-turbo",
+ messages: [
+ {
+ role: "system",
+ content: `Tu eres el personaje principal de la caricatura ${cartoon}`,
+ },
+ { role: "user", content: messages },
+ ],
+ }),
+ }
+ );
+
+ resolve();
+ });
+ });
+ });
+
+ it("El endpoint responde de manera correcta", () => {
+ const response = {
+ choices: [
+ {
+ message: {
+ role: "assistant",
+ content: "¡Hola!",
+ },
+ },
+ ],
+ };
+
+ OpenIAResponse.mockResolvedValueOnce(response);
+
+ // Without using async/await, handle the Promise using .then()
+ return singleChatResponse("1234", cartoon, [
+ { role: "user", content: "foo" },
+ ]).then((resolved) => {
+ expect(resolved.success).toBe(true);
+ expect(resolved.content).toEqual(response.choices[0].message.content);
+ });
+ });
+});