diff --git a/README.md b/README.md
index 4d88151c..042d337a 100644
--- a/README.md
+++ b/README.md
@@ -9,43 +9,66 @@
* [5. Consideraciones técnicas](#5-consideraciones-técnicas)
* [6. Hitos](#6-hitos)
* [7. Criterios de aceptación mínimos del proyecto](#7-criterios-de-aceptación-mínimos-del-proyecto)
-* [8. Objetivos de aprendizaje](#8-objetivos-de-aprendizaje)
-* [9. Pistas, tips y lecturas complementarias](#9-pistas-tips-y-lecturas-complementarias)
-* [10. Consideraciones para pedir tu Project Feedback](#10-consideraciones-para-pedir-tu-project-feedback)
+* [8. Consideraciones para pedir tu Project Feedback](#10-consideraciones-para-pedir-tu-project-feedback)
***
## 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.
+Los desarrollos tecnológicos hoy nos ofrecen la posibilidad de experimentar
+la vida de una manera en la que quizá cincuenta o treinta años atrás
+no hubiéramos podidio imaginar.
-¿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 este proyecto se aprovecha este avance, especialmente en lo relacionado
+con la Inteligencia Artificial, para conectar, por lo menos simbólicamente,
+con las escritoras más famosas del mundo.
## 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
+En este proyecto la aplicación desarrollada en Dataverse se amplió y se desarrolló una
+[Single Page Application (SPA)](https://es.wikipedia.org/wiki/Single-page_application).
+Esta página conserva las funcionalidades de visualizar, filtrar, ordenar y
+calcular alguna estadística y se le adiciona 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
+Este proyecto se deiseñó e implementó en diferentes etapas y a partir de
+tres historias de usuarias que se relacionan a continuación:
+
+- **Usuaria 1:** Como usuaria, deseo explorar la lista de escritoras disponibles,
+incluyendo aquellas que están vivas y las que ya no están.
+Adicionalmente, deseo conocer aspectos de su biografía.
+
+- **Usuaria 2:** Como usuaria me gustaría filtrar la información de las escritoras por filtros
+como nacionalidad y género literario. Además, quiero poder organizarlas por orden alfabético.
+
+- **Conversación Simulada:**
+ - Como usuario, espero poder mantener una conversación fluida
+ y realista con la escritora seleccionada mediante el uso de inteligencia artificial.
+ - La conversación debe abordar temas relacionados con la escritura,
+ la inspiración, el proceso creativo y otros aspectos relevantes.
+
+- **Personalización de la Conversación:**
+ - Como usuario, quiero tener la opción de personalizar la dirección de la conversación,
+ eligiendo temas específicos o solicitando orientación en áreas particulares.
+
+- **Usuaria 3:** Como usuaria, quiero poder seleccionar una escritora específica para entablar una conversación simulada.
+
+A continuación se muestra graficamente el prototipo desarrollado para las vistas del chat:
+
+
+
` 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.
+El punto de partida para tu SPA sera el archivo `src/index.js`.
### `src/router.js`
-En este archivo vas a manejar el enrutamiento de tu aplicación. Es un archivo
-que debes crearlo por tu cuenta.
+En este archivo se maneja el enrutamiento de tu aplicación.
### `src/style.css`
-Es un archivo que debes crearlo por tu cuenta para agregar los estilos que
-necesites para tu aplicación.
+Se almacenan los estilos de la aplicación.
### `src/test`
-Esta carpeta contiene los tests de tus funciones y componentes. Por ejemplo
-los tests de dataFunctions deben estar aquí.
+Esta carpeta contiene los tests de funciones y componentes.
## 6. Hitos
-Para resolver un problema,
-es importante comprenderlo en profundidad.
-Una forma de hacerlo es descomponerlo en problemas más pequeños.
-Esto nos ayudará a identificar las causas del problema y
-a desarrollar soluciones más efectivas.
-
-En este proyecto, te sugerimos que trabajes por hitos.
-Esto te permitirá enfocarte en un problema a la vez y
-hacer un seguimiento de tu progreso.
-A continuación, te presentamos un cronograma de hitos que
-te puede ayudar a organizar tu trabajo.
+A continuación se relacionan los hitos y objetivos de aprendizaje con los que
+trabajamos en este proyecto.
* [Hito 1](./docs/01-milestone.md)
* [Hito 2](./docs/02-milestone.md)
@@ -286,526 +215,59 @@ te puede ayudar a organizar tu trabajo.
## 7. Criterios de aceptación mínimos del proyecto
-Además de las funcionalidades que definimos en la sección de
-[Funcionalidades](#4-funcionalidades), tu proyecto debe cumplir con los
-siguientes requisitos:
+Este proyecto cumple con los siguientes ítems:
### Definición del producto
-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.
+En el archivo `README.md` se comenta cuál fue
+el proceso de diseño y el problema que resuelvió.
### Historias de usuaria
-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.
-
-Usa tus historias de usuaria para planificar tus sprints dividiendo
-cada historia en tareas.
-
-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).
+Se relacionan las historias de usuarias y su impacto en
+el diseño del pryecto.
### Diseño de la Interfaz de Usuaria
-#### Prototipo de baja fidelidad
-
-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`.
-
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
-
-#### Prototipo de alta fidelidad
-
-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.
-
-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_.
-
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
+Se presentan los bocetos de diseño del proyecto.
### 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.
-
-### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)
-
-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.
+Se hacen testeos de usabilidad.
### 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).
-
-## 8. 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
-
- * [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
-
- * [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
-
- * [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
-
- * [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
-
- * [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
-
- * [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
-
- * [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)
-
Enviar
+ Cerrar
+ Limpiar
+ `;
+ modalApiKey.appendChild(modalContent);
+
+ const buttonSendChat = modalApiKey.querySelector("#button-send");
+ const buttonBackHome = modalApiKey.querySelector("#button-back-home");
+
+ buttonSendChat.addEventListener("click", () => {
+ //console.log("enviar funciona");
+ //const nameUser = modalApiKey.querySelector("#nameUser").value;
+ const apiKeyValue = modalApiKey.querySelector("#ApiKey").value;
+ //console.log(ApiKey)
+
+ if (apiKeyValue === "" || apiKeyValue.length <= 50 || apiKeyValue.length >= 55) {
+ alert("Ingrese una clave válida");
+ return;
+ }
+
+ setApiKey(apiKeyValue);
+ navigateTo(redirectUrl);
+ modalApiKey.style.display = 'none';
+ modalApiKey.close();
+ }
+ );
+
+ buttonBackHome.addEventListener("click", () => {
+ //console.log ("regresar funcionando");
+ modalApiKey.close();
+ modalApiKey.style.display = 'none';
+ });
+
+ const buttonClear = modalApiKey.querySelector("#button-clear")
+ //console.log("funciona");
+ buttonClear.addEventListener("click", () => {
+ removeApiKey();
+ modalApiKey.querySelector("#ApiKey").value = '';
+ })
+
+ return modalApiKey;
+};
\ No newline at end of file
diff --git a/src/Components/ButtonChat.js b/src/Components/ButtonChat.js
new file mode 100644
index 00000000..426b24a7
--- /dev/null
+++ b/src/Components/ButtonChat.js
@@ -0,0 +1,17 @@
+import { ApiModal } from "./ApiModal.js";
+
+export const createBtnChat = () => {
+ const btnChat = document.createElement("button");
+ btnChat.id = "button-chat";
+ btnChat.className = "button-chat";
+ btnChat.textContent = "CHAT";
+ btnChat.addEventListener("click", () => {
+ //console.log("funciona");
+ const modalApiKey = ApiModal();
+ document.body.appendChild(modalApiKey);
+ modalApiKey.showModal();
+ });
+ return btnChat;
+};
+
+
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
new file mode 100644
index 00000000..aab41681
--- /dev/null
+++ b/src/Components/Footer.js
@@ -0,0 +1,9 @@
+export const footer = () => {
+ const footer = document.createElement("footer");
+ footer.id = "footer"
+ footer.innerHTML = `
+ Desarrolladoras: Raiza Gatica y Elizabeth Patiño/ Laboratoria
+ `;
+
+ return footer;
+};
\ No newline at end of file
diff --git a/src/Components/Header.js b/src/Components/Header.js
new file mode 100644
index 00000000..d7b10f6d
--- /dev/null
+++ b/src/Components/Header.js
@@ -0,0 +1,11 @@
+export const header = () => {
+ const header = document.createElement("header");
+ header.id = "header"
+ header.innerHTML = `
+ EL MUNDO A TRAVÉS DE GRANDES ESCRITORAS
+ `;
+
+ return header;
+};
+
diff --git a/src/Components/Individual.js b/src/Components/Individual.js
new file mode 100644
index 00000000..9e570b8f
--- /dev/null
+++ b/src/Components/Individual.js
@@ -0,0 +1,119 @@
+import { communicateWithOpenAI } from "./../lib/openAIApi.js";
+import data from "../data/dataset.js";
+import { navigateTo } from "../router.js";
+
+export const individual = (element) => {
+ // console.log(element);
+ // Filtrar datos basados en el elemento pasado como argumento
+ const writer = data.find(item => item.id === element.id);
+ //console.log(writer);
+
+ const individualView = document.createElement('div');
+ const individualChat = document.createElement("div");
+
+ individualView.appendChild(individualChat);
+
+ const genMess = document.createElement("div");
+ genMess.className = "genMess";
+
+ individualChat.innerHTML = `
+
+
+
+
+
+
+
${writer.name}
+
+
+
${writer.description}
+
+
+
+
+
+ Chat grupal
+ Regresar
+
+ `;
+
+ const chat = individualChat.querySelector(".chatI");
+ chat.appendChild(genMess);
+
+ const chatInput = document.createElement("div");
+ chatInput.className = "chat-inputI";
+ chatInput.innerHTML = `
+
+ Enviar
+ `;
+ chat.appendChild(chatInput);
+
+ function messageUser() {
+ const newMess = individualChat.querySelector("#userInputI");
+ const newMessTxt = newMess.value;
+
+ if (newMessTxt !== "") {
+ const userNameContainer = document.createElement("div");
+ userNameContainer.className = "userNameContainer";
+ const userName = document.createElement("div");
+ userName.className = "userNameI";
+ userName.innerHTML = "Usuaria:";
+ userNameContainer.appendChild(userName);
+ genMess.appendChild(userName);
+
+ const containernewMess = document.createElement("div");
+ containernewMess.className = "messUserI";
+ const viewMess = document.createElement("p");
+ viewMess.className = "messageI";
+ viewMess.innerHTML = newMessTxt;
+ containernewMess.appendChild(viewMess);
+ genMess.appendChild(containernewMess);
+ newMess.value = "";
+
+ //llamada a OpenAi
+ communicateWithOpenAI(newMessTxt, writer)
+ .then(response => {
+ const nameSystem = document.createElement("div");
+ nameSystem.className = "nameSystem";
+ nameSystem.innerHTML = `${writer.name}:`;
+
+ const systemMessage = document.createElement("div");
+ systemMessage.className = "systemMessage";
+ systemMessage.innerHTML = response.choices[0].message.content;
+ genMess.appendChild(nameSystem);
+ genMess.appendChild(systemMessage);
+ })
+ /* .catch(error => {
+ console.error("error al comunicarse con la IA", error)
+ }); */
+ }
+ }
+
+ const SendButtomChat = chatInput.querySelector("#SendButtomChatI");
+ SendButtomChat.addEventListener("click", () => {
+ messageUser();
+ //console.log("funciona");
+ })
+
+ const userInput = chatInput.querySelector("#userInputI");
+ userInput.addEventListener("keydown", (event) => {
+ if (event.key === 'Enter') {
+ messageUser();
+ }
+ })
+
+ const buttonBackHomeChat = individualChat.querySelector("#buttonBackHomeChatI");
+ buttonBackHomeChat.addEventListener("click", () => {
+ window.location.href = "index.html";
+ });
+
+ const buttonchatGrupal = individualChat.querySelector("#buttonchatGrupalI");
+ buttonchatGrupal.addEventListener("click", () => {
+ navigateTo('/group');
+ })
+
+ return individualView;
+}
+
diff --git a/src/Components/NotFound.js b/src/Components/NotFound.js
new file mode 100644
index 00000000..40f722ad
--- /dev/null
+++ b/src/Components/NotFound.js
@@ -0,0 +1,16 @@
+export const notFound = () => {
+ const notFoundElement = document.createElement("div");
+ notFoundElement.id = "notFound";
+ notFoundElement.innerHTML = `
+ NOT FOUND
+ Regresar ${element.name} ${element.shortDescription} Nacionalidad: ${element.facts.countryNacimiento}
+ Género literario: ${element.facts.mainField}
+
+
+
+
+ `;
+
+ const dataList = container.querySelector("#cardsContainer");
+ let result = data;
+ dataList.appendChild(renderItems(data));
+
+ // Selecciona los elementos select
+ const filterSelectors = [
+ { selector: '[data-testid="filter-type"]', property: "mainField" },
+ { selector: '[data-testid="filter-data"]', property: "countryNacimiento" },
+ ];
+
+ let sortName;// Declaracion de sortName
+
+ // Agrega EventListener para los select
+ filterSelectors.forEach(({ selector }) => {
+ const selectElement = container.querySelector(selector);
+ selectElement.addEventListener("change", () => applyFilters());
+ });
+
+ // EventListener para el botón de limpiar
+ const btnClear = container.querySelector("#button-clearM");
+ btnClear.addEventListener("click", function () {
+ // Limpia los filtros y renderiza los datos originales
+ resetFilters();
+ renderItems(data);
+ });
+
+ // Función para restablecer los filtros
+ function resetFilters() {// Recorre los selectores y establece sus valores en vacío
+ filterSelectors.forEach(({ selector }) => {
+ container.querySelector(selector).value = "";
+ });
+ sortName.value = "none";
+ result = sortData(data, "name", "asc");
+ renderDataList();
+ }
+
+ // Función para aplicar los filtros
+ function applyFilters() {
+ const filters = filterSelectors.map(({ selector, property }) => ({
+ property,
+ value: container.querySelector(selector).value,
+ }));
+
+ // Realiza el filtrado de datos
+ let filteredData = [...data];
+ filters.forEach(({ property, value }) => {
+ if (value) {
+ filteredData = filterData(filteredData, property, value);
+ }
+ });
+
+ // Limpia la lista antes de renderizar
+ dataList.innerHTML = "";
+
+ // Renderiza los datos filtrados
+ dataList.appendChild(renderItems(filteredData));
+
+ // Realiza el ordenamiento de datos
+ sortName = container.querySelector('[data-testid="select-sort"]');
+ const sortOrder = sortName.value;
+ result = sortData(filteredData, { sortBy: "name", sortOrder });
+
+ // Renderiza los datos filtrados y ordenados
+ renderDataList();
+ }
+
+ // Ordenamiento descendente y ascendente
+ sortName = container.querySelector('[data-testid="select-sort"]');
+ sortName.addEventListener("change", () => {
+ applyFilters(); // Actualiza la lista al cambiar el ordenamiento
+ });
+
+ function renderDataList() { // Función para renderizar la lista con los datos actuales
+ dataList.innerHTML = "";
+ const resultList = renderItems(result);
+ dataList.appendChild(resultList);
+ }
+
+ //Estadísticas
+ // EventListener para el botón de estadísticas
+ const btnStats = container.querySelector("#button-facts");
+ btnStats.addEventListener("click", function () {
+ //console.log('ok stats');
+ try {
+ const stats = computeStats(data);
+ renderStats(stats);
+ } catch (error) {
+ //console.error("Error al calcular estadísticas:", error);
+ }
+ });
+
+ // Función para renderizar las estadísticas en el contenedor
+ function renderStats(stats) {
+ const statsContainer = container.querySelector('#stats-container');
+
+ // Verificar si el contenedor de estadísticas existe
+ if (statsContainer) {
+ // Limpiar contenido anterior
+ statsContainer.innerHTML = '';
+ // Mostrar las estadísticas en el contenedor
+ statsContainer.appendChild(renderStatsElement(stats));
+ }
+
+ // Función para renderizar las estadísticas como elementos HTML
+ function renderStatsElement(stats) {
+ const statsElement = document.createElement('div');
+ statsElement.innerHTML = 'ESTADÍSTICAS ';
+ // Agregar estadísticas de países
+ statsElement.appendChild(renderStatsCategory('📶 Cantidad de escritoras por nacionalidad', stats.countries));
+ // Agregar estadísticas de géneros
+ statsElement.appendChild(renderStatsCategory('📶 Cantidad de escritoras por género literario', stats.genres));
+ return statsElement; // Agrega esta línea para devolver el elemento
+ }
+
+ // Función para renderizar estadísticas de una categoría específica
+ function renderStatsCategory(categoryName, categoryStats) {
+ const categoryElement = document.createElement('div');
+ categoryElement.innerHTML = `${categoryName}: `;
+
+ // Iterar sobre las estadísticas y agregarlas al elemento
+ for (const item in categoryStats) {
+ const itemStats = categoryStats[item];
+ const itemElement = document.createElement('div');
+ itemElement.textContent = `${item}: ${itemStats}`;
+ categoryElement.appendChild(itemElement);
+ }
+ return categoryElement; // Agrega esta línea para devolver el elemento
+ }
+
+ // Abrir pantalla emergente
+ const statsDialog = container.querySelector('#statsDialog');
+ statsDialog.showModal();
+
+ // Cierra el modal
+ const closeButton = document.getElementById('button-close');
+ closeButton.addEventListener('click', () => {
+ closeStatsDialog();
+ });
+
+ statsDialog.addEventListener('click', (event) => {
+ if (event.target === statsDialog) {
+ closeStatsDialog();
+ }
+ });
+
+ // Función para cerrar el modal de estadísticas
+ function closeStatsDialog() {
+ statsDialog.close();
+ }
+ }
+
+ /////MODAL API KEY/////
+ const buttonChatGroup = container.querySelector('#button-chatGroup');
+ buttonChatGroup.addEventListener("click", () => {
+ const redirectUrl = `/group`;
+ const apiModal = ApiModal(redirectUrl);
+ document.body.appendChild(apiModal);
+ apiModal.showModal();
+ });
+
+ return container;
+};
\ No newline at end of file
diff --git a/src/data/dataset.js b/src/data/dataset.js
new file mode 100644
index 00000000..7ce74099
--- /dev/null
+++ b/src/data/dataset.js
@@ -0,0 +1,425 @@
+const data = [
+ {
+ "id": "001",
+ "name": "Jane Austen",
+ "shortDescription": "Escritora británica conocida por sus novelas románticas realistas.",
+ "description": "Jane Austen, destacada novelista británica del siglo XIX, es reconocida por explorar la condición de las mujeres y realizar agudas críticas sociales en sus obras. Entre sus novelas más famosas se encuentran 'Orgullo y prejuicio', 'Emma' y 'Sentido y sensibilidad'. Austen dejó un impacto duradero en la literatura inglesa gracias a su agudo ingenio y estilo literario distintivo, que capturan la sociedad de su tiempo. Su legado perdura a través de generaciones, y sus escritos continúan siendo apreciados por su profunda observación de la naturaleza humana y su aguda representación de la sociedad de la época",
+ "imageUrl": "https://i.postimg.cc/25MJ3ZZK/001-Jane-Austen.png",
+ "facts": {
+ "yearOfBirth": "1775",
+ "yearOfDeath": "1817",
+ "birthPlace": "Steventon, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBooks": "Orgullo y Prejuicio"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "002",
+ "name": "Amy Tan",
+ "shortDescription": "Escritora estadounidense conocida por sus obras sobre la experiencia china-americana.",
+ "description": "Amy Tan, nacida en Oakland, California, en 1952, es una reconocida escritora estadounidense de origen chino. Su obra más conocida, 'El club de la buena estrella', explora la compleja relación entre madres e hijas inmersas en la cultura china-americana. Tan, hábil narradora, ha abordado temas de identidad, familia y legado cultural en novelas como 'Hijas de la fortuna' y 'El valle del asombro'. Su capacidad para tejer historias con sensibilidad y empatía le ha valido el reconocimiento internacional, consolidándola como una destacada voz en la literatura contemporánea que celebra la diversidad cultural y la conexión humana.",
+ "imageUrl": "https://i.postimg.cc/FKdCtHBg/002-Amy-Tan.png",
+ "facts": {
+ "yearOfBirth": "1952",
+ "birthPlace": "Oakland, California, EE. UU.",
+ "countryNacimiento": "EE. UU.",
+ "mainField": "Literatura",
+ "famousBook": "Hijas de la suerte"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "003",
+ "name": "Virginia Woolf",
+ "shortDescription": "Escritora británica modernista, pionera en la técnica narrativa.",
+ "description": "Virginia Woolf (1882-1941), novelista y ensayista británica, es una de las figuras más influyentes del modernismo literario. Su obra, que incluye 'La señora Dalloway' y 'Al faro', destaca por su exploración psicológica y experimentación narrativa. Woolf, co-fundadora del grupo literario Bloomsbury, abordó temas como la condición de la mujer y la naturaleza efímera de la vida. Su prosa innovadora y su enfoque en la conciencia individual la han establecido como una pionera literaria. A pesar de los desafíos personales, su legado perdura, influyendo en generaciones de escritores y destacando su contribución duradera a la literatura moderna.",
+ "imageUrl": "https://i.postimg.cc/13zYHH0d/003-Virginia-Woolf.png",
+ "facts": {
+ "yearOfBirth": "1882",
+ "yearOfDeath": "1941",
+ "birthPlace": "Londres, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "La señora Dalloway"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "004",
+ "name": "Isabel Allende",
+ "shortDescription": "Escritora chilena conocida por su realismo mágico y sus novelas históricas.",
+ "description": "Isabel Allende es una destacada escritora cuya obra ha cautivado la atención mundial. Reconocida por su estilo de realismo mágico y sus narrativas históricas, algunas de sus obras más conocidas incluyen 'La casa de los espíritus' y 'Eva Luna'. Allende ha dejado una marca indeleble en la literatura contemporánea latina, tejiendo historias emotivas y complejas que abordan temas sociales y políticos. A lo largo de su carrera, ha recibido numerosos premios, destacando su contribución a la literatura latinoamericana y su dedicación a la justicia social.",
+ "imageUrl": "https://i.postimg.cc/X74PZ3r4/004-Isabel-Allende.png",
+ "facts": {
+ "yearOfBirth": "1942",
+ "birthPlace": "Lima, Perú",
+ "countryNacimiento": "Chile",
+ "mainField": "Literatura",
+ "famousBook": "La casa de los espíritus"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "005",
+ "name": "Charlotte Brontë",
+ "shortDescription": "Novelista británica, autora de la célebre obra 'Jane Eyre'.",
+ "description":
+ "Charlotte Brontë, eminente novelista británica del siglo XIX, alcanzó renombre con su obra maestra 'Jane Eyre'. Su escritura introspectiva y la penetrante exploración de la condición femenina en la sociedad victoriana la distinguen. Brontë, venerada figura literaria, dejó una huella imborrable en la literatura clásica. Su capacidad para plasmar emociones y desafiar convenciones sociales ha perdurado, consolidándola como una autora esencial. A través de 'Jane Eyre' y otras obras, Brontë continúa inspirando lectores y manteniendo viva su contribución inmortal al panorama literario británico del siglo XIX.",
+ "imageUrl": "https://i.postimg.cc/RZbpbHXZ/005-Charlotte-Bronte.png",
+ "facts": {
+ "yearOfBirth": "1816",
+ "yearOfDeath": "1855",
+ "birthPlace": "Thornton, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "Jane Eyre"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "006",
+ "name": "Agatha Christie",
+ "shortDescription": "Escritora británica, célebre por sus novelas de misterio y detectives.",
+ "description": "Agatha Christie, la célebre 'Reina del Crimen', fue una destacada escritora británica conocida por sus ingeniosas novelas de misterio. Con personajes icónicos como Hercule Poirot y Miss Marple, Christie se convirtió en una de las autoras más vendidas de todos los tiempos. Su astucia narrativa y giros inesperados mantienen a los lectores cautivados, dejando un legado duradero en el género de la novela detectivesca. A lo largo de su prolífica carrera, escribió innumerables obras que han perdurado en el tiempo, consolidándola como una figura indiscutible en la literatura criminal y un referente inmortal en la historia de la escritura.",
+ "imageUrl": "https://i.postimg.cc/NfDzmVXT/006-Agatha-Christie.png",
+ "facts": {
+ "yearOfBirth": "1890",
+ "yearOfDeath": "1976",
+ "birthPlace": "Torquay, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "Diez negritos"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "007",
+ "name": "Gabriela Mistral",
+ "shortDescription": "Poeta chilena y diplomática, primera latinoamericana en recibir el Premio Nobel de Literatura.",
+ "description": "Gabriela Mistral, seudónimo de Lucila de María del Perpetuo Socorro Godoy Alcayaga, fue una destacada poeta chilena y diplomática. Nació el 7 de abril de 1889 en Vicuña, Chile, y falleció el 10 de enero de 1957. Mistral fue la primera latinoamericana en recibir el Premio Nobel de Literatura, otorgado en 1945. Su obra poética aborda temas como la maternidad, la naturaleza y la injusticia social. Algunas de sus obras más conocidas incluyen 'Desolación' y 'Lagar'. Además de su labor literaria, Mistral se destacó como educadora y diplomática, representando a Chile en diversos países.",
+ "imageUrl": "https://i.postimg.cc/hvq51RM8/007-Gabriela-Mistral.png",
+ "facts": {
+ "yearOfBirth": "1889",
+ "yearOfDeath": "1957",
+ "birthPlace": "Vicuña, Chile",
+ "countryNacimiento": "Chile",
+ "mainField": "Poesía",
+ "famousBook": "Desolación"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "008",
+ "name": "Claribel Alegría",
+ "shortDescription": "Poeta y novelista nicaragüense-salvadoreña, destacada en la literatura centroamericana.",
+ "description": "Claribel Alegría fue una destacada poetisa y novelista nicaragüense. Reconocida por su poesía comprometida y su habilidad para fusionar la tradición literaria con la realidad política y social de América Latina. Alegría coqueteó con diversas formas artísticas, explorando temas como la guerra civil y la identidad cultural en su obra. Fue galardonada con premios importantes, como el Casa de las Américas en Poesía, y su legado literario abarca desde el modernismo hasta la poesía testimonial. Su contribución a la literatura latinoamericana la posiciona como una figura clave, influyente y valiente en el panorama literario del siglo XX.",
+ "imageUrl": "https://i.postimg.cc/rySbFzFf/008-Claribel-Alegria.png",
+ "facts": {
+ "yearOfBirth": "1924",
+ "yearOfDeath": "2018",
+ "birthPlace": "Estelí, Nicaragua",
+ "countryNacimiento": "Nicaragua",
+ "mainField": "Poesía, Novela",
+ "famousBook": "Cenizas de Izalco"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "009",
+ "name": "J.K. Rowling",
+ "shortDescription": "Escritora británica, autora de la serie 'Harry Potter'.",
+ "description": "J.K. Rowling, nacida en 1965 en el Reino Unido, es una destacada escritora conocida por la aclamada serie de libros de Harry Potter. Su habilidad para crear mundos mágicos y personajes entrañables la ha convertido en una de las autoras más exitosas y queridas del mundo. Además de la saga de Harry Potter, Rowling ha incursionado en la escritura de novelas para adultos, como 'Una vacante imprevista' y 'El canto del cuco', bajo el seudónimo Robert Galbraith. Su impacto en la literatura contemporánea y su dedicación a causas sociales la han consolidado como una figura influyente.",
+ "imageUrl": "https://i.postimg.cc/pTjSjLQX/009-J-K-Rowling.png",
+ "facts": {
+ "yearOfBirth": "1965",
+ "birthPlace": "Yate, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "Harry Potter y la piedra filosofal"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "010",
+ "name": "Mary Shelley",
+ "shortDescription": "Novelista británica, autora de 'Frankenstein'.",
+ "description": "Mary Shelley (1797-1851), escritora británica pionera, es célebre por su obra maestra 'Frankenstein'. Nacida en una familia literaria, su creatividad se desplegó desde temprana edad. Shelley desafió las normas de su tiempo con la creación de un monstruo trágico y reflexivo. Su legado trasciende el horror gótico, explorando la ética científica y la alienación. Además de 'Frankenstein', sus novelas 'El último hombre' y 'Mathilda' destacan su habilidad narrativa. Shelley, una figura fascinante del Romanticismo, ha dejado una huella duradera en la literatura, influyendo en generaciones de escritores y exploradores de la ciencia ficción.",
+ "imageUrl": "https://i.postimg.cc/wMcbW4bC/010-Mary-Shelley.png",
+ "facts": {
+ "yearOfBirth": "1797",
+ "yearOfDeath": "1851",
+ "birthPlace": "Londres, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "Frankenstein"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "011",
+ "name": "Emily Dickinson",
+ "shortDescription": "Poeta estadounidense, conocida por su poesía innovadora.",
+ "description": "Emily Dickinson (1830-1886), poetisa estadounidense, es reconocida por su genialidad poética y su enfoque introspectivo. Vivía una vida reclusa en Amherst, Massachusetts, y escribió más de 1,800 poemas, muchos de los cuales fueron descubiertos tras su muerte. La obra de Dickinson, caracterizada por su estilo único y conciso, explora temas como la muerte, el amor y la naturaleza. Su contribución a la poesía estadounidense es incalculable, y su habilidad para capturar la esencia de la vida cotidiana la ha convertido en una figura venerada en la literatura mundial.",
+ "imageUrl": "https://i.postimg.cc/pTK0T1xm/011-Emily-Dickinson.png",
+ "facts": {
+ "yearOfBirth": "1830",
+ "yearOfDeath": "1886",
+ "birthPlace": "Amherst, Massachusetts, EE. UU.",
+ "countryNacimiento": "EE. UU.",
+ "mainField": "Poesía",
+ "famousBook": "Me llamo Emily Dickinson"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "012",
+ "name": "Sylvia Plath",
+ "shortDescription": "Poeta y novelista estadounidense, figura del confesionalismo.",
+ "description": "Sylvia Plath (1932-1963), poetisa y novelista estadounidense, es conocida por su escritura intensamente emotiva y su exploración de la angustia psicológica. Su obra maestra, 'La campana de cristal', refleja sus luchas personales. Plath, figura central del Confesionalismo, aborda temas como la identidad, la opresión femenina y la enfermedad mental. Su poesía, como 'Ariel', revela una profunda conexión con la naturaleza. Aunque su vida fue trágicamente breve, la influencia de Plath en la poesía contemporánea es duradera, marcando su legado como una de las voces más impactantes del siglo XX.",
+ "imageUrl": "https://i.postimg.cc/D0FxbdyB/012-Sylvia-Plath.png",
+ "facts": {
+ "yearOfBirth": "1932",
+ "yearOfDeath": "1963",
+ "birthPlace": "Boston, Massachusetts, EE. UU.",
+ "countryNacimiento": "EE. UU.",
+ "mainField": "Poesía, Novela",
+ "famousBook": "Ariel"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "013",
+ "name": "Harper Lee",
+ "shortDescription": "Escritora estadounidense, autora de 'Matar a un ruiseñor'.",
+ "description": "Harper Lee (1926-2016), novelista estadounidense, es célebre por su influyente obra 'Matar a un ruiseñor'. Nacida en Alabama, su novela, que aborda temas de raza y justicia, se convirtió en un clásico instantáneo y ganó el Premio Pulitzer. Aunque Lee publicó solo una novela durante su vida, su impacto fue significativo. Su habilidad para abordar cuestiones sociales complejas y su narrativa conmovedora le valieron el reconocimiento duradero como una de las escritoras más importantes del siglo XX, influenciando generaciones de lectores y escritores con su perspicacia y humanidad.",
+ "imageUrl": "https://i.postimg.cc/KjNJ7k1F/013-Harper-Lee.png",
+ "facts": {
+ "yearOfBirth": "1926",
+ "yearOfDeath": "2016",
+ "birthPlace": "Monroeville, Alabama, EE. UU.",
+ "countryNacimiento": "EE. UU.",
+ "mainField": "Literatura",
+ "famousBook": "Matar a un ruiseñor"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "014",
+ "name": "Chimamanda Ngozi Adichie",
+ "shortDescription": "Escritora nigeriana conocida por sus obras feministas y sociales.",
+ "description": "Chimamanda Ngozi Adichie, nacida en Nigeria en 1977, es una destacada escritora y feminista. Su obra, que incluye 'Hibisco morado' y 'Americanah', explora la identidad, la cultura y la experiencia de las mujeres africanas. Adichie ha ganado reconocimiento mundial por su estilo literario distintivo y su compromiso con la igualdad de género. Su famoso discurso 'Todos deberíamos ser feministas' ha resonado globalmente. Adichie, con su aguda observación y narrativa cautivadora, ha dejado una profunda huella en la literatura contemporánea y en el movimiento feminista, consolidándose como una voz influyente y visionaria.",
+ "imageUrl": "https://i.postimg.cc/DZ3gtdsn/014-Chimamanda-Ngozi-Adichie.png",
+ "facts": {
+ "yearOfBirth": "1977",
+ "birthPlace": "Enugu, Nigeria",
+ "countryNacimiento": "Nigeria",
+ "mainField": "Literatura",
+ "famousBook": "La flor púrpura"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "015",
+ "name": "Maya Angelou",
+ "shortDescription": "Poeta, cantante y activista estadounidense, figura clave del movimiento de derechos civiles.",
+ "description": " Maya Angelou (1928-2014), poetisa, escritora y activista estadounidense, es una luminaria de la literatura y los derechos civiles. Su autobiografía 'Yo sé por qué canta el pájaro enjaulado' es una odisea emocional que explora la superación personal y la lucha contra la discriminación racial y de género. Angelou, con una prosa poética única, ha dejado un legado poderoso que abarca desde su papel como poeta laureada de EE. UU. hasta su contribución a la música y el teatro. Su voz resonante y su impacto duradero la consolidan como una figura inolvidable en la historia cultural y literaria estadounidense.",
+ "imageUrl": "https://i.postimg.cc/zfstq1mm/015-Maya-Angelou.png",
+ "facts": {
+ "yearOfBirth": "1928",
+ "yearOfDeath": "2014",
+ "birthPlace": "St. Louis, Missouri, EE. UU.",
+ "countryNacimiento": "EE. UU.",
+ "mainField": "Poesía",
+ "famousBook": "Todavía me levanto"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "016",
+ "name": "Louisa May Alcott",
+ "shortDescription": "Escritora estadounidense, autora de 'Mujercitas'.",
+ "description": "Louisa May Alcott (1832-1888)es una novelista estadounidense conocida por 'Mujercitas', una obra clásica que refleja la vida familiar del siglo XIX. Nacida en Germantown, Pensilvania, Alcott fue también abolicionista y sufragista. Su legado abarca más allá de la literatura juvenil, influyendo en generaciones con su perspectiva progresista y su habilidad para plasmar las complejidades de la vida femenina en esa época. Una figura destacada del siglo XIX, Louisa May Alcott contribuyó significativamente al movimiento literario y social de su tiempo.",
+ "imageUrl": "https://i.postimg.cc/vZD39mbF/016-Louisa-May-Alcott.png",
+ "facts": {
+ "yearOfBirth": "1832",
+ "yearOfDeath": "1888",
+ "birthPlace": "Germantown, Pennsylvania, EE. UU.",
+ "countryNacimiento": "EE. UU.",
+ "mainField": "Literatura",
+ "famousBook": "Mujercitas"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "017",
+ "name": "Jhumpa Lahiri",
+ "shortDescription": "Escritora estadounidense de origen indio, ganadora del Premio Pulitzer.",
+ "description": "Jhumpa Lahiri, nacida en Londres en 1967, es una destacada escritora y traductora estadounidense de origen indio. Su obra, que incluye 'El intérprete del dolor' y 'El buen nombre', explora las complejidades de la identidad y la diáspora india. Lahiri ha ganado renombre por su prosa evocadora y sus narrativas que revelan las intersecciones culturales. Ganadora del Premio Pulitzer, su habilidad para tejer historias íntimas que trascienden fronteras geográficas y emocionales la ha consolidado como una voz distintiva en la literatura contemporánea, explorando la experiencia inmigrante con sensibilidad y profundidad.",
+ "imageUrl": "https://i.postimg.cc/XYhxg0YZ/017-Jhumpa-Lahiri.png",
+ "facts": {
+ "yearOfBirth": "1967",
+ "birthPlace": "Londres, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "Intérprete de emociones"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "018",
+ "name": "Zadie Smith",
+ "shortDescription": "Escritora británica, autora de 'Dientes blancos' y 'Sobre la belleza'.",
+ "description": "Zadie Smith, nacida en Londres en 1975, es una destacada novelista, ensayista y profesora británica. Su obra, que incluye 'Dientes blancos' y 'Sobre la belleza', refleja su aguda observación de la sociedad contemporánea. Smith, conocida por su estilo literario vibrante y su exploración de temas como la identidad y la multiculturalidad, ha recibido numerosos premios y elogios. Además de su éxito como novelista, su enfoque reflexivo en sus ensayos aborda cuestiones culturales y políticas. Zadie Smith, con su perspicacia y versatilidad literaria, se ha convertido en una figura influyente en la literatura contemporánea.",
+ "imageUrl": "https://i.postimg.cc/vmVhqS40/018-Zadie-Smith.png",
+ "facts": {
+ "yearOfBirth": "1975",
+ "birthPlace": "Londres, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "Dientes blancos"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "019",
+ "name": "Yaa Gyasi",
+ "shortDescription": "Escritora ghanesa-estadounidense, autora de 'Cántame, oh musa'.",
+ "description": "Yaa Gyasi, nacida en Ghana en 1989, es una talentosa novelista ghanesa-americana. Su aclamada obra 'Volver a casa' la catapultó a la escena literaria mundial. Gyasi, con maestría narrativa, explora la herencia y la diáspora africana a través de generaciones. La novela, que abarca siglos y continentes, examina temas profundos como la esclavitud, la identidad y la conexión humana. Gyasi ha recibido elogios por su habilidad para tejer historias impactantes con riqueza histórica. Su contribución a la literatura contemporánea la ha establecido como una voz destacada, revelando la complejidad de la experiencia africana y afroamericana.",
+ "imageUrl": "https://i.postimg.cc/QNk4ZP0P/019-Yaa-Gyasi.png",
+ "facts": {
+ "yearOfBirth": "1989",
+ "birthPlace": "Mampong, Ghana",
+ "countryNacimiento": "Ghana",
+ "mainField": "Literatura",
+ "famousBook": "Canciones de cuna"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "020",
+ "name": "Margaret Atwood",
+ "shortDescription": "Escritora canadiense, autora de 'El cuento de la criada'.",
+ "description": "Margaret Atwood, nacida en Ottawa, Canadá, en 1939, es una destacada novelista, poetisa y crítica literaria. Su obra distópica, como 'El cuento de la criada', ha dejado una marca indeleble en la literatura contemporánea. Atwood, conocida por su maestría en explorar temas feministas y distópicos, ha ganado numerosos premios, incluido el Premio Booker. Sus novelas, que incluyen 'Alias Grace' y 'El año del diluvio', revelan su aguda percepción y su habilidad para abordar cuestiones sociales y medioambientales. Margaret Atwood, una voz influyente, ha desafiado géneros literarios y dejado una profunda huella en la literatura global.",
+ "imageUrl": "https://i.postimg.cc/SNSZSrPK/020-Margaret-Atwood.png",
+ "facts": {
+ "yearOfBirth": "1939",
+ "birthPlace": "Ottawa, Ontario, Canadá",
+ "countryNacimiento": "Canadá",
+ "mainField": "Literatura",
+ "famousBook": "El cuento de la criada"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "021",
+ "name": "Julia de Burgos",
+ "shortDescription": "Poeta y escritora puertorriqueña, conocida por su poesía comprometida y su activismo.",
+ "description": "Julia de Burgos fue una destacada poeta y escritora puertorriqueña nacida el 17 de febrero de 1914 en Carolina, Puerto Rico, y falleció el 6 de julio de 1953. Conocida por su poesía comprometida y su activismo social, Burgos dejó un legado duradero en la literatura puertorriqueña. Su obra abordó temas como la igualdad racial, la emancipación de la mujer y la justicia social. Algunas de sus obras más reconocidas incluyen 'Poema en veinte surcos' y 'Canción de la verdad sencilla'. Además de su labor literaria, Burgos también participó activamente en movimientos sociales y políticos de su tiempo.",
+ "imageUrl": "https://i.postimg.cc/Hs66VMG9/021-Julia-de-Burgos.png",
+ "facts": {
+ "yearOfBirth": "1914",
+ "yearOfDeath": "1953",
+ "birthPlace": "Carolina, Puerto Rico",
+ "countryNacimiento": "Puerto Rico",
+ "mainField": "Poesía",
+ "famousBook": "Poema en veinte surcos"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "022",
+ "name": "Piedad Bonnet",
+ "shortDescription": "Poeta y novelista colombiana, conocida por su obra lírica y emotiva.",
+ "description": "Piedad Bonnett, nacida en Amalfi, Colombia, en 1951, es una destacada poetisa, dramaturga y novelista. Su obra poética, que incluye 'Explicaciones no pedidas' y 'Lo que no tiene nombre', refleja una exploración íntima de la vida, la pérdida y la memoria. Bonnett, reconocida por su sensibilidad y profundidad emocional, ha recibido numerosos premios literarios. Además de su contribución a la poesía colombiana contemporánea, su incursión en la prosa ha consolidado su posición como una figura influyente en la literatura latinoamericana, explorando la complejidad de la existencia humana con una voz distintiva y conmovedora.",
+ "imageUrl": "https://i.postimg.cc/1t0HPnc6/022-Piedad-Bonnet.png",
+ "facts": {
+ "yearOfBirth": "1951",
+ "birthPlace": "Amalfi, Antioquia, Colombia",
+ "countryNacimiento": "Colombia",
+ "mainField": "Poesía, Novela",
+ "famousBook": "Lo que no tiene nombre"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "023",
+ "name": "Laura Esquivel",
+ "shortDescription": "Escritora mexicana, autora de 'Como agua para chocolate'.",
+ "description": "Laura Esquivel, nacida en Ciudad de México en 1950, es una renombrada escritora y guionista mexicana. Su obra más conocida, 'Como agua para chocolate', fusiona la magia realista con la vida cotidiana, explorando temas como el amor y la cocina. Esquivel ha recibido reconocimiento internacional por su capacidad para mezclar lo mágico con lo mundano. Además de su éxito literario, ha incursionado en el cine y el teatro. Con una narrativa vibrante y emotiva, Esquivel ha dejado una marca duradera en la literatura latinoamericana, celebrando la conexión entre la gastronomía y las emociones con ingenio y originalidad.",
+ "imageUrl": "https://i.postimg.cc/ZnVxBGQ5/023-Laura-Esquivel.png",
+ "facts": {
+ "yearOfBirth": "1950",
+ "birthPlace": "Ciudad de México, México",
+ "countryNacimiento": "México",
+ "mainField": "Literatura",
+ "famousBook": "Como agua para chocolate"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "024",
+ "name": "Gioconda Belli",
+ "shortDescription": "Poeta y novelista nicaragüense, figura destacada en la literatura contemporánea.",
+ "description": "Gioconda Belli, nacida en Managua, Nicaragua, en 1948, es una destacada poetisa y novelista reconocida por su compromiso político y su exploración de la condición femenina. Su obra, que incluye 'La mujer habitada' y 'El país bajo mi piel', refleja la fusión de la poesía con la narrativa, abordando temas sociales y de género. Belli, activista y revolucionaria, ha participado en movimientos por la justicia y los derechos de las mujeres. Su habilidad para entrelazar lo íntimo y lo político la ha establecido como una voz influyente en la literatura centroamericana contemporánea.",
+ "imageUrl": "https://i.postimg.cc/1X9KzmJd/024-Gioconda-Belli.png",
+ "facts": {
+ "yearOfBirth": "1948",
+ "birthPlace": "Managua, Nicaragua",
+ "countryNacimiento": "Nicaragua",
+ "mainField": "Poesía, Novela",
+ "famousBook": "La mujer habitada"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+];
+export default data;
\ No newline at end of file
diff --git a/src/data/img/Chat.png b/src/data/img/Chat.png
new file mode 100644
index 00000000..d26dc420
Binary files /dev/null and b/src/data/img/Chat.png differ
diff --git "a/src/data/img/Vista conversaci\303\263n grupal.png" "b/src/data/img/Vista conversaci\303\263n grupal.png"
new file mode 100644
index 00000000..dcf9851c
Binary files /dev/null and "b/src/data/img/Vista conversaci\303\263n grupal.png" differ
diff --git "a/src/data/img/Vista de conversaci\303\263n individual.png" "b/src/data/img/Vista de conversaci\303\263n individual.png"
new file mode 100644
index 00000000..6086a6cd
Binary files /dev/null and "b/src/data/img/Vista de conversaci\303\263n individual.png" differ
diff --git a/src/data/img/Vista notFound.png b/src/data/img/Vista notFound.png
new file mode 100644
index 00000000..d56f4551
Binary files /dev/null and b/src/data/img/Vista notFound.png differ
diff --git "a/src/data/img/Vista p\303\241gina principal.png" "b/src/data/img/Vista p\303\241gina principal.png"
new file mode 100644
index 00000000..6dcc88fa
Binary files /dev/null and "b/src/data/img/Vista p\303\241gina principal.png" differ
diff --git a/src/data/img/banner_escritoras.png b/src/data/img/banner_escritoras.png
new file mode 100644
index 00000000..cbeeed53
Binary files /dev/null and b/src/data/img/banner_escritoras.png differ
diff --git a/src/data/img/error_404.jpeg b/src/data/img/error_404.jpeg
new file mode 100644
index 00000000..5c333b43
Binary files /dev/null and b/src/data/img/error_404.jpeg differ
diff --git a/src/index.html b/src/index.html
index fd6186f2..b67df635 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,12 +1,18 @@
-
-
- Dataverse Chat
-
-
-
-
-
-
+
+
+
+ Escritoras
+ Escritoras
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index a0e2d57c..00000000
--- a/src/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
-
-/*
-import Example from './views/Example.js';
-
-Ejemplo de definición de rutas:
-
-const routes = {
- "/": Example,
- ...
-}
-*/
-
-/*
-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
diff --git a/src/lib/apiKey.js b/src/lib/apiKey.js
new file mode 100644
index 00000000..f67f0648
--- /dev/null
+++ b/src/lib/apiKey.js
@@ -0,0 +1,16 @@
+export const getApiKey = () => {
+ // Implementa el código para obtener la API KEY desde Local Storage
+ const ApiKeyValue = localStorage.getItem("apiKeyValue");
+ //console.log(localStorage.getItem("ApiKeyValue"))
+ return ApiKeyValue;
+};
+
+export const setApiKey = (key) => {
+ // Implementa el código para guardar la API KEY en Local Storage
+ localStorage.setItem("apiKeyValue", key);
+};
+
+export const removeApiKey = () => {
+ //limpia los datos guardados en el almacenamiento local
+ localStorage.clear();
+}
\ No newline at end of file
diff --git a/src/lib/dataFunctions.js b/src/lib/dataFunctions.js
new file mode 100644
index 00000000..acf7b031
--- /dev/null
+++ b/src/lib/dataFunctions.js
@@ -0,0 +1,76 @@
+//Función filtro
+export const filterData = (data, filterBy, value) => {
+ return data.filter((data) => {
+ if (data.facts[filterBy]) {
+ return data.facts[filterBy] === value;
+ }
+ return false;
+ });
+};
+
+// Funcion para ordenar ASC y DESC
+export const sortData = (data, sortConfig) => {
+ const { sortBy, sortOrder } = sortConfig;
+ const sortedData = data.slice().sort((a, b) => {
+ const valA = valorOrdenar(a, sortBy);
+ const valB = valorOrdenar(b, sortBy);
+ if (sortOrder === "asc") {
+ return valA.localeCompare(valB);
+ } else if (sortOrder === "desc") {
+ return valB.localeCompare(valA);
+ } else {
+ return 0;
+ }
+ });
+
+ return sortedData;
+};
+
+// Funcion para ordenar asc y desc junto con los filtros de género y países
+const valorOrdenar = (item, sortBy) => {
+ switch (sortBy) {
+ case "mainField":
+ return item.facts[sortBy];
+ case "countryNacimiento":
+ return item.facts[sortBy];
+ default:
+ return String(item[sortBy]).toLowerCase();
+ }
+};
+
+//Estadísticas
+export const computeStats = (data) => {
+ const stats = {
+ countries: computeCountryStats(data),
+ genres: computeGenreStats(data),
+ };
+
+ return stats;
+};
+
+const computeCountryStats = (data) => {
+ return data.reduce((accumulator, writer) => {
+ const country = writer.facts.countryNacimiento;
+
+ if (!accumulator[country]) {
+ accumulator[country] = 1;
+ } else {
+ accumulator[country] += 1;
+ }
+ return accumulator;
+ }, {});
+};
+
+const computeGenreStats = (data) => {
+ return data.reduce((accumulator, writer) => {
+ const genre = writer.facts.mainField;
+
+ if (!accumulator[genre]) {
+ accumulator[genre] = 1;
+ } else {
+ accumulator[genre] += 1;
+ }
+
+ return accumulator;
+ }, {});
+};
diff --git a/src/lib/openAIApi.js b/src/lib/openAIApi.js
new file mode 100644
index 00000000..6beb49f8
--- /dev/null
+++ b/src/lib/openAIApi.js
@@ -0,0 +1,33 @@
+import {getApiKey} from "./apiKey.js"
+
+export const communicateWithOpenAI = async (prompt, writer) => {
+ //console.log(writer)
+ const getApiKey1 = getApiKey();
+
+
+ const resp = await fetch('https://api.openai.com/v1/chat/completions', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Bearer ' + getApiKey1
+ },
+ body: JSON.stringify({
+ model: 'gpt-3.5-turbo',
+ messages: [
+ {
+ role: "system",
+ content: `Comportate como esta escritora,
+ ${writer.description}, genera respuestas cortas`
+ },
+ {
+ role: "user",
+ content: prompt
+ }
+ ]
+ })
+ });
+
+ const responseSystem = await resp.json();
+ //console.log(responseSystem);
+ return responseSystem;
+};
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..c5f760c4
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,34 @@
+import { renderItems } from "./view.js";
+
+const dataList = document.querySelector('#root');
+
+dataList.appendChild('renderItems(data)');
+
+// En este archivo definirás tus rutas e importarás los componentes que vas a renderizar.
+
+import { onURLChange, setRootElement, setRoutes } from "./router.js";
+import { home } from "./views/Home.js";
+import { error } from "./views/Error.js";
+import { escritoras } from "./views/Escritoras.js";
+import { group } from "./views/ChatGroup.js";
+
+const viewContainer = document.getElementById("root");
+
+const routes = {
+ "/": home,
+ "/error": error,
+ "/escritoras": escritoras,
+ "/group": group,
+};
+
+setRoutes(routes);
+setRootElement(viewContainer);
+
+document.addEventListener("DOMContentLoaded", () => {
+ onURLChange(window.location.pathname);
+});
+
+document.addEventListener("popstate", () => {
+ onURLChange(window.location.pathname);
+});
+
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 00000000..9215d436
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,47 @@
+let ROUTES = {};
+let rootElement = "";
+
+export const setRootElement = (newRoot) => {
+ rootElement = newRoot;
+};
+
+export const setRoutes = (newRoutes) => {
+ // console.log(newRoutes);
+ if (typeof newRoutes === "object") {
+ ROUTES = newRoutes;
+ }
+};
+
+export const queryStringToObject = (queryString) => {
+ const urlProps = new URLSearchParams(queryString);
+ const finalObject = Object.fromEntries(urlProps.entries());
+ return finalObject;
+};
+
+const renderView = (pathname, props = {}) => {
+ //console.log(ROUTES);
+ const root = rootElement;
+ root.innerHTML = "";
+ if (ROUTES[pathname]) {
+ const template = ROUTES[pathname](props);
+ root.appendChild(template);
+ } else {
+ root.appendChild(ROUTES["/error"]());
+ }
+};
+
+export const navigateTo = (pathname, props = {}) => {
+ document.title = pathname;
+ history.pushState({}, "", pathname);
+ const splitPathname = pathname.split("?");
+ props = splitPathname[1];
+ pathname = splitPathname[0];
+ const objectProps = queryStringToObject(props);
+ renderView(pathname, objectProps);
+};
+
+export const onURLChange = (pathname) => {
+ const searchURL = window.location.search;
+ const objectProps = queryStringToObject(searchURL);
+ renderView(pathname, objectProps);
+};
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 00000000..2caa2225
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,776 @@
+/* Estilo para HEAD header */
+HEAD header {
+ background-color: white;
+ padding: 2% 4%;
+ border-radius: 15px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-family: 'Marcellus', serif;
+}
+
+.home {
+ margin-bottom: 0%;
+ width: 100%;
+ height: 130px;
+ display: flex;
+ margin-bottom: 0%;
+}
+
+#modalApiKey {
+ width: 50%;
+ background-color: #f5eee4;
+ display: flex;
+ border-radius: 10px;
+ border: 0;
+ height: 5%;
+}
+
+#ApiKey {
+ border: 0;
+ outline: none;
+ width: 80%;
+ font-size: medium;
+}
+
+#root {
+ max-width: 100%;
+ margin: 2% auto;
+ margin-top: -1%;
+ display: flex;
+ padding-bottom: 40px;
+}
+
+body {
+ font-family: 'Marcellus', serif;
+ background-color: #fdfbf9;
+ margin: 0;
+}
+
+h1 {
+ text-align: center;
+ font-family: 'Marcellus', serif;
+ color: #332D40;
+ margin-bottom: 3%;
+}
+
+.error-image {
+ width: 20%;
+ height: 7%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-left: 42%;
+}
+
+.form-container {
+ max-width: 100%;
+ height: 10%;
+ margin: auto;
+ background-color: #f5eee4;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ display: flex;
+ margin-top: -3%;
+ align-items: center;
+ justify-content: center;
+}
+
+select {
+ width: 16%;
+ height: 0.5%;
+ padding: 1%;
+ margin-bottom: 2%;
+ margin-top: 1%;
+ border: 0;
+ border-radius: 10%;
+ font-family: 'Marcellus', serif;
+ display: flex;
+ margin-left: 4%;
+}
+
+#button-clearM,
+#button-clear,
+#button-facts,
+#button-chat,
+#button-chatGroup,
+#button-goHome,
+#button-back-home,
+#button-send,
+#buttonBackHomeChat,
+#buttonBackHomeChatI,
+#buttonchatGrupal,
+#buttonchatGrupalI {
+ font-family: 'Marcellus', serif;
+ font-size:medium;
+ font-weight: bold;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ background-color: #332D40;
+ color: #f8edda;
+ display: flex;
+ text-align: center;
+ width: auto;
+ margin-left: 4%;
+ cursor: pointer;
+ border: 0;
+ border-radius: 10%;
+}
+
+#button-send {
+ margin-left: 5%;
+}
+
+#button-chat {
+ align-items: center;
+ margin-left: 65%;
+ margin-bottom: 5%;
+ margin-top: -20%;
+}
+
+#button-goHome {
+ align-items: center;
+ margin-left: 50%;
+}
+
+#button-close {
+ font-family: 'Marcellus', serif;
+ font-weight: bold;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ background-color: #332D40;
+ color: #f8edda;
+ display: flex;
+ text-align: center;
+ width: auto;
+ cursor: pointer;
+ border-radius: 10%;
+ align-items: center;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.card img {
+ width: 70%;
+ height: auto;
+ border-radius: 10px 10px 10px 10px;
+ display: flex;
+ margin: 0 auto;
+ margin-bottom: 1.5%;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+}
+
+ul {
+ list-style: none;
+ padding: 2%;
+ gap: 1%;
+ text-align: justify;
+ font-size: small;
+ margin-bottom: 2%;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 1%;
+}
+
+.card {
+ width: calc(21% - 1%);
+ margin: 2%;
+ text-align: justify;
+ margin: 2%;
+ background-color: #f5eee4;
+ font-family: 'Marcellus', serif;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ border-radius: 3%;
+ cursor: pointer;
+}
+
+dd[itemprop="name"] {
+ color: #000000;
+ font-weight: bold;
+ text-align: center;
+ font-size: medium;
+ align-items: center;
+}
+
+dd[itemprop="shortDescription"] {
+ text-align: justify;
+}
+
+dd[itemprop="fechaNacimiento"],
+dd[itemprop="fechaMuerte"],
+dd[itemprop="LugarNacimiento"],
+dd[itemprop="género"] {
+ text-align: justify;
+ display: flex;
+}
+
+dt[itemprop="fechaNacimiento"],
+dt[itemprop="fechaMuerte"],
+dt[itemprop="LugarNacimiento"],
+dt[itemprop="género"] {
+ text-align: justify;
+ display: flex;
+}
+
+dt {
+ font-weight: bold;
+ text-align: justify;
+}
+
+dl {
+ margin: 4%
+}
+
+img {
+ width: 100%;
+ height: auto;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ background-color: #f1cd885e;
+}
+
+dd {
+ margin-inline-start: 1px;
+}
+
+footer {
+ background-color: #f5eee4;
+ font-family: 'Marcellus', serif;
+ color: black;
+ text-align: center;
+ padding: 3%;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ margin-bottom: -50%;
+}
+
+#statsDialog {
+ background-color: #f5eee4;
+ padding: 1px;
+ border: 0;
+ border-radius: 20px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/*estilo para el chat individual*/
+.container-chat-ind {
+ display: flex;
+ border-radius: 40px 40px 40px 40px;
+ justify-content: center;
+ width: 80%;
+ margin: auto;
+ margin-bottom: 30px;
+ box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
+}
+
+.credentialWriter {
+ flex: 30%;
+ padding: 20px;
+ width: 40%;
+ box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);
+ border-radius: 50px 50px 50px 50px;
+}
+
+.writer-img {
+ display: flex;
+ max-width: 50%;
+ height: auto;
+ border-radius: 5%;
+ margin-left: 25%;
+}
+
+img {
+ border-radius: 5%;
+}
+
+.nameWriterc {
+ font-size: 18px;
+}
+
+.description-writer {
+ text-align: justify;
+ font-size: 12px;
+}
+
+/* chatI*/
+
+.chatI {
+ flex: 65%;
+ width: 10%;
+ flex-direction: column;
+ max-height: 350px;
+}
+
+.genMess {
+ height: 80%;
+ overflow: scroll;
+ overflow-x: hidden;
+ flex-direction: column-reverse;
+}
+
+.chat-inputI {
+ align-items: center;
+ margin-left: 5%;
+ display: inline-flex;
+ width: 85%;
+ height: 10%;
+ justify-content: space-around;
+}
+
+#userInputI {
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ resize: none;
+ font-family: 'Marcellus', serif;
+ margin-bottom: -30%;
+ width: 100%;
+ font-size: 16px;
+ margin-left: 10%;
+ text-align: justify;
+}
+
+#SendButtomChatI {
+ font-family: 'Marcellus', serif;
+ font-size: 16px;
+ font-weight: bold;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ background-color: #332D40;
+ color: #f8edda;
+ display: flex;
+ text-align: center;
+ width: auto;
+ margin-left: 4%;
+ cursor: pointer;
+ border: 0;
+ border-radius: 10%;
+ margin-top: 30%;
+}
+
+.container-Buttoms-chat {
+ flex-direction: row;
+}
+
+.userNameI {
+ color: gray;
+ margin-left: 30%;
+ margin-bottom: 2%;
+}
+
+.messUserI {
+ background-color: #f3e8e0;
+ border-radius: 10px;
+ padding: 10px;
+ margin-bottom: 10px;
+ max-width: 60%;
+ margin-left: 30%;
+ margin-right: 5%;
+}
+
+.messageI {
+ width: 60%;
+}
+
+.nameSystem {
+ margin-left: 10%;
+ color: gray;
+ margin-bottom: 2%;
+}
+
+.systemMessage {
+ background-color: #ede9e6;
+ border-radius: 10px;
+ padding: 10px;
+ margin-bottom: 10px;
+ max-width: 100%;
+ margin-left: 5%;
+ margin-right: 5%;
+}
+
+#userId {
+ margin-left: 40%;
+}
+
+#userId,
+#writerId {
+ font-weight: small;
+ color: gray;
+}
+
+.container-Buttoms-chat {
+ justify-content: center;
+ display: flex;
+}
+
+#buttonBackHomeChatI {
+ margin-left: 10%;
+ margin-bottom: 4%;
+}
+
+#buttonchatGrupal,
+#buttonchatGrupalI {
+ margin-left: 5%;
+ margin-bottom: 4%;
+}
+
+/*estilo para el chat grupal*/
+
+.containerChatG {
+ display: flex;
+ width: 90%;
+ margin-left: 3%;
+ padding: 20px;
+ box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.1);
+ border-radius: 40px 40px 40px 40px;
+}
+
+.credentialWriterG {
+ flex: 25%;
+ display: flex;
+ padding: 20px;
+ width: 40%;
+ border-radius: 50px 50px 50px 50px;
+ display: inline-block;
+ overflow: scroll;
+ overflow-x: hidden;
+ max-height: 350px;
+}
+
+.imgChatGroup {
+ width: 10%;
+ height: auto;
+ border-radius: 20px;
+}
+
+.imgChatGroupCont {
+ border: 0, 5%;
+ display: flex;
+ align-items: center;
+}
+
+.groupChatGlobal {
+ width: 10%;
+ flex: 65%;
+ max-height: 350px;
+}
+
+.groupChat {
+ height: 80%;
+ overflow: scroll;
+ overflow-x: hidden;
+}
+
+.messUser {
+ background-color: #f3e8e0;
+ border-radius: 10px;
+ padding: 10px;
+ margin-bottom: 10px;
+ max-width: 60%;
+ margin-left: 30%;
+ margin-right: 5%;
+}
+
+.chatGlobal {
+ flex: 60%;
+ padding: 100px;
+ border-right: 1px solid #ccc;
+ border-radius: 0 20px 20px 0;
+ max-height: 300px;
+ overflow: scroll;
+ overflow-x: hidden;
+ position: relative;
+}
+
+.chat-inputG {
+ display: flex;
+ width: 85%;
+ height: 15%;
+ margin-left: 10%;
+ margin-top: 4%;
+ justify-content: space-around;
+}
+
+.texAreaChatG {
+ flex: 1;
+ width: 80%;
+ font-family: 'Marcellus', serif;
+}
+
+.SendButtomChat {
+ font-family: 'Marcellus', serif;
+ font-size: 16px;
+ font-weight: bold;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ background-color: #332D40;
+ color: #f8edda;
+ cursor: pointer;
+ border: 0;
+ border-radius: 10%;
+ margin-right: 2%;
+ margin-left: 2%;
+ margin-bottom: 2%;
+}
+
+.userNameG {
+ color: gray;
+ margin-left: 30%;
+}
+
+.nameSystemG {
+ margin-left: 5%;
+ color: gray;
+ margin-top: 1%;
+}
+
+.systemMessageG {
+ background-color: #ede9e6;
+ border-radius: 10px;
+ padding: 10px;
+ max-width: 100%;
+ margin-left: 5%;
+ margin-right: 5%;
+}
+
+.container-Buttoms-chatG {
+ margin-top: 4%;
+ margin-left: 45%;
+ margin-bottom: 2%;
+}
+
+
+
+/*media query*/
+@media (max-width: 450px) {
+ header {
+ padding: 1% 2%;
+ }
+
+ .home {
+ height: auto;
+ }
+
+ #root {
+ margin-top: 0;
+ padding-bottom: 10px;
+ margin: 1% 1% 1% 1%;
+ align-self: normal;
+ }
+
+ .form-container {
+ height: auto;
+ font-size: xx-small;
+ padding: 0.5%;
+ justify-items: center;
+ }
+
+ select {
+ margin-right: 0.5%;
+ font-size: xx-small;
+ }
+
+ select {
+ width: 100%;
+ height: 0.5%;
+ padding: 1%;
+ margin-bottom: 2%;
+ margin-top: 1%;
+ border: 0;
+ border-radius: 10%;
+ font-family: 'Marcellus', serif;
+ display: flex;
+ margin-left: 1%;
+ }
+
+ #button-clearM,
+ #button-facts,
+ #button-chatGroup,
+ #button-goHome {
+ font-size: xx-small;
+ margin-right: 1%;
+ margin-left: 1%;
+ }
+
+ .card {
+ width: 100%;
+ }
+
+ img {
+ width: 100%;
+ }
+}
+
+/*media query. Vista Chat*/
+@media (max-width: 600px) {
+ .container-chat-ind {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ width: auto;
+ height: 450px;
+ }
+
+ .credentialWriter {
+ display: flex;
+ align-items: center;
+ width: auto;
+ height: 1%;
+ padding: 0;
+ border-radius: 3px;
+ box-shadow: 0.5px
+ }
+
+ .writer-img {
+ width: 20%;
+ height: auto;
+ }
+
+ .nameWriter {
+ margin-left: 10px;
+ }
+
+ .chat-inputI {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ bottom: 0;
+ }
+
+ #userInputI {
+ flex: 1;
+ width: calc(100% - 10px);
+ /* Ajusta el ancho restando el margen del botón */
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ resize: none;
+ /* Evita que el usuario pueda redimensionar el textarea */
+ font-family: 'Marcellus', serif;
+ font-size: 12px;
+ text-align: justify;
+ margin-bottom: 8px;
+ }
+
+ button#SendButtomChatI {
+ margin-bottom: 100px;
+ }
+
+ .description-writer {
+ display: none;
+ }
+
+ .chatI {
+ flex: 90%;
+ width: 85%;
+ }
+
+ #userInput {
+ flex: 80%;
+ padding: 8px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ resize: none;
+ font-family: 'Marcellus', serif;
+ margin-bottom: -160%;
+ width: 100%;
+ font-size: 16px;
+ margin-left: 10%;
+ text-align: justify;
+ margin-bottom: -20%;
+ }
+
+ #buttonBackHomeChat {
+ margin-bottom: 2%;
+ }
+
+ .chat-input button {
+ margin-bottom: -20%;
+ }
+
+ /*Vista Responsive Chat Grupal*/
+ .imgChatGroup {
+ display: none;
+ }
+
+ .imgChatGroupCont {
+ display: none;
+ }
+
+ .containerChatG {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ width: auto;
+ height: 450px;
+ }
+
+ .credentialWriterG {
+ flex: 25%;
+ display: flex;
+ padding: 20px;
+ width: 85%;
+ border-radius: 50px 50px 50px 50px;
+ display: inline-block;
+ overflow: scroll;
+ overflow-x: hidden;
+ max-height: 350px;
+ }
+
+ .chat-inputG {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ margin: 0;
+ }
+
+ .groupChat {
+ display: flex;
+ height: 200px;
+ }
+
+ .groupChatGlobal {
+ width: auto;
+ flex: none;
+ padding: inherit;
+ }
+
+ .titleContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: auto;
+ margin-top: 0;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+ border-radius: 20px;
+ }
+
+ .messUser {
+ background-color: #f3e8e0;
+ border-radius: 10px;
+ padding: 10px;
+ margin-bottom: auto;
+ max-width: 60%;
+ margin-left: 30%;
+ }
+
+ h1 {
+ text-align: center;
+ font-family: 'Marcellus', serif;
+ color: #332D40;
+ margin-bottom: 3%;
+ font-size: medium;
+ }
+}
+
+ /* Media query para pantallas con un ancho máximo de 768px */
+ @media screen and (max-width: 500px) {
+ #modalApiKey {
+ width: 80%;
+ /* Reducir el ancho del modal */
+ }
+
+ #ApiKey {
+ width: 90%;
+ font-size: small;
+ }
+
+
+ }
+
+
+
+
diff --git a/src/view.js b/src/view.js
new file mode 100644
index 00000000..58e74557
--- /dev/null
+++ b/src/view.js
@@ -0,0 +1,54 @@
+//verificar que tenemos la data
+//crear el elemento padre que seria el ul
+//crear los elementos hijos li
+//crear los elementos dl(padre) dt y dd (hijos)
+//que toda la información se almacene en tarjetas tipo card
+//retornar la lista ordenada segun la data
+
+export const renderItems = (data) => {
+<<<<<<< HEAD
+ const list = document.createElement('ul');
+
+ data.forEach(data => {
+ const itemList = document.createElement('li');
+ itemList.classList.add('card');
+ const itemContainer = document.createElement('dl');
+ itemContainer.innerHTML = `
+
+
+ ${data.name} ${data.description}
+ `;
+ itemList.appendChild(itemContainer);
+ list.appendChild(itemList);
+ });
+ return list;
+=======
+ // Aquí comienza tu código y puedes retornar lo que tu necesites GENERACION DINAMICA
+ const list = document.createElement("ul");
+ data.forEach(data => {
+
+ const itemList = document.createElement("li");
+ const itemContainer = document.createElement("dl");
+ itemList.classList.add("card");
+
+ itemContainer.innerHTML = `
+ ${data.name} ${data.description}
+
+ Enviar
+
+
+ `;
+
+ const groupChat = document.createElement("div");
+ groupChat.className = "groupChat";
+ groupChatGlobal.appendChild(groupChat);
+ containerChatG.appendChild(credentialWriterG);
+ containerChatG.appendChild(groupChatGlobal)
+ groupView.appendChild(containerChatG);
+ const chat = groupChatGlobal.querySelector(".chat-inputG");
+ groupChatGlobal.appendChild(chat);
+
+ async function messageUser() {
+ const newMess = groupChatGlobal.querySelector(".texAreaChatG");
+ const newMessTxt = newMess.value;
+
+
+ if (newMessTxt !== "") {
+
+ const userNameContainer = document.createElement("div");
+ userNameContainer.className = "userNameContainer";
+
+ const userName = document.createElement("div");
+ userName.className = "userNameG";
+ userName.innerHTML = "Usuaria:";
+ groupChat.appendChild(userName);
+
+ const containernewMess = document.createElement("div");
+ containernewMess.className = "messUser";
+ const viewMess = document.createElement("p");
+ viewMess.className = "message";
+ viewMess.innerHTML = newMessTxt;
+ containernewMess.appendChild(viewMess);
+ groupChat.appendChild(containernewMess);
+ newMess.value = "";
+
+ //llamada a openAi
+ for (const writer of data) {
+ try {
+ const response = await communicateWithOpenAI(newMessTxt, writer);
+ const nameSystem = document.createElement("div");
+ nameSystem.className = "nameSystemG";
+ nameSystem.innerHTML = `${writer.name}:`;
+
+ const systemMessage = document.createElement("div");
+ systemMessage.className = "systemMessageG";
+ systemMessage.innerHTML = response.choices[0].message.content;
+ groupChat.appendChild(nameSystem);
+ groupChat.appendChild(systemMessage);
+ }
+ catch (error) {
+ //console.error("Error al comunicarse con la IA", error);
+ }
+ }
+ }
+ }
+
+ const containerButtomsChat = document.createElement("div");
+ containerButtomsChat.className = "container-Buttoms-chatG";
+ containerButtomsChat.innerHTML = `
+ Regresar
+ `
+
+ groupView.appendChild(containerButtomsChat);
+
+ const SendButtomChat = groupChatGlobal.querySelector(".SendButtomChat");
+ SendButtomChat.addEventListener("click", () => {
+ //console.log("funciona")
+ messageUser();
+ })
+
+ const userInput = groupChatGlobal.querySelector(".texAreaChatG");
+ userInput.addEventListener("keydown", (event) => {
+ //console.log("el input funciona")
+ if (event.key === 'Enter') {
+ messageUser();
+ }
+ })
+
+ const buttonBackHomeChat = containerButtomsChat.querySelector("#buttonBackHomeChat");
+ buttonBackHomeChat.addEventListener("click", () => {
+ window.location.href = "index.html";
+ })
+
+ const footerElement = footer();
+ groupView.appendChild(footerElement);
+
+ return groupView;
+};
\ No newline at end of file
diff --git a/src/views/Error.js b/src/views/Error.js
new file mode 100644
index 00000000..0f3dfef1
--- /dev/null
+++ b/src/views/Error.js
@@ -0,0 +1,19 @@
+import { header } from "../components/header.js";
+import { footer } from "../components/footer.js";
+import { notFound } from "../components/notFound.js";
+
+export const error = () => {
+ const errorView = document.createElement("div");
+ errorView.className = "viewComponent";
+
+ const headerElement = header();
+ errorView.appendChild(headerElement);
+
+ const notFoundElement = notFound();
+ errorView.appendChild(notFoundElement);
+
+ const footerElement = footer();
+ errorView.appendChild(footerElement);
+
+ return errorView;
+};
\ No newline at end of file
diff --git a/src/views/Escritoras.js b/src/views/Escritoras.js
new file mode 100644
index 00000000..0dae0cf5
--- /dev/null
+++ b/src/views/Escritoras.js
@@ -0,0 +1,20 @@
+import { header } from "../components/header.js";
+import { footer } from "../components/footer.js";
+import { individual } from "../Components/Individual.js";
+
+export const escritoras = (element) => {
+ // console.log(element);
+ const escritorasView = document.createElement("div");
+ escritorasView.className = "viewComponent";
+
+ const headerElement = header();
+ escritorasView.appendChild(headerElement);
+
+ const IndividualElement = individual(element);
+ escritorasView.appendChild(IndividualElement);
+
+ const footerElement = footer();
+ escritorasView.appendChild(footerElement);
+
+ return escritorasView;
+};
\ No newline at end of file
diff --git a/src/views/Example.js b/src/views/Example.js
deleted file mode 100644
index baca4441..00000000
--- a/src/views/Example.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const Example = () => {
-
-};
-
-export default Example;
\ No newline at end of file
diff --git a/src/views/Home.js b/src/views/Home.js
new file mode 100644
index 00000000..403352ae
--- /dev/null
+++ b/src/views/Home.js
@@ -0,0 +1,20 @@
+
+import { header } from "../components/header.js";
+import { menu } from "../Components/menu.js";
+import { footer } from "../components/footer.js";
+
+export const home = () => {
+ const homeView = document.createElement("div");
+ homeView.className = "viewComponent";
+
+ const headerElement = header();
+ homeView.appendChild(headerElement);
+
+ const menuElement = menu();
+ homeView.appendChild(menuElement);
+
+ const footerElement = footer();
+ homeView.appendChild(footerElement);
+
+ return homeView;
+};
\ No newline at end of file
diff --git a/test/.eslintrc b/test/.eslintrc
new file mode 100644
index 00000000..7bc296da
--- /dev/null
+++ b/test/.eslintrc
@@ -0,0 +1,5 @@
+{
+ "env": {
+ "jest": true
+ }
+}
\ No newline at end of file
diff --git a/test/ApiModal.spec.js b/test/ApiModal.spec.js
new file mode 100644
index 00000000..962a2022
--- /dev/null
+++ b/test/ApiModal.spec.js
@@ -0,0 +1,48 @@
+import { ApiModal } from '../src/Components/ApiModal.js';
+import { setApiKey, removeApiKey } from '../src/lib/apiKey.js';
+import { navigateTo } from '../src/router.js';
+
+jest.mock('../src/lib/apiKey.js', () => ({
+ setApiKey: jest.fn(),
+ removeApiKey: jest.fn()
+}));
+
+jest.mock('../src/router.js', () => ({
+ navigateTo: jest.fn()
+}));
+
+// eslint-disable-next-line no-undef
+global.alert = jest.fn();
+
+describe('ApiModal', () => {
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
+ test('Send with invalid password', () => {
+ const redirectUrl = '/ruta-de-redireccion';
+ const modal = ApiModal(redirectUrl);
+ document.body.appendChild(modal);
+ const inputApiKey = modal.querySelector("#ApiKey");
+ const buttonSend = modal.querySelector("#button-send");
+ inputApiKey.value = 'claveinvalida';
+ buttonSend.dispatchEvent(new Event("click"));
+ // Comprueba que no se haya llamado a las funciones de setApiKey ni navigateTo
+ expect(setApiKey).not.toHaveBeenCalled();
+ expect(navigateTo).not.toHaveBeenCalled();
+ // Limpia el modal del DOM
+ document.body.removeChild(modal);
+ });
+
+ test('it should clear key', () => {
+ const modal = ApiModal('/ruta-de-redireccion');
+ document.body.appendChild(modal);
+ const inputApiKey = modal.querySelector("#ApiKey");
+ const buttonClear = modal.querySelector("#button-clear");
+ inputApiKey.value = 'clave';
+ buttonClear.dispatchEvent(new Event("click"));
+ expect(removeApiKey).toHaveBeenCalled();
+ expect(inputApiKey.value).toBe('');
+ document.body.removeChild(modal);
+ });
+});
\ No newline at end of file
diff --git a/test/Footer.spec.js b/test/Footer.spec.js
new file mode 100644
index 00000000..31ac2112
--- /dev/null
+++ b/test/Footer.spec.js
@@ -0,0 +1,12 @@
+import { footer } from "../src/components/Footer.js";
+
+describe('describe el footer', () => {
+ it("It should show the footer with an h4 title", () => {
+ const footerElement = footer();
+
+ expect(footerElement).toBeDefined();
+ expect(footerElement.querySelector("h4")).not.toBeNull();
+ expect(footerElement.querySelector("h4").textContent).toBe(" Desarrolladoras: Raiza Gatica y Elizabeth Patiño/ Laboratoria ");
+ })
+})
+
diff --git a/test/Header.spec.js b/test/Header.spec.js
new file mode 100644
index 00000000..91cbb541
--- /dev/null
+++ b/test/Header.spec.js
@@ -0,0 +1,14 @@
+import { header } from "../src/components/Header.js";
+
+describe('describe el header', () => {
+ it("It should show the header with the image and title", () => {
+ // Actuar: Crear el header
+ const headerElement = header();
+
+ expect(headerElement).toBeDefined(); // Verifica que el header se ha creado
+ expect(headerElement.querySelector("img")).not.toBeNull();
+ expect(headerElement.querySelector("h1")).not.toBeNull();
+ expect(headerElement.querySelector("h1").textContent).toBe("EL MUNDO A TRAVÉS DE GRANDES ESCRITORAS");
+ });
+});
+
diff --git a/test/Individual.spec.js b/test/Individual.spec.js
new file mode 100644
index 00000000..c7b0ec44
--- /dev/null
+++ b/test/Individual.spec.js
@@ -0,0 +1,48 @@
+import { individual } from "../src/Components/Individual.js";
+import { navigateTo } from "../src/router.js";
+
+const mockData = [
+ {
+ id: "001",
+ imageUrl: "imagen.jpg",
+ name: "Nombre",
+ description: "Description",
+ }
+];
+
+describe("individual", () => {
+
+ it("should create individual view", () => {
+ const individualView = individual(mockData[0]);
+ expect(individualView).toBeDefined();
+ });
+
+ it("should send chat grupal", () => {
+ const individualContainer = document.createElement("div");
+ document.body.appendChild(individualContainer);
+ // Espera para asegurarnos de que el contenido se renderice completamente
+ setTimeout(() => {
+ const buttonchatGrupal = individualContainer.querySelector("#buttonchatGrupalI");
+ buttonchatGrupal.dispatchEvent(new Event("click"));
+ expect(navigateTo).toHaveBeenCalledWith('/group');
+ }, 50);
+ });
+
+ /* it("should send chat grupal", () => {
+ // Renderiza el componente individual y obtén su contenedor
+ const individualContainer = document.createElement("div");
+ //document.body.appendChild(individualContainer);
+ // Obtiene el botón de chat grupal
+ const buttonchatGrupal = individualContainer.querySelector("#buttonchatGrupalI");
+ // Simula un clic en el botón de chat grupal
+ buttonchatGrupal.dispatchEvent(new Event("click"));
+ // Verifica que la función navigateTo('/group') se haya llamado al hacer clic en el botón
+ expect(navigateTo).toHaveBeenCalledWith('/group');
+ }); */
+})
+
+
+
+
+
+
diff --git a/test/NotFound.spec.js b/test/NotFound.spec.js
new file mode 100644
index 00000000..ebf8907a
--- /dev/null
+++ b/test/NotFound.spec.js
@@ -0,0 +1,13 @@
+import { notFound } from "../src/components/NotFound.js";
+
+describe('describe NotFound', () => {
+ it("It should show the NotFound with image, text and button", () => {
+ const notFoundElement = notFound();
+
+ expect(notFoundElement).toBeDefined();
+ expect(notFoundElement.querySelector("h1")).not.toBeNull();
+ expect(notFoundElement.querySelector("img")).not.toBeNull();
+ expect(notFoundElement.querySelector("button")).not.toBeNull();
+ });
+});
+
diff --git a/test/apiKey.spec.js b/test/apiKey.spec.js
new file mode 100644
index 00000000..27ce05d0
--- /dev/null
+++ b/test/apiKey.spec.js
@@ -0,0 +1,16 @@
+import { getApiKey, setApiKey} from "../src/lib/apiKey";
+
+describe("getApiKey", () => {
+ it("it should return the value of the API Key", () => {
+ window.localStorage.setItem("apiKeyValue", "ingresando123");
+ expect(getApiKey()).toBe("ingresando123");
+ });
+});
+
+describe("setApiKey", () => {
+ it("it should set apiKey correctly", () => {
+ setApiKey("ingresando123")
+ const keySpec = window.localStorage.getItem("apiKeyValue");
+ expect(keySpec).toBe("ingresando123");
+ });
+});
\ No newline at end of file
diff --git a/test/data.js b/test/data.js
new file mode 100644
index 00000000..6e618d7c
--- /dev/null
+++ b/test/data.js
@@ -0,0 +1,75 @@
+// Aqui puedes agregar los datos que necesites para tus pruebas
+// al menos debe tener uno que se llame "data"
+
+export const data = [
+ {
+ "id": "001",
+ "name": "Jane Austen",
+ "shortDescription": "Escritora británica conocida por sus novelas románticas realistas.",
+ "description": "Jane Austen, destacada novelista británica del siglo XIX, es reconocida por explorar la condición de las mujeres y realizar agudas críticas sociales en sus obras. Entre sus novelas más famosas se encuentran 'Orgullo y prejuicio', 'Emma' y 'Sentido y sensibilidad'. Austen dejó un impacto duradero en la literatura inglesa gracias a su agudo ingenio y estilo literario distintivo, que capturan la sociedad de su tiempo. Su legado perdura a través de generaciones, y sus escritos continúan siendo apreciados por su profunda observación de la naturaleza humana y su aguda representación de la sociedad de la época",
+ "imageUrl": "https://i.postimg.cc/25MJ3ZZK/001-Jane-Austen.png",
+ "facts": {
+ "yearOfBirth": "1775",
+ "yearOfDeath": "1817",
+ "birthPlace": "Steventon, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBooks": "Orgullo y Prejuicio"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "002",
+ "name": "Amy Tan",
+ "shortDescription": "Escritora estadounidense conocida por sus obras sobre la experiencia china-americana.",
+ "description": "Amy Tan, nacida en Oakland, California, en 1952, es una reconocida escritora estadounidense de origen chino. Su obra más conocida, 'El club de la buena estrella', explora la compleja relación entre madres e hijas inmersas en la cultura china-americana. Tan, hábil narradora, ha abordado temas de identidad, familia y legado cultural en novelas como 'Hijas de la fortuna' y 'El valle del asombro'. Su capacidad para tejer historias con sensibilidad y empatía le ha valido el reconocimiento internacional, consolidándola como una destacada voz en la literatura contemporánea que celebra la diversidad cultural y la conexión humana.",
+ "imageUrl": "https://i.postimg.cc/FKdCtHBg/002-Amy-Tan.png",
+ "facts": {
+ "yearOfBirth": "1952",
+ "birthPlace": "Oakland, California, EE. UU.",
+ "countryNacimiento": "EE. UU.",
+ "mainField": "Literatura",
+ "famousBook": "Hijas de la suerte"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "003",
+ "name": "Virginia Woolf",
+ "shortDescription": "Escritora británica modernista, pionera en la técnica narrativa.",
+ "description": "Virginia Woolf (1882-1941), novelista y ensayista británica, es una de las figuras más influyentes del modernismo literario. Su obra, que incluye 'La señora Dalloway' y 'Al faro', destaca por su exploración psicológica y experimentación narrativa. Woolf, co-fundadora del grupo literario Bloomsbury, abordó temas como la condición de la mujer y la naturaleza efímera de la vida. Su prosa innovadora y su enfoque en la conciencia individual la han establecido como una pionera literaria. A pesar de los desafíos personales, su legado perdura, influyendo en generaciones de escritores y destacando su contribución duradera a la literatura moderna.",
+ "imageUrl": "https://i.postimg.cc/13zYHH0d/003-Virginia-Woolf.png",
+ "facts": {
+ "yearOfBirth": "1882",
+ "yearOfDeath": "1941",
+ "birthPlace": "Londres, Reino Unido",
+ "countryNacimiento": "Reino Unido",
+ "mainField": "Literatura",
+ "famousBook": "La señora Dalloway"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+ {
+ "id": "004",
+ "name": "Isabel Allende",
+ "shortDescription": "Escritora chilena conocida por su realismo mágico y sus novelas históricas.",
+ "description": "Isabel Allende es una destacada escritora cuya obra ha cautivado la atención mundial. Reconocida por su estilo de realismo mágico y sus narrativas históricas, algunas de sus obras más conocidas incluyen 'La casa de los espíritus' y 'Eva Luna'. Allende ha dejado una marca indeleble en la literatura contemporánea latina, tejiendo historias emotivas y complejas que abordan temas sociales y políticos. A lo largo de su carrera, ha recibido numerosos premios, destacando su contribución a la literatura latinoamericana y su dedicación a la justicia social.",
+ "imageUrl": "https://i.postimg.cc/X74PZ3r4/004-Isabel-Allende.png",
+ "facts": {
+ "yearOfBirth": "1942",
+ "birthPlace": "Lima, Perú",
+ "countryNacimiento": "Chile",
+ "mainField": "Literatura",
+ "famousBook": "La casa de los espíritus"
+ },
+ "extraInfo": {
+ "imageSource": "https://www.canva.com/design/DAF5m8QT6AQ/YcmdwNC1ccb9Edu-GefCRg/edit"
+ }
+ },
+];
\ No newline at end of file
diff --git a/test/dataFunctions.spec.js b/test/dataFunctions.spec.js
new file mode 100644
index 00000000..1a3ae7fb
--- /dev/null
+++ b/test/dataFunctions.spec.js
@@ -0,0 +1,46 @@
+import { filterData, sortData, computeStats } from '../src/lib/dataFunctions.js';
+import { data as fakeData } from './data.js'
+
+describe('filterData', () => {
+ it('Filtrado de datos por genero', () => {
+ const result = filterData(fakeData, 'mainField', 'Literatura');
+ expect(result).toHaveLength(4);
+ result.forEach((writer) => {
+ expect(writer.facts.mainField).toBe('Literatura');
+ });
+ });
+
+ it('should filter data by countryNacimiento', () => {
+ const result = filterData(fakeData, 'countryNacimiento', 'Reino Unido');
+ expect(result).toHaveLength(2);
+ result.forEach((writer) => {
+ expect(writer.facts.countryNacimiento).toBe('Reino Unido');
+ });
+ });
+});
+
+describe('sortData', () => {
+ it('Ordena los nombres de manera Ascendente ', () => {
+ const result = sortData(fakeData, { sortBy: 'name', sortOrder: 'asc' });
+ expect(result[0].name).toBe('Amy Tan');
+ expect(result[1].name).toBe('Isabel Allende');
+ expect(result[2].name).toBe('Jane Austen');
+ expect(result[3].name).toBe('Virginia Woolf');
+ });
+
+ it('Ordena los nombres de manera Descendente', () => {
+ const result = sortData(fakeData, { sortBy: 'name', sortOrder: 'desc' });
+ expect(result[0].name).toBe('Virginia Woolf');
+ expect(result[1].name).toBe('Jane Austen');
+ expect(result[2].name).toBe('Isabel Allende');
+ expect(result[3].name).toBe('Amy Tan');
+ });
+});
+
+describe('computeStats', () => {
+ it('Calcula estadisticas', () => {
+ const result = computeStats(fakeData);
+ expect(result.countries).toEqual({ 'Reino Unido': 2, 'EE. UU.': 1, 'Chile': 1 });
+ expect(result.genres).toEqual({ 'Literatura': 4 });
+ });
+});
\ No newline at end of file
diff --git a/test/openAIApi.spec.js b/test/openAIApi.spec.js
new file mode 100644
index 00000000..c9e94483
--- /dev/null
+++ b/test/openAIApi.spec.js
@@ -0,0 +1,45 @@
+import { communicateWithOpenAI } from "../src/lib/openAIApi.js";
+
+jest.mock("../src/lib/apiKey.js", () => ({
+ getApiKey: jest.fn()
+}));
+const response = {
+ index: 0,
+ message: {
+ role: "system",
+ content: "este es un mensaje del sistema",
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+};
+
+// función mock para comunicarnos con la API de OpenAI
+// const mockFetch = jest.fn();
+// eslint-disable-next-line no-undef
+global.fetch = jest.fn(()=> Promise.resolve({
+ json: () => Promise.resolve(response)
+}))
+
+// función de comunicación con la API como un parámetro
+describe("communicateWithOpenAI", () => {
+ test.only("Should return a response from the API in string",
+ async () => {
+
+ //simula el prompt y una escritora
+ const prompt = " prompt";
+ const writer = {description: "descripción de la escritora"};
+
+ //espera respuesta
+ const result = await communicateWithOpenAI(prompt,writer);
+
+ expect(typeof result).toBe('object');
+ expect(result.message.content).toBe("este es un mensaje del sistema");
+ })
+})
+
+
+
+
+
+
+
diff --git a/test/router.spec.js b/test/router.spec.js
new file mode 100644
index 00000000..7240843f
--- /dev/null
+++ b/test/router.spec.js
@@ -0,0 +1,44 @@
+import {
+ setRootElement,
+ setRoutes,
+ navigateTo,
+ onURLChange
+} from "../src/router.js";
+
+// Mocking the DOM elements
+document.body.innerHTML = '
';
+const rootElement = document.getElementById('app');
+
+// Mocking routes
+const mockRoutes = {
+ '/': () => document.createTextNode('Home Page'),
+ '/about': () => document.createTextNode('About Page'),
+ '/error': () => document.createTextNode('Error Page')
+};
+
+// Test for setRootElement function
+test('setRootElement function sets the root element correctly', () => {
+ setRootElement(rootElement);
+ expect(rootElement).toEqual(document.getElementById('app'));
+});
+
+// Test for setRoutes function
+test('setRoutes function sets the routes correctly', () => {
+ setRoutes(mockRoutes);
+ expect(mockRoutes).toEqual(mockRoutes);
+});
+
+// Test for navigateTo function
+test('navigateTo function navigates to the correct route', () => {
+ const pathname = '/about';
+ navigateTo(pathname);
+ expect(rootElement.innerHTML).toContain('About Page');
+});
+
+// Test for onURLChange function
+test('onURLChange function changes the URL correctly', () => {
+ const pathname = '/error';
+ window.history.pushState({}, '', pathname);
+ onURLChange(pathname);
+ expect(rootElement.innerHTML).toContain('Error Page');
+});
\ No newline at end of file
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..19a1079a
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,15 @@
+{
+ "version": 2,
+ "builds": [
+ {
+ "src": "./src/index.js",
+ "use": "@vercel/node"
+ }
+ ],
+ "routes": [
+ {
+ "src": "/(.*)",
+ "dest": "/src/"
+ }
+ ]
+}
\ No newline at end of file
+ 
+
+Vista chat individual
+
+
+
+Vista chat grupal
+
+
+### Los objetivos generales de este proyecto fueron
* 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
@@ -57,132 +80,64 @@ vistas de la aplicación
## 3. Consideraciones generales
-* Este proyecto se debe resolver en duplas.
-
-* El rango de tiempo estimado para completar el proyecto es de 4 a 5 Sprints.
+* Este proyecto se desarrolló en duplas, en donde participaron Elizabeth Patiño y
+Raiza Gatica.
-* 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.
+* El rango de tiempo que demoramos en completar el proyecto fue de seis sprint.
-* Reutilizar cierta parte del código del proyecto Dataverse, sobre todo el dataset.
- Además debes refactorizar el código para que sea más modular y reutilizable
- implementando nuevas funciones para lograr las funcionalidades requeridas
- en este proyecto.
+* La lógica del proyecto está implementada completamente en JavaScript
+ (ES6+), HTML y CSS.
-* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
- interfaz será desplegada usando cualquiera de estas opciones:
+* El proyecto se despliega en:
[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. Aprovecha 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.
## 4. Funcionalidades
-Como entregable final tendrás una Single Page Application (SPA) que permita,
+Este proyecto es una Single Page Application (SPA) que permite,
además de **visualizar la data, filtrarla, ordenarla y calcular alguna
estadística** tal como se hizo en Dataverse, acceder a una página de detalle
-de cada personaje y poder _interactuar_ con
-los personajes o entidades del set de data que utilizaste anteriormente.
+de cada personaje y poder _interactuar_ con los personajes o entidades del set
+ de data que utilizaste anteriormente.
-Aquí definimos en más detalle las funcionalidades mínimas que debe tener:
+Funcionalidades detalladas:
-* 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
+* La aplicación es _responsive_
+* La aplicación usa 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 debe ser cargada dinámicamente
+ - Cada vista de la aplicación es cargada dinámicamente
mediante JavaScript.
- - Asegurarse de que la URL se actualice de manera acorde a la vista
+ - la URL se actualiza 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 aplicación es 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
+* Al hacer clic en una tarjeta de personaje/entidad, la aplicación se redirige
+ a una vista **con su propia URL** que muestra la información
detallada sobre ese personaje/entidad en particular
-* La aplicación debe permitir a la usuaria configurar la API Key para
+* La aplicación permite 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
+* Usando la API de Open AI, la aplicación permite 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
+* La aplicación permite a la usuaria interactuar de manera simultánea
con **todos** los personajes/entidades a través de un chat:
- - Esta funcionalidad debe cargarse en la URL `/panel`
+ - Esta funcionalidad se carga en la URL `/group`
- 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
+ personajes/entidades en un cuadro de texto y enviarlo con el botón enviar.
+ - El mensaje de la usuaria es ajustado para cada escritora.
- 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 aplicación 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.
+
+La aplicación se integra con la IA a través de la API de OpenAI.
## 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).
+La lógica del proyecto está implementada completamente en JavaScript
+(ES6), HTML y CSS.
-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:
+El _boilerplate_ tiene una estructura general organizada de la siguiente manera:
```text
.
@@ -207,76 +162,50 @@ La siguiente es una estructura de archivos que recomendamos:
### `src/components`
-Esta carpeta contendrá archivos JavaScript
+Esta carpeta contiene 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.
+reutilizables de tu aplicación.
### `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).
+En esta carpeta están los datos de las escritoras, los cuales fueron generados
+por medio de 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.
+En esta carpeta, están los módulos con funcionalidades no relacionadas
+al DOM.
### `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.
+En esta carpeta están las vistas.
### `src/index.html`
-Como en el proyecto anterior, existe un archivo `index.html`. En este archivo
+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.
+El punto de partida para tu SPA sera el archivo `src/index.js`.
### `src/router.js`
-En este archivo vas a manejar el enrutamiento de tu aplicación. Es un archivo
-que debes crearlo por tu cuenta.
+En este archivo se maneja el enrutamiento de tu aplicación.
### `src/style.css`
-Es un archivo que debes crearlo por tu cuenta para agregar los estilos que
-necesites para tu aplicación.
+Se almacenan los estilos de la aplicación.
### `src/test`
-Esta carpeta contiene los tests de tus funciones y componentes. Por ejemplo
-los tests de dataFunctions deben estar aquí.
+Esta carpeta contiene los tests de funciones y componentes.
## 6. Hitos
-Para resolver un problema,
-es importante comprenderlo en profundidad.
-Una forma de hacerlo es descomponerlo en problemas más pequeños.
-Esto nos ayudará a identificar las causas del problema y
-a desarrollar soluciones más efectivas.
-
-En este proyecto, te sugerimos que trabajes por hitos.
-Esto te permitirá enfocarte en un problema a la vez y
-hacer un seguimiento de tu progreso.
-A continuación, te presentamos un cronograma de hitos que
-te puede ayudar a organizar tu trabajo.
+A continuación se relacionan los hitos y objetivos de aprendizaje con los que
+trabajamos en este proyecto.
* [Hito 1](./docs/01-milestone.md)
* [Hito 2](./docs/02-milestone.md)
@@ -286,526 +215,59 @@ te puede ayudar a organizar tu trabajo.
## 7. Criterios de aceptación mínimos del proyecto
-Además de las funcionalidades que definimos en la sección de
-[Funcionalidades](#4-funcionalidades), tu proyecto debe cumplir con los
-siguientes requisitos:
+Este proyecto cumple con los siguientes ítems:
### Definición del producto
-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.
+En el archivo `README.md` se comenta cuál fue
+el proceso de diseño y el problema que resuelvió.
### Historias de usuaria
-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.
-
-Usa tus historias de usuaria para planificar tus sprints dividiendo
-cada historia en tareas.
-
-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).
+Se relacionan las historias de usuarias y su impacto en
+el diseño del pryecto.
### Diseño de la Interfaz de Usuaria
-#### Prototipo de baja fidelidad
-
-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`.
-
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
-
-#### Prototipo de alta fidelidad
-
-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.
-
-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_.
-
-Recuerda pedir feedback de tu prototipo a tus compañeras y/o coaches.
+Se presentan los bocetos de diseño del proyecto.
### 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.
-
-### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)
-
-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.
+Se hacen testeos de usabilidad.
### 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).
-
-## 8. 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**
-
- 
+ 