diff --git a/Imagenes/Batman_el_Caballero_de_la_Noche.webp b/Imagenes/Batman_el_Caballero_de_la_Noche.webp
new file mode 100644
index 00000000..8fdce46b
Binary files /dev/null and b/Imagenes/Batman_el_Caballero_de_la_Noche.webp differ
diff --git a/Imagenes/La_La_Land.webp b/Imagenes/La_La_Land.webp
new file mode 100644
index 00000000..96613800
Binary files /dev/null and b/Imagenes/La_La_Land.webp differ
diff --git a/Imagenes/Lion_king_1.webp b/Imagenes/Lion_king_1.webp
new file mode 100644
index 00000000..0f2e303c
Binary files /dev/null and b/Imagenes/Lion_king_1.webp differ
diff --git a/Imagenes/avatar.jpg b/Imagenes/avatar.jpg
new file mode 100644
index 00000000..b3d2c532
Binary files /dev/null and b/Imagenes/avatar.jpg differ
diff --git a/Imagenes/buscando-a-nemo.jpeg b/Imagenes/buscando-a-nemo.jpeg
new file mode 100644
index 00000000..7d1227d8
Binary files /dev/null and b/Imagenes/buscando-a-nemo.jpeg differ
diff --git a/Imagenes/coco.jpeg b/Imagenes/coco.jpeg
new file mode 100644
index 00000000..8a691cff
Binary files /dev/null and b/Imagenes/coco.jpeg differ
diff --git a/Imagenes/deadpool.jpeg b/Imagenes/deadpool.jpeg
new file mode 100644
index 00000000..a1e48331
Binary files /dev/null and b/Imagenes/deadpool.jpeg differ
diff --git a/Imagenes/el-padrino.jpeg b/Imagenes/el-padrino.jpeg
new file mode 100644
index 00000000..ac195359
Binary files /dev/null and b/Imagenes/el-padrino.jpeg differ
diff --git a/Imagenes/et-el-extraterrestre.jpg b/Imagenes/et-el-extraterrestre.jpg
new file mode 100644
index 00000000..88a2630e
Binary files /dev/null and b/Imagenes/et-el-extraterrestre.jpg differ
diff --git a/Imagenes/forret-gump.jpeg b/Imagenes/forret-gump.jpeg
new file mode 100644
index 00000000..8d86373a
Binary files /dev/null and b/Imagenes/forret-gump.jpeg differ
diff --git a/Imagenes/gran-hotel-budapest.jpg b/Imagenes/gran-hotel-budapest.jpg
new file mode 100644
index 00000000..cd04e0a4
Binary files /dev/null and b/Imagenes/gran-hotel-budapest.jpg differ
diff --git a/Imagenes/harry-potter-y-la-piedra-filosofal.jpeg b/Imagenes/harry-potter-y-la-piedra-filosofal.jpeg
new file mode 100644
index 00000000..75feddbf
Binary files /dev/null and b/Imagenes/harry-potter-y-la-piedra-filosofal.jpeg differ
diff --git a/Imagenes/inception.jpeg b/Imagenes/inception.jpeg
new file mode 100644
index 00000000..668810b2
Binary files /dev/null and b/Imagenes/inception.jpeg differ
diff --git a/Imagenes/interstellar.jpg b/Imagenes/interstellar.jpg
new file mode 100644
index 00000000..d5464636
Binary files /dev/null and b/Imagenes/interstellar.jpg differ
diff --git a/Imagenes/jurassic-park.webp b/Imagenes/jurassic-park.webp
new file mode 100644
index 00000000..1d2d203b
Binary files /dev/null and b/Imagenes/jurassic-park.webp differ
diff --git a/Imagenes/la-red-social.jpeg b/Imagenes/la-red-social.jpeg
new file mode 100644
index 00000000..0d8b4c18
Binary files /dev/null and b/Imagenes/la-red-social.jpeg differ
diff --git a/Imagenes/matrix.webp b/Imagenes/matrix.webp
new file mode 100644
index 00000000..a19f9063
Binary files /dev/null and b/Imagenes/matrix.webp differ
diff --git a/Imagenes/ratatouille.jpg b/Imagenes/ratatouille.jpg
new file mode 100644
index 00000000..1aafdb68
Binary files /dev/null and b/Imagenes/ratatouille.jpg differ
diff --git a/Imagenes/schindler_s_list.jpeg b/Imagenes/schindler_s_list.jpeg
new file mode 100644
index 00000000..51399b19
Binary files /dev/null and b/Imagenes/schindler_s_list.jpeg differ
diff --git "a/Imagenes/se\303\261or-de-los-anillos.jpg" "b/Imagenes/se\303\261or-de-los-anillos.jpg"
new file mode 100644
index 00000000..00a94bc7
Binary files /dev/null and "b/Imagenes/se\303\261or-de-los-anillos.jpg" differ
diff --git a/Imagenes/spider-man-sin-camino-a-casa.jpeg b/Imagenes/spider-man-sin-camino-a-casa.jpeg
new file mode 100644
index 00000000..58034016
Binary files /dev/null and b/Imagenes/spider-man-sin-camino-a-casa.jpeg differ
diff --git a/Imagenes/titanic.jpg b/Imagenes/titanic.jpg
new file mode 100644
index 00000000..3b4d4e29
Binary files /dev/null and b/Imagenes/titanic.jpg differ
diff --git a/Imagenes/toy-story.jpg b/Imagenes/toy-story.jpg
new file mode 100644
index 00000000..93c37ce0
Binary files /dev/null and b/Imagenes/toy-story.jpg differ
diff --git a/Imagenes/wonder-woman.jpg b/Imagenes/wonder-woman.jpg
new file mode 100644
index 00000000..d845de6b
Binary files /dev/null and b/Imagenes/wonder-woman.jpg differ
diff --git a/README.md b/README.md
index c717e841..35249693 100644
--- a/README.md
+++ b/README.md
@@ -1,334 +1,38 @@
 # Dataverse
 
-## Índice
-
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del proyecto](#2-resumen-del-proyecto)
-* [3. Consideraciones generales](#3-consideraciones-generales)
-* [4. Funcionalidades](#4-funcionalidades)
-* [5. Consideraciones técnicas](#5-consideraciones-técnicas)
-* [6. Criterios de aceptación mínimos del proyecto](#6-criterios-de-aceptación-mínimos-del-proyecto)
-* [7. Hacker edition](#7-hacker-edition)
-* [8. Objetivos de aprendizaje](#8-objetivos-de-aprendizaje)
-* [9. Pistas, tips y lecturas complementarias](#9-pistas-tips-y-lecturas-complementarias)
-* [10. Consideraciones para pedir tu Project Feedback](#10-consideraciones-para-pedir-tu-project-feedback)
-
-***
-
-## 1. Preámbulo
-
-Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read),
-el 90% de la data que existe hoy ha sido creada durante los últimos dos años.
-Cada día generamos 2.5 millones de terabytes de datos, una cifra sin
-precedentes.
-
-No obstante, los datos por sí mismos son de poca utilidad. Para que esas
-grandes cantidades de datos se conviertan en **información** fácil de leer para
-las usuarias, necesitamos entender y procesar estos datos. Una manera simple de
-hacerlo es creando _interfaces_ y _visualizaciones_.
-
-En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte
-izquierda se puede construir una interfaz amigable y entendible por las
-usuarias, al lado derecho.
-
-![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png)
-
-## 2. Resumen del proyecto
-
-En este proyecto **construirás una _página web_ para visualizar un
-_conjunto (set) de datos_** que vas a generar con [prompting](https://www.itmadrid.com/que-es-un-prompt-en-inteligencia-artificial-ia/).
-Esta página web se adecuará a lo que descubras que tu usuaria
-necesita.
-
-Además, en este proyecto utilizarás herramientas de
-[inteligencia artificial](https://es.wikipedia.org/wiki/Inteligencia_artificial)
-como [ChatGPT](https://openai.com/chatgpt), [ExplainDev](https://explain.dev/),
-entre otras para generar un set de datos en un archivo javascript.
-
-El propósito de generar los datos en esta manera es brindarte la oportunidad de
-adentrarte en el empleo de herramientas impulsadas por la inteligencia
-artificial, así como en [técnicas de
-prompting](https://learnprompting.org/es/docs/intro).
-
-Como entregable final tendrás una página web que permita **visualizar la data,
-filtrarla, ordenarla y calcular alguna estadística**. Con estadística
-nos referimos a distintos cálculos que puedes hacer con los datos para mostrar
-información aún más relevante a las usuarias (promedio, el valor máximo
-o mínimo, etc).
-
-## 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.
-* El tiempo estimado que deberías dedicar a la [generación de los datos](#generar-los-datos)
-  es de máximo un sprint. Además, al final del proyecto deberás presentar
-  un [screenshot del prompt utilizado](#prompt-utilizado).
-* Si ves que te va a tomar más tiempo,
-  deberás utilizar los datos de ejemplo que los vas a encontrar en
-  esta ruta: `./src/data/dataset.js`.
-* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
-  interfaz será desplegada usando [GitHub Pages](https://pages.github.com/).
-
-## 4. Funcionalidades
-
-Como entregable final tendrás una página web que permita **visualizar la data,
-filtrarla, ordenarla y calcular alguna estadística**.
-
-Aquí definimos en más detalle las funcionalidades mínimas que debe tener:
-
-* La aplicación debe permitir a la usuaria ver los items de la data en una visualización,
-  que puede ser [tipo tarjetas](http://www.uxables.com/diseno-ux-ui/que-es-y-como-disenar-una-card/)
-  o cualquier otra forma que tú decidas como la adecuada (pero desde aquí
-  referimos a los items como "tarjetas"). **Cada una de las tarjetas debe estar
-  contenida en un elemento `<li>` y estos a su vez contenido en
-  un elemento `<ul>`.**
-
-* El elemento `<ul>` deberá ser hijo de un elemento con atributo _id_
-  de valor "root". **Este es un paso importante para que tu**
-  **aplicación tenga la estructura requerida**
-
-* Las tarjetas deben resaltar los valores de las propiedades de la data que
-  le interesaría a la usuaria ver. Por ejemplo: nombre, fecha, imagen, etc.
-  **Si vas a filtrar u ordenar por una propiedad, la tarjeta tiene que mostrar
-  el valor de esta propiedad a la usuaria.**
-
-* La interfaz debe estructurar semánticamente la data usando el estándar [microdatos](https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata).
-  Es obligatorio usar al menos los atributos [`itemscope`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope),
-  [`itemtype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype)
-  y el atributo [`itemprop`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop).
-
-  Por ejemplo, la siguiente data correspondiente a Ada Lovelace:
-
-  ```json
-    {
-      "id": "ada-lovelace",
-      "name": "Ada Lovelace",
-      "shortDescription": "Pionera de la informática, fue la primera programadora.",
-      "description": "Una visionaria del siglo XIX ...",
-      "imageUrl": "URL_DE_LA_IMAGEN_GENERADA",
-      "facts": {
-        "yearOfBirth": 1843,
-        "placeOfBirth": "London, England",
-        "mainField": "Computer Science",
-      }
-    }
-  ```
-
-  puede ser estructurada semánticamente en HTML como:
-
-  ```html
-  <dl itemscope itemtype="WomenInTech">
-    <img src="URL_DE_LA_IMAGEN_GENERADA" alt="Ada Lovelace" />
-    <dt>Nombre:</dt><dd itemprop="name">Ada Lovelace</dd>
-    <dt>Descripción:</dt><dd itemprop="description">Pionera de la informática, fue la primera programadora.</dd>
-    <dt>Año de nacimiento:</dt><dd itemprop="yearOfBirth">1843</dd>
-    <dt>Lugar de nacimiento:</dt><dd itemprop="placeOfBirth">London, England</dd>
-    <dt>Campo de desempeño:</dt><dd itemprop="mainField">Computer Science</dd>
-  </dl>
-  ```
-
-* La aplicación debe calcular y visualizar una estadística de la data. Puede
-  ser una propiedad computada de cada item, como una propiedad adicional
-  (por ejemplo, el índice de masa corporal de cada pokemon) o unas estadísticas
-  de la data completa (por ejemplo, total de personas nacidas en los años 80s).
-
-* La aplicación debe permitir a la usuaria filtrar la data. Deberás usar
-  un elemento [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
-  con [un atributo de datos](https://developer.mozilla.org/es/docs/Learn/HTML/Howto/Use_data_attributes)
-  `data-testid="select-filter"`, y un atributo `name` con el nombre
-  de la propiedad por la que filtrará (por ejemplo, si vas a filtrar por "type",
-  el `<select>` tendrá  `name="type"`). Los `<option>` de este `<select>` deberán
-  tener en el atributo `value` el valor del filtro (por ejemplo, si vas a filtrar
-  por type "fire" sería `<option value="fire">Fire</option>`).
-
-* La aplicación debe permitir a la usuaria ordenar la data.
-  - Tendrá al menos un control `<select>` para ordenar.
-  - Si usas solo un control `<select>`, debe tener
-    [un atributo de datos](https://developer.mozilla.org/es/docs/Learn/HTML/Howto/Use_data_attributes)
-    `data-testid="select-sort"` y un atributo `name` con el nombre de la
-    propiedad por la que ordenará. (por ejemplo, si vas a ordenar por
-    "num" seria `name="num"`). Este `<select>` tendrá dos [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)
-    con `value` `asc` y `desc`, para ordenar ascendente y descendente la data
-    respectivamente (por ejemplo, `<option value="asc">A - Z</option>`).
-  - Una alternativa es ofrecer la usuaria un ordenamiento mas complejo.
-    Podrías implementar ordenar por varios propiedades. En este caso sería con
-    un `<select>` con un atributo de datos `data-testid="select-sort"`, y que
-    contiene hijos `<option>` con un `value` del nombre de la propiedad con
-    cual vas a ordenar. (Por ejemplo, `<option value="name">Nombre</option>`).
-    También, necesitarás otro control (`<radio>`,`<select>`, etc.) para decir
-    que el ordenamiento es ascendente o descendente. Este control secundaria
-    tendrá un atributo `name="sort-order"`, y tiene values `asc` y `desc`.
-
-* Las funcionalidades de ordenar deben operar sobre la data filtrada.
-  Por ejemplo, si filtro los pokemones de tipo fuego y luego los ordeno por
-  nombre ascendentemente, la aplicación deberá mantener el filtro aplicado y
-  ordenar los pokemones de tipo fuego.
-
-* La aplicación debe permitir a la usuaria reiniciar la aplicación, limpiando
-  filtros y ordenamiento, con un `<button>` con un atributo de datos
-  `data-testid="button-clear"`.
-
-* Las operaciones de filtrar, ordenar, limpiar, etc. no deben recargar
-  la página, si no que deben agregar el contenido en una manera
-  dinámica via javascript.
-
-* La aplicación será _responsive_, es decir, debe visualizarse sin problemas
-  desde distintos tamaños de pantallas: móviles, tablets y desktops.
-
-Los siguientes wireframes, son ejemplos de una interfaz que puede cumplir con esta
-funcionalidad. Como podrás ver, estos diseños cumplen con la metodología
-[Mobile First](https://developer.mozilla.org/es/docs/Glossary/Mobile_First), la misma
-que te recomendamos utilizar en todos tus proyectos:
-
-Diseño Mobile:
-
-* [Wireframe mobile 1](https://github.com/Laboratoria/curriculum/assets/123121338/54711bb7-cb05-448e-b677-3cbd9bf13c14)
-* [Wireframe mobile 2](https://github.com/Laboratoria/curriculum/assets/123121338/bf96d3ce-150f-47a2-a605-2efac2e0497b)
-
-Diseño Desktop:
-
-* [Wireframe desktop 1](https://github-production-user-asset-6210df.s3.amazonaws.com/92090/261137084-1625aeb8-883c-4b79-86da-5fab34fa5b88.png)
-* [Wireframe desktop 2](https://github-production-user-asset-6210df.s3.amazonaws.com/92090/261137087-6cef16bc-643a-4d6d-bc1c-e0daaeb21c88.png)
-
-## 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),
-con la excepción de librerías para hacer gráficas (charts); ver
-[_Parte opcional_](#7-hacker-edition) más arriba.
-
-El _boilerplate_ contiene una estructura de archivos como punto de partida así
-como toda la configuración de dependencias:
-
-```text
-.
-├── README.md
-├── package.json
-├── src
-|  ├── data 
-|  |  └── dataset.js (La que hayas generado con la IA)
-|  ├── dataFunctions.js
-|  ├── view.js
-|  ├── index.html
-|  ├── main.js
-|  └── style.css
-└── test
-   └── data.js
-   └── dataFunctions.spec.js
-   └── tests-read-only
-
-```
-
-### `src/index.html`
-
-Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes,
-acá va la página que se mostrará a la usuaria. También nos sirve para indicar
-qué scripts se usarán y unir todo lo que hemos hecho.
-
-### `src/main.js`
-
-Recomendamos usar `src/main.js` para todo tu código que tenga que ver con
-mostrar los datos en la pantalla. Con esto nos referimos básicamente a la
-interacción con el DOM. Operaciones como creación de nodos, registro de
-manejadores de eventos (_event listeners_ o _event handlers_).
-
-Esta no es la única forma de dividir tu código, puedes usar más archivos y
-carpetas, siempre y cuando la estructura sea clara para tus compañeras.
-
-En este archivo encontrarás una serie de _imports_ listos para _cargar_
-las diferentes fuentes de datos.
-
-Por ejemplo, lost datos con los que vas a trabajar,
-los encontrarás en la siguiente línea:
-
-```js
-import data from './data/dataset.js';
-```
-
-### `src/dataFunctions.js`
-
-El corazón de este proyecto es la manipulación de datos a través de arreglos
-y objetos.
-
-Este archivo va a contener toda la funcionalidad que corresponda
-a obtener, procesar y manipular datos (tus funciones). Por ejemplo:
-
-* `filterData(data, filterBy, value)`: esta función recibe tres parámetros.
-  El primer parámetro, `data`, nos entrega los datos.
-  El segundo parámetro, `filterBy`, nos dice con respecto a cuál de los campos de
-  la data se quiere filtrar.
-  El tercer parámetro, `value`, indica el valor de campo que queremos filtrar.
-
-* `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar
-  recibe tres parámetros.
-  El primer parámetro, `data`, nos entrega los datos.
-  El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de
-  la data se quiere ordenar.
-  El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera
-  ascendente o descendente.
-
-* `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer
-  cálculos estadísticos básicos para ser mostrados de acuerdo a la data
-  proporcionada, esta función debe usar el método reduce.
-
-Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d)
-e independientes del DOM. Estas funciones serán después usadas desde el archivo
-`src/main.js`, al cargar la página, y cada vez que la usuaria interactúe
-(click, filtrado, ordenado, ...).
-
-### `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).
-
-### `test/dataFunctions.spec.js`
+## 1. Resumen del proyecto
 
-En este archivo tendrás hacer pruebas unitarias de las funciones
-implementadas en el archivo `dataFunctions.js`. (`filterBy`, `sortBy`, etc.)
+En nuestro proyecto se construyo una pagina de peliculas recomendadas que nos permita filtrar las peliculas por genero y organizarlas tambien por alfabeto (A-Z). Nuestro set de datos fueron generados usando CharGPT, donde le indicamos al prompt las especificaciones de los datos requeridos. 
 
-### `test/data.js`
+Adicionalmente le agregamos dos botones que le permita al usuario acceder a estadisticas, una de ellas muestra el promedio y suma total de ingresos producidos por genero y la segunda muestra los premios ganados por genero y total.
+ La interfaz es simple y facil de explorar para el usuario y los botones son faciles de visualizar. 
 
-En esta archivo puedes construir y exportar data "mock" para usar en los tests.
-Es mas fácil probar un arreglo de 5 elementos de un arreglo de 24, por eso
-vas a crear una muestra de la data que quieres probar. Como mínimo
-debes exportar un variable se llama `data`, pero puedes definir y exportar mas
-si sea necesario para tus tests.
 
-### `src/view.js`
 
-Para alcanzar mejor separación de responsabilidades en el código este
-archivo debe tener todas las funciones que utilizara para renderizar
-los elementos dinámicamente.
+## 2. Funcionalidades
 
-Al menos se requeriere una función obligatoria:
-
-* `renderItems(data)`: esta función recibe el arreglo de data para renderizar
-  los elementos de cada item, y debería volver un elemento DOM o
-  un string de HTML.
-
-## 6. Criterios de aceptación mínimos del proyecto
+Parte de nuestro proyecto es cubrir los requerimientos que pide, entonces nuestro objetivos claro son: 
+-Que se pueda visualizar la data
+-La aplicación debe calcular y visualizar una estadística de la data.
+-La aplicación debe permitir a la usuaria filtrar la data. 
+-La aplicación debe permitir a la usuaria ordenar la data.
+-La aplicación debe permitir a la usuaria reiniciar la aplicación, limpiando
+  filtros y ordenamiento, con un `<button>` con un atributo de datos
+  `data-testid="button-clear"`.
+-Las operaciones de filtrar, ordenar, limpiar, etc. no deben recargar la página, si no que deben agregar el contenido en una manera dinámica via javascript.
 
-### Criterios de código
+* La aplicación será _responsive_, es decir, debe visualizarse sin problemas
+  desde distintos tamaños de pantallas: móviles, tablets y desktops.
 
-Con cada objetivo de aprendizaje, evaluamos que el código cumpla con algunos
-criterios. Lo cual no excluye que puedas usar otras opciones, por ejemplo
-en el caso de los selectores, proponemos el uso de `querySelector`,
-no significa que no puedes usar `querySelectorAll` o `getElementId` también.
+<p align="center">
+<img src="./src/data.png">
+</p>
 
-Puedes ejecutar las pruebas de cada grupo de objetivos de aprendizaje de manera
-individual con los siguientes comandos:
 
-``` sh
-npm run test:oas-html
-npm run test:oas-css
-npm run test:oas-web-api
-npm run test:oas-js
-npm run test:oas-prompting
-npm run test:oas // Esto es para correr todos los tests de OAs
-```
+### 3. Criterios de aceptación mínimos del proyecto
 
-#### HTML
+Nuestro proyecto cumple con los requerimientos que necesitamos para que el proyecto tenga la funcionalidad para que podamos procesar y manipular datos.
+Por ejemplo:
 
 * **Uso de HTML semántico**
 
@@ -339,7 +43,7 @@ npm run test:oas // Esto es para correr todos los tests de OAs
   - [ ] `<ul>` esta usado para dibujar la data
   - [ ] Los hijos de `<li>` usan attributos de microdata `itemscope` e `itemprop`
 
-#### CSS
+CSS
 
 * **Uso de selectores de CSS**
 
@@ -348,7 +52,7 @@ npm run test:oas // Esto es para correr todos los tests de OAs
   - [ ] Uso de flexbox para el elemento que contiene los items
   - [ ] Uso de flexbox para el elemento que contiene los UI inputs
 
-#### Web APIs
+Web APIs
 
 * **Uso de selectores del DOM**
 
@@ -397,8 +101,6 @@ npm run test:oas // Esto es para correr todos los tests de OAs
     y devuelve el arreglo ordenado
   - [ ] una función `filterBy` que tiene 3 parámetros (`data`, `filterBy`, `value`)
     y devuelve el arreglo filtrado
-  - [ ] una función `computeStats` que tiene al menos un parámetro (`data`)
-    y devuelve un valor computado
 
   Más sobre estos puntos en [la sección dataFunctions.js](#src/dataFunctions.js)
 
@@ -408,7 +110,6 @@ npm run test:oas // Esto es para correr todos los tests de OAs
   - [ ] Uso de [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
     o [Array.prototype.toSorted - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted)
   - [ ] Uso de [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
-  - [ ] Uso de [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
   - [ ] Uso de [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
   - [ ] Uso de [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
 
@@ -423,550 +124,58 @@ npm run test:oas // Esto es para correr todos los tests de OAs
     y [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)
     para importar y exportar valores desde un modulo JavaScript.
 
-### Criterios del proyecto
-
-#### 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.
 
 #### Historias de usuario
 
-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 Usuario** 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 usuario para planificar tus sprints dividiendo
-cada historia en tareas.
-
-En la medida de lo posible, termina una Historia de Usuario antes de pasar
-a la siguiente (cumpliendo con la Definición de Terminado y los Criterios de Aceptación).
-
-#### Generar los datos
-
-La temática será a tu gusto, por ejemplo, pueden ser personajes importantes
-en la historia, personajes inventados, países, películas... etc.
-
-En el próximo proyecto, con la ayuda de la inteligencia artificial, deberás
-hacer que la usuaria pueda chatear con la data generada.
-Por ejemplo, si la data está mostrando un país, la usuaria podría
-preguntarle en que año fue fundado o cual es su capital, etc.
-Tenlo en cuenta a la hora de generar tu dataset.
-
-Esta data la vas a guardar en un archivo javascript. Este archivo,
-debe exportar un arreglo con 24 objetos. Y la estructura de cada objeto
-debe ser la siguiente:
-
-* `id`: Identificador único (no pueden haber dos elementos con el mismo `id`).
-  Debe ser un string de no más de 32 characteres, en minúscula, compuesto solo
-  por letras, números, underscore (`_`) o guión (`-`). Por ejemplo: `"ada-lovelace"`.
-* `name`: El nombre del personaje, país, película, etc.
-* `shortDescription`: Descripción corta del elemento. Esta descripción deberá
-  tener como máximo 20 palabras.
-* `description`: Descripción extendida del elemento. Esta descripción deberá
-  tener entre 80 y 100 palabras. Al momento de mostrar este dato en pantalla
-  puedes truncarlo para que no ocupe tanto espacio.
-* `imageUrl`: URL de la imagen. Esta imagen será generada a través de alguna
-  herramienta basada en inteligencia artifical. Una vez generada la imagen,
-  y guardada en tu repo, deberás agregar la URL en este campo.
-* `facts`: Un objeto con al menos **3** "hechos" o "info" sobre este elemento, en
-  formato `"nombre": "valor"`, por ejemplo:
-
-  ```json
-  "facts": {
-    "yearOfBirth": 1843,
-    "placeOfBirth": "London, England",
-    "mainField": "Computer Science",
-  }
-  ```
-
-  Los _nombres de las propiedades_, deben estar en formato _camelCase_.
-  Por ejemplo **ninguno** de los siguientes nombres sería válido:
-
-  ```json
-  "facts": {
-    "year_of_birth": 1843,
-    "Place of Birth": "London, England",
-    "MainField": "Computer Science",
-  }
-  ```
-
-  Los _valores de las propiedades_, sólo pueden ser de tipo `number`, `boolean`
-  o un `string` de no más de 64 caracteres (este **no** tiene restricciones sobre
-  el tipo de caracteres que puede contener).
-
-  Y por último ten en cuenta 2 cosas:
-  - Todos los elementos del dataset deben compartir las mismas propiedades en
-    `facts`, es decir, que si un elemento tiene una propiedad `yearOfBirth`,
-    el resto de elementos del array también deben tener esa propiedad.
-  - No es necesario que los nombres de las propiedades estén en inglés,
-    `"lugarDeNacimiento"` es un nombre igual de válido.
-
-* `extraInfo`: Y por último un campo libre opcional, similar a `facts`. Si lo
-  necesitas, aquí puedes poner cualquier otro tipo de información en formato
-  donde puedes poner otra info que necesites en formato `"nombre": "valor"`,
-  pero sin restricciones sobre el tipo de dato del valor. Por ejemplo:
-
-  ```json
-  "extraInfo": {
-    "imagePrompt": "Un texto bien, bien largo...",
-    "writings": [
-      "Vol. 1",
-      "Vol. 2",
-      "Vol. 3",
-      "Vol. 4"
-    ]
-  }
-  ```
-
-Un ejemplo de data, según los requisitos anteriores podría ser:
-
-```js
-export default [
-  {
-    "id": "ada-lovelace",
-    "name": "Ada Lovelace",
-    "shortDescription": "Pionera de la informática, fue la primera programadora.",
-    "description": "Una visionaria del siglo XIX ...",
-    "imageUrl": "URL_DE_LA_IMAGEN_GENERADA",
-    "facts": {
-      "yearOfBirth": 1843,
-      "placeOfBirth": "London, England",
-      "mainField": "Computer Science",
-    }
-  },
-  //... 23 objetos más
-]
-```
-
-La data generada deberás reemplazarla por el contenido de este archivo:
-`./src/data/dataset.js`.
-
-**El tiempo estimado que deberías dedicar a la generación de estos datos
-es de máximo un sprint.** Si transcurrido un sprint, no tienes un
-conjunto de datos generados, deberás
-utilizar los datos de ejemplo ubicados en la ruta:
-`./src/data/dataset.js`.
-
-Las URLs de las imágenes dentro del archivo javascript, deben enlazar
-a las imágenes para cada elemento del array.
-Estas imágenes pueden ser generadas por la inteligencia artificial o imágenes
-que puedas encontrar en la web.
-Para la generación de imágenes te recomendamos usar el
-[generador de imágenes de Bing](https://www.bing.com/create).
-Una vez que tengas la imagen, descárgala u obtiene su URL, para agregársela
-al dataset.
-
-Una vez que tengas el archivo javascript completo, recuerda correr los test con
-`npm run test` para verificar que el archivo esté cumpliendo con lo
-solicitado.
-
-Una vez que hayas delimitado tu campo de interés y generado el archivo
-javascript con la asistencia de la inteligenica artificial, dedica
-tiempo a comprender a fondo a tu usuaria y sus
-necesidades específicas. A partir de esta comprensión, podrás diseñar la
-interfaz que facilite una interacción más efectiva y una comprensión más
-completa de los datos presentados.
-
-#### Prompt utilizado
-
-Dentro del readme que armarás, debe incluir una captura de pantalla
-de tu prompt utilizado para generar los datos. Si utilizaste varios prompts,
-puedes adjuntar todas las capturas que necesites.
+Entrevistamos a un grupo de personas respecto a nuestro proyecto y comparamos las ideas para poder observar los patrones. Despues separamos los intereses mas comunes entre las usuarias y organizamos los pasos a seguir para diseñar nuestro prototipo.
 
 #### Diseño de la Interfaz de Usuaria
 
-##### Prototipo de alta fidelidad
-
-Usando los wireframes o bocetos (_sketches_) de tu solución de interfaz
-como base, 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.
-
-#### 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](#3-funcionalidades) que el proyecto pide del interfaz.
-
-#### Pruebas unitarias
-
-El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es
-que  tendrás que escribirlas tú para las funciones encargadas de  _procesar_,
-_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. Este proyecto usa
-el framework [Jest](https://jestjs.io/) para ejecutar las pruebas unitarias por lo
-que te recomendamos 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](#src/data.js).
-
-## 7. Hacker edition
-
-Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste**
-con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás
-profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.
-
-Features/características extra sugeridas:
-
-* Visualizar la estadística calculada mediante un gráfico. Para
-  ello te recomendamos explorar librerías de gráficas como
-  [Chart.js](https://www.chartjs.org/)
-  o [Google Charts](https://developers.google.com/chart/).
-* 100% Coverage
-
-## 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**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-### CSS
-
-- [ ] **Uso de selectores de CSS**
+<p align="center">
+<img src="./src/prototipobf.png">
+</p>
 
-  <details><summary>Links</summary><p>
 
-  * [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)
-</p></details>
+Diseño en Figma:
 
-- [ ] **Modelo de caja (box model): borde, margen, padding**
+https://www.figma.com/file/hbSnYGsgQW47HFaKG25vkv/Untitled?type=whiteboard&t=sJN2MY6Xpapt0Uv1-1
 
-  <details><summary>Links</summary><p>
-
-  * [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/)
-</p></details>
-
-- [ ] **Uso de flexbox en CSS**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-### Web APIs
-
-- [ ] **Uso de selectores del DOM**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Manipulación dinámica del DOM**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-### JavaScript
-
-- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos**
-
-- [ ] **Arrays (arreglos)**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Objetos (key, value)**
-
-  <details><summary>Links</summary><p>
-
-  * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/objects/objects)
-</p></details>
-
-- [ ] **Variables (declaración, asignación, ámbito)**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Uso de bucles/ciclos (while, for, for..of)**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Funciones (params, args, return)**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Pruebas unitarias (unit tests)**
-
-  <details><summary>Links</summary><p>
-
-  * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
-</p></details>
-
-- [ ] **Módulos de ECMAScript (ES Modules)**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-- [ ] **Uso de linter (ESLINT)**
-
-- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**
-
-- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)**
-
-### Control de Versiones (Git y GitHub)
-
-- [ ] **Git: Instalación y configuración**
-
-- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)**
-
-- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)**
-
-- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH**
-
-- [ ] **GitHub: Despliegue con GitHub Pages**
-
-  <details><summary>Links</summary><p>
-
-  * [Sitio oficial de GitHub Pages](https://pages.github.com/)
-</p></details>
-
-- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)**
-
-### Centrado en el usuario
-
-- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro**
-
-### Diseño de producto
-
-- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones**
-
-- [ ] **Seguir los principios básicos de diseño visual**
-
-### Investigación
-
-- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**
-
-  <details><summary>Links</summary><p>
-
-  * [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)
-</p></details>
-
-### AI Prompting
-
-- [ ] **Dando Instrucciones**
-
-  <details><summary>Links</summary><p>
-
-  * [Dando Instrucciones | Learn Prompting: Your Guide to Communicating with AI](https://learnprompting.org/es/docs/basics/instructions)
-</p></details>
+##### Prototipo de alta fidelidad
 
-- [ ] **Few shot prompting**
+<p align="center">
+<img src="./src/prototipoaf.png">
+</p>
 
-  <details><summary>Links</summary><p>
 
-  * [Few shot prompting | Learn Prompting: Your Guide to Communicating with AI](https://learnprompting.org/es/docs/basics/few_shot)
-</p></details>
+#### Datos Generados
+<p align="center">
+<img src="./src/datos1.png">
+</p>
 
-## 9. Pistas, tips y lecturas complementarias
 
-### Primeros pasos
+<p align="center">
+<img src="./src/datos2.png">
+</p>
 
-Súmate al canal de Slack
-[#project-dataverse](https://claseslaboratoria.slack.com/archives/C03MV35EP5M)
-para conversar y pedir ayuda del proyecto.
+<p align="center">
+<img src="./src/datos3.png">
+</p>
 
-Antes de empezar a escribir código, debes definir qué deberá hacer el
-producto con base en el conocimiento que puedas obtener de tu usuaria.
-Estas preguntas te pueden ayudar:
+#### AI Prompt utilizado
 
-* ¿Quiénes son las principales usuarias del producto?
-* ¿Cuáles son los objetivos de estas usuarias en relación con el producto?
-* ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
-* ¿Cuándo utilizan o utilizarían el producto?
-* Toda tu investigación previa debe tener como resultado todas las Historias
-  de Usuaria de tu proyecto.
-* No hagas los prototipos de alta fidelidad de todas tus Historias. Comienza
-  solamente por los que se necesiten para tu Sprint 1 (semana 1 de trabajo). Más
-  pistas en la guía de organización para el proyecto.
+<p align="center">
+<img src="./src/prompt1.png">
+</p>
 
-Cuando ya estés lista para codear, te sugerimos empezar de esta manera:
+<p align="center">
+<img src="./src/prompt2.png">
+</p>
 
-1. Una de las integrantes del equipo debe realizar un :fork_and_knife:
-   [fork](https://help.github.com/articles/fork-a-repo/) del repo de tu cohort,
-   tus _coaches_ te compartirán un _link_ a un repo y te darán acceso de lectura
-   en ese repo. La otra integrante del equipo deber hacer un fork **del
-   repositorio de su compañera** y
-   [configurar](https://gist.github.com/BCasal/026e4c7f5c71418485c1) un `remote`
-   hacia el mismo.
-2. :arrow_down: [Clona](https://help.github.com/articles/cloning-a-repository/)
-   tu _fork_ a tu computadora (copia local).
-3. 📦 Instala las dependencias del proyecto con el comando `npm install`. Esto
-   asume que has instalado [Node.js](https://nodejs.org/) (que incluye [npm](https://docs.npmjs.com/)).
-4. Si todo ha ido bien, deberías poder ejecutar las :traffic_light:
-   pruebas unitarias (unit tests) con el comando `npm test`.
-5. Para ver la interfaz de tu programa en el navegador, usa el comando
-  `npm start` para arrancar el servidor web y dirígete a
-  `http://localhost:5000` en tu navegador.
-6. A codear se ha dicho! :rocket:
+<p align="center">
+<img src="./src/prompt3.png">
+</p>
 
-### Contenido de referencia
+#### Pruebas unitarias
 
-#### Desarrollo Front-end
+A medida que avanzamos fuimos haciendo los tests unitarios para poder arreglar cualquier fallo que se nos presente. Logramos cumplir con la mayoria de requerimientos para este proyecto.
 
-* [Tópicos en la currícula de Laboratoria](https://curriculum.laboratoria.la/es/web-dev/topics)
-  testing, arreglos, objetos, funciones, DOM en Browser Javascript.
-* [Buscando elementos con querySelector*](https://es.javascript.info/searching-elements-dom)
-* [Objeto del evento](https://es.javascript.info/introduction-browser-events#objeto-del-evento)
-* [Array en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array)
-* [Array.sort en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort)
-* [Array.toSorted en MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted)
-* [Array.map en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map)
-* [Array.filter en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter)
-* [Array.reduce en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce)
-* [Array.forEach en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach)
-* [Object.keys en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/keys)
-* [Object.entries en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/entries)
-* [Atributos de datos](https://developer.mozilla.org/es/docs/Learn/HTML/Howto/Use_data_attributes)
-* [expressions-vs-statements](https://2ality.com/2012/09/expressions-vs-statements.html)
-* [expresión vs sentencia](https://openclassrooms.com/en/courses/4309531-descubre-las-funciones-en-javascript/5108986-diferencia-entre-expresion-y-sentencia)
-* [Datos atómicos vs datos estructurados](https://www.todojs.com/tipos-datos-javascript-es6/)
-* [Módulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export)
-* [Módulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import)
-* [Diferencia entre array y objetos](https://youtu.be/mJJloQY7A8Y)
-* [¿Cómo puedo recorrer un objeto?](https://youtube.com/01RHn23Bn_0)
-* [`map`, `filter`, `sort` y `reduce` también son métodos para objetos](https://youtu.be/bUl1R2lQvKo)
-* [Diferencia entre expression y statements](https://youtu.be/wlukoWco2zk)
-* [Diferencia entre createElement e innerHTML](https://www.javascripttutorial.net/javascript-dom/javascript-innerhtml-vs-createelement/)
-* [¿Qué es el Scope?](https://youtu.be/s-7C09ymzK8)
-
-#### Herramientas
-
-* [Git](https://git-scm.com/)
-* [GitHub](https://github.com/)
-* [GitHub Pages](https://pages.github.com/)
-* [Para preguntas sobre Git recomendamos ver este playlist](https://www.youtube.com/watch?v=F1EoBbvhaqU&list=PLiAEe0-R7u8k9o3PbT3_QdyoBW_RX8rnV)
-* [Node.js](https://nodejs.org/)
-* [Jest](https://jestjs.io/)
-
-#### Organización del Trabajo
-
-* [Historias de Usuario](https://www.youtube.com/watch?v=ky6wFiF5vMk&t=344s).
-  Ojo que Cris no diferencia _Definición de terminado_ de _Criterios de
-  Aceptación_ y nosotros sí lo haremos. Más detalles en la guía.
-* [Cómo dividir H.U.](https://www.youtube.com/watch?v=Ueq786iZ30I&t=341s)
-
-## 10. Consideraciones para pedir tu Project Feedback
-
-Antes de agendar tu Project Feedback con un coach, asegúrate que tu proyecto:
-
-* [ ] Cumple con todos los criterios mínimos de aceptación al ejecutar `npm run test:oas`
-* [ ] Cumple con todas las pruebas _end to end_ al ejecutar `npm run test:e2e`
-* [ ] Cumple con todas las pruebas unitarias al ejecutar `npm run test` y
-  que tienen una cobertura del 70% de _statements_ (_sentencias_),
-  _functions_ (_funciones_), _lines_ (_líneas_), y _branches_
-* [ ] Esta libre de _errores_ de `eslint` al ejecutar `npm run pretest`
-* [ ] Está subido a GitHub y desplegado en GitHub Pages
-* [ ] Captura de pantalla del prompt utilizado para generar los datos.
-* Tiene un `README.md` con la siguente:
-  - [ ] _Definición del producto_ clara e informativa
-  - [ ] Historias de usuario
-  - [ ] Un _Diseño de la Interfaz de Usuaria_ (prototipo de alta fidelidad)
-  - [ ] El listado de problemas que detectaste a través de tests
-    de usabilidad en el `README.md`
-* Tiene un UI que cumple las funcionalidades:
-  - [ ] Muestra lista con datos y/o indicadores
-  - [ ] Permite ordenar data por uno o más campos (asc y desc)
-  - [ ] Permite filtrar data con base en una condición
-  - [ ] Permite limpiar los filtros con un botón
-  - [ ] Es _responsive_
-
-Recuerda que debes hacer una autoevaluación de _objetivos de aprendizaje_ y
-_life skills_ desde tu dashboard de estudiante.
-
-Si no has completado todo lo anterior, no consideramos que estás lista para
-tu sesión de Project Feedback.
diff --git a/package.json b/package.json
index bb4defe9..8740168e 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "test:oas-js": "jest --verbose tests-read-only/oa/oa-javascript.spec.js",
     "pretest:oas-web-api": "npm run pretest",
     "test:oas-web-api": "jest --verbose tests-read-only/oa/oa-web-api.spec.js",
-    "pretest:oas-prompting": "npm run pretest",
+    "pretest:oas-prompting_x": "npm run pretest",
     "test:oas-prompting": "jest --verbose tests-read-only/oa/oa-prompting.spec.js",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
     "start": "serve src/",
diff --git a/src/Estrella_amarilla.png b/src/Estrella_amarilla.png
new file mode 100644
index 00000000..1fb314d0
Binary files /dev/null and b/src/Estrella_amarilla.png differ
diff --git a/src/data.png b/src/data.png
new file mode 100644
index 00000000..b808a57d
Binary files /dev/null and b/src/data.png differ
diff --git a/src/data/datamovies.js b/src/data/datamovies.js
new file mode 100644
index 00000000..08753023
--- /dev/null
+++ b/src/data/datamovies.js
@@ -0,0 +1,339 @@
+export default [
+  {
+  "id": "1",
+  "name": "El Señor de los Anillos: El retorno del Rey",
+  "genero": "Ciencia_Ficcion",
+  "ingresos": 1118888979,
+  "shortDescription": "Epopeya fantástica basada en la obra de J.R.R. Tolkien.",
+  "description": "Esta pelicula es una epopeya fantástica basada en la obra de J.R.R. Tolkien. La película sigue la lucha épica por la Tierra Media. Con su estreno el 17 de diciembre de 2003, fue una obra maestra de la ciencia ficción que generó ingresos asombrosos de $1,118,888,979 y cautivo a los fans de los libros. Dirigida por Peter Jackson, ganó 11 premios y dejó una marca imborrable en la historia del cine, con carácter de documental histórico sobre la Guerra del Pacífico.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/f34c8aa89f1e86bbd947c9615aef6a68392cdf6c/Imagenes/señor-de-los-anillos.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "17 de diciembre de 2003",
+  "premioGanado": 11,
+  }
+  //intento
+  },
+  {
+  "id": "2",
+  "name": "Titanic",
+  "genero": "Romance",
+  "ingresos": 2208208395,
+  "shortDescription": "Romance dramático del trágico hundimiento del Titanic.",
+  "description": "Un romance dramático del trágico hundimiento del Titanic el 18 de diciembre de 1997. La película, dirigida por James Cameron, se destaca por su impactante historia y emocionantes actuaciones. Con ingresos de $2,208,208,395, es un clásico del género romántico y ganó 14 premios, convirtiéndola en una de las más taquilleras de todos los tiempos, Jack (DiCaprio), un joven artista, en una partida de cartas gana un pasaje para América, en el Titanic, el trasatlántico más grande y seguro jamás construido.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/titanic.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "18 de diciembre de 1997",
+  "premioGanado": 14,
+  }
+  },
+  {
+  "id": "3",
+  "name": "Jurassic Park",
+  "genero": "Ciencia_Ficcion",
+  "ingresos": 1049746767,
+  "shortDescription": "Aventura con dinosaurios creados genéticamente.",
+  "description":"Jurassic Park (Parque Jurásico, en su traducción) es una película de ciencia ficción estadounidense, dirigida por Steven Spielberg, estrenada en 1993 y basada en la novela homónima de Michael Crichton. Se ha convertido en una de las más exitosas películas de todos los tiempos —es una de las películas con mayores ganancias de la historia— y en un hito respecto al uso de los efectos digitales para la filmación de películas. Obtuvo tres premios Óscar, incluyendo Mejor sonido, Mejores efectos sonoros y Mejores efectos visuales.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/jurassic-park.webp",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "11 de junio de 1993",
+  "premioGanado": 3,
+  }
+  },
+  {
+  "id": "4",
+  "name": "El Padrino",
+  "genero": "Drama",
+  "ingresos": 245066411,
+  "shortDescription": "Clásico del crimen dirigido por Francis Ford Coppola.",
+  "description":"Clásico del crimen dirigido por Francis Ford Coppola, quien es un director muy reconocido en el mundo de las peliculas y cuya trayectoria y experiencia ha logrado mostrarse en esta pelicula. El Padrino se estrenó el 24 de marzo de 1972. Aunque no fue una película taquillera, sus $245,066,411 de ingresos y 3 premios son insignias de su impacto cultural y social. La película es una obra maestra que ha dejado una huella imborrable en la historia de todo el cine.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/el-padrino.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "24 de marzo de 1972",
+  "premioGanado": 3,
+  }
+  },
+  {
+  "id": "5",
+  "name": "Harry Potter y la piedra filosofal",
+  "genero": "Fantasia",
+  "ingresos": 974755371,
+  "shortDescription": "Primera entrega de la saga de Harry Potter.",
+  "description": "La primera entrega de la saga de Harry Potter, lanzada el 10 de noviembre de 2001, es una obra de fantasía que cautivó a millones de adultos y niños, quienes llenaron las salas de cine para ver esta pelicula. Con ingresos de $974,755,371, la película dirigida por Chris Columbus fue un gran éxito. Ganó 3 premios y marcó el inicio de una de las sagas más queridas del cine, Harry Potter es una serie de novelas fantásticas escrita por la autora británica J. K. Rowling, en la que se describen las aventuras del joven aprendiz.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/harry-potter-y-la-piedra-filosofal.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "10 de noviembre de 2001",
+  "premioGanado": 3,
+  }
+  },
+  {
+  "id": "6",
+  "name": "Forrest Gump",
+  "genero": "Drama",
+  "ingresos": 678226566,
+  "shortDescription": "Drama que sigue la vida extraordinaria de Forrest Gump.",
+  "description": "Drama que sigue la vida extraordinaria de Forrest Gump. Estrenada el 6 de julio de 1994, dirigida por Robert Zemeckis, la película recaudó $678,226,566. Aunque no taquillera, ganó 6 premios y se convirtió en un clásico atemporal, gracias a la memorable actuación de Tom Hanks.Al tener el coeficiente intelectual de un niño, Forrest Gump siempre ha sido considerado el “tonto” de clase. Su madre se siente protegido y junto a su amiga Jenny es feliz, aunque en su propio mundo. Un problema en su columna vertebral no le impide convertirse en un ágil corredor.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/forret-gump.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "6 de julio de 1994",
+  "premioGanado": 6,
+  }
+  },
+  {
+  "id": "7",
+  "name": "Avatar",
+  "genero": "Ciencia_Ficcion",
+  "ingresos": 2787965087,
+  "shortDescription": "Épica de ciencia ficción que explora el planeta Pandora.",
+  "description": "Épica de ciencia ficción que explora el planeta Pandora. Lanzada el 18 de diciembre de 2009 y dirigida por James Cameron, Avatar se convirtió en la película más taquillera de la historia, con ingresos de $2,787,965,087. Ganó 3 premios y estableció nuevos estándares en efectos visuales.Está ambientada en el año 2154 y los acontecimientos que se narran en la historia Pandora, una luna (y aparentemente la más grande) de un planeta similar a Júpiter llamado Polífemo, habitada por una especie humanoide llamada na'vi, con la que los humanos se encuentran en conflicto.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/avatar.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "18 de diciembre de 2009",
+  "premioGanado": 3,
+  }
+  },
+  {
+  "id": "8",
+  "name": "Matrix",
+  "genero": "Accion",
+  "ingresos": 465366949,
+  "shortDescription": "Película de acción y ciencia ficción con el icónico Neo.",
+  "description": "Película de acción y ciencia ficción con el icónico Neo. Dirigida por las hermanas Wachowski, se estrenó el 31 de marzo de 1999. Aunque no fue taquillera, su influencia en la cultura pop es innegable. Con ingresos de $465,366,949, ganó 4 premios,Matrix es una tetralogía de películas de ciencia ficción escritas y dirigidas por las hermanas Wachowski. Se compone de The Matrix (1999), The Matrix Reloaded (2003), The Matrix Revolutions (2003) y The Matrix Resurrections (2021) y están protagonizadas en sus papeles principales por Keanu Reeves, Laurence Fishburne, Carrie-Anne Moss y Hugo Weaving.2​",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/matrix.webp",
+  "facts": {
+  "taquillera": "no",
+  "fechaPublicacion": "31 de marzo de 1999",
+  "premioGanado": 4,
+  }
+  },
+  {
+  "id": "9",
+  "name": "La La Land",
+  "genero": "Romance",
+  "ingresos": 448927588,
+  "shortDescription": "Musical romántico ambientado en Los Ángeles.",
+  "description": "Musical romántico ambientado en Los Ángeles. Estrenado el 9 de diciembre de 2016, dirigido por Damien Chazelle, recaudó $448,927,588. Aunque no fue taquillera, La La Land ganó 6 premios, incluido el Oscar a la Mejor Actriz para Emma Stone.La película cuenta la historia de Mia, una empleada de un bar que aspira a ser actriz y Sebastian, un pianista de jazz desempleado con grandes ambiciones.A pesar de sus diferencias y sus distintas personalidades, gracias a una serie de acontecimientos harán que sus caminos acaben cruzándose.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/La_La_Land.webp",
+  "facts": {
+  "taquillera": "no",
+  "fechaPublicacion": "9 de diciembre de 2016",
+  "premioGanado": 6,
+  }
+  },
+  {
+  "id": "10",
+  "name": "Spider-Man: Sin camino a casa",
+  "genero": "Accion",
+  "ingresos": 1852587115,
+  "shortDescription": "Aventuras del superhéroe Spider-Man en el multiverso.",
+  "description": "Aventuras del superhéroe Spider-Man en el multiverso. Dirigida por Jon Watts, se estrenó el 13 de diciembre de 2021. La película, con ingresos de $1,852,587,115, es un éxito taquillero y marca el regreso de personajes icónicos de Spider-Man, Por primera vez en la historia cinematográfica de Spider-Man, se revela la identidad de nuestro héroe y amigable vecino, lo cual hace que sus responsabilidades como superhéroe entren en conflicto con su vida normal, así como que corran riesgo las personas que más quiere.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/spider-man-sin-camino-a-casa.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "13 de diciembre de 2021",
+  "premioGanado": 1,
+  }
+  },
+  {
+  "id": "11",
+  "name": "El Caballero de la Noche",
+  "genero": "Accion",
+  "ingresos": 1004558444,
+  "shortDescription": "Batman se enfrenta al Joker en una ciudad en caos.",
+  "description": "Batman se enfrenta al Joker en una ciudad en caos. Dirigida por Christopher Nolan, la película se estrenó el 14 de julio de 2008. Con ingresos de $1,004,558,444, ganó 2 premios, consolidando la interpretación de Heath Ledger como el Joker. Una noche que no pueden dormir vuelven a la casa mágica del árbol. Esta vez, Annie quiere conocer de primera mano a un caballero medieval. Su medio de transporte será, de nuevo, un libro y viajan directamente a un castillo de la Edad Media, donde están celebrando un gran banquete.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/Batman_el_Caballero_de_la_Noche.webp",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "14 de julio de 2008",
+  "premioGanado": 2,
+  }
+  },
+  {
+  "id": "12",
+  "name": "E.T. el Extraterrestre",
+  "genero": "Ciencia_Ficcion",
+  "ingresos": 792910554,
+  "shortDescription": "Amistad entre un niño y un extraterrestre.",
+  "description": "La pelicula gira alrededor de la amistad entre un niño y un extraterrestre. Estrenada el 11 de junio de 1982 y dirigida por Steven Spielberg, la película se convirtió en un fenómeno cultural. Con ingresos de $792,910,554, ganó 4 premios, Un alienígena queda abandonado en la Tierra y es encontrado por Elliot, un niño que lo esconde en su casa, ayudado por su hermana pequeña, y lo bautiza con el nombre de E.T. Mientras Elliot empieza a establecer una fuerte amistad con el extraterrestre, los científicos del gobierno lo buscan por toda la zona.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/et-el-extraterrestre.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "11 de junio de 1982",
+  "premioGanado": 4,
+  }
+  },
+  {
+  "id": "13",
+  "name": "Interestelar",
+  "genero": "Ciencia_Ficcion",
+  "ingresos": 677471339,
+  "shortDescription": "Exploración espacial en busca de un nuevo hogar para la humanidad.",
+  "description": "La pelicula se basa en la exploración espacial en busca de un nuevo hogar para la humanidad. Dirigida por Christopher Nolan, la película se estrenó el 7 de noviembre de 2014. Con ingresos de $677,471,339, es una epopeya espacial que cautivó a la audiencia. Ambientada en un futuro distópico donde la humanidad está luchando por sobrevivir, ya que la Tierra se está volviendo inhabitable por el polvo que está arrasando con todo, cuenta la historia de un grupo de astronautas que viajan a través de un agujero de gusano cerca de Saturno",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/interstellar.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "7 de noviembre de 2014",
+  "premioGanado": 1,
+  }
+  },
+  {
+  "id": "14",
+  "name": "La Lista de Schindler",
+  "genero": "Drama",
+  "ingresos": 321365567,
+  "shortDescription": "Drama histórico basado en la vida de Oskar Schindler.",
+  "description": "Esta pelicula es un drama histórico basado en la vida de Oskar Schindler. Estrenada el 15 de diciembre de 1993 y dirigida por Steven Spielberg, la película recaudó $321,365,567. Ganó 7 premios, incluido el Oscar a la Mejor Película. La Lista de Schindler es una película del año 1993 que cuenta la historia real del empresario alemán Oskar Schindler quien salvó a más de 1000 judíos durante la segunda guerra mundial. fue la primera representación teatral del Holocausto que representó físicamente y se aventuró en el interior de las duchas que también se utilizaron como cámaras de gas.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/schindler_s_list.jpeg",
+  "facts": {
+  "taquillera": "no",
+  "fechaPublicacion": "15 de diciembre de 1993",
+  "premioGanado": 7,
+  }
+  },
+  {
+  "id": "15",
+  "name": "Deadpool",
+  "genero": "Accion",
+  "ingresos": 782636033,
+  "shortDescription": "Comedia de superhéroes con el irreverente Deadpool.",
+  "description": "Esta pelicula es una comedia de superhéroes con el irreverente Deadpool. Dirigida por Tim Miller, la película se estrenó el 12 de febrero de 2016. Con ingresos de $782,636,033, rompió convenciones de películas de superhéroes y ganó 2 premios. Deadpool es uno de los antihéroes más populares de Marvel Comics, un antiguo mercenario mentalmente inestable y desfigurado famoso por gozar de un sentido del humor poco convencional, unos poderes de sanación acelerados, una naturaleza charlatana y cierta tendencia a romper la cuarta pared.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/deadpool.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "12 de febrero de 2016",
+  "premioGanado": 2,
+  }
+  },
+  {
+  "id": "16",
+  "name": "Buscando a Nemo",
+  "genero": "Animacion",
+  "ingresos": 940335536,
+  "shortDescription": "Aventura animada en el océano en busca de un pez desaparecido.",
+  "description": "Aventura animada en el océano en busca de un pez desaparecido y cuyo padre sale en busca y rescate, con la ayuda de su amiga Doris. Estrenada el 30 de mayo de 2003 y dirigida por Andrew Stanton, la película recaudó $940,335,536. Ganó 1 premio y se convirtió en un clásico de animación. La película narra las aventuras de este pez, que es capturado y llevado fuera del arrecife australiano para ser parte de la pecera de un dentista de Sidney. ",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/buscando-a-nemo.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "30 de mayo de 2003",
+  "premioGanado": 1,
+  }
+  },
+  {
+  "id": "17",
+  "name": "Inception",
+  "genero": "Accion",
+  "ingresos": 829895144,
+  "shortDescription": "Thriller de ciencia ficción que explora los sueños y la realidad.",
+  "description": "Esta pelicula es un thriller de ciencia ficción que explora los sueños y la realidad. Dirigida por Christopher Nolan, la película se estrenó el 8 de julio de 2010. Con ingresos de $829,895,144, ganó 4 premios y se destacó por su complejidad narrativa. Inception, Agile inception o Kick off son términos similares, así como sus correspondientes en español: inicio, inicio ágil, lanzamiento ágil o reunión de lanzamiento. Denominan la actividad realizada en equipo para concretar, conocer y compartir la visión de un próximo producto o una próxima versión.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/inception.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "8 de julio de 2010",
+  "premioGanado": 4,
+  }
+  },
+  {
+  "id": "18",
+  "name": "Mujer Maravilla",
+  "genero": "Accion",
+  "ingresos": 821847012,
+  "shortDescription": "Historia de la superheroína Wonder Woman de DC Comics.",
+  "description": "Esta historia esta basada en la historia de la superheroína Wonder Woman de DC Comics. Dirigida por Patty Jenkins, la película se estrenó el 15 de mayo de 2017. Con ingresos de $821,847,012, fue un éxito taquillero y ganó 2 premios. Es una princesa guerrera de las Amazonas, pueblo ficticio basado en el de las amazonas de la mitología griega. En su tierra natal es conocida como la princesa Diana de Temiscira pero fuera de esta utiliza la identidad secreta de Diana Prince.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/wonder-woman.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "15 de mayo de 2017",
+  "premioGanado": 2,
+  }
+  },
+  {
+  "id": "19",
+  "name": "Toy Story 3",
+  "genero": "Animacion",
+  "ingresos": 1066969703,
+  "shortDescription": "Aventuras de juguetes enfrentándose al abandono.",
+  "description": "Aventuras de juguetes enfrentándose al abandono. Dirigida por Lee Unkrich, la película se estrenó el 18 de junio de 2010. Con ingresos de $1,066,969,703, ganó 2 premios, cerrando de manera emocional la trilogía de Toy Story.La película comienza con una secuencia de acción que Andy imagina a la hora de jugar, en la que Woody, Jessie, Tiro al Blanco y Buzz se ven en la obligación de detener los planes del malvado Dr. Tocino (quien es Hamm), el Sr. y la Sra. Cara de Papa y el trío de aliens de Pizza Planet.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/toy-story.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "18 de junio de 2010",
+  "premioGanado": 2,
+  }
+  },
+  {
+  "id": "20",
+  "name": "El Rey León",
+  "genero": "Animacion",
+  "ingresos": 1656943394,
+  "shortDescription": "Clásico animado de Disney que sigue la vida del león Simba.",
+  "description": "Esta pelicula es un clásico animado de Disney que sigue la vida del león Simba. Estrenada el 15 de junio de 1994 y dirigida por Roger Allers y Rob Minkoff, la película recaudó $1,656,943,394. Ganó 2 premios y sigue siendo amada por generaciones. El rey león es la historia de Simba, un joven león destinado a convertirse en rey de la sabana africana. Su feliz infancia llega a su fin cuando su malvado tío Scar logra matar al rey para quedarse con el trono y obliga a Simba a huir a tierras lejanas.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/Lion_king_1.webp",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "15 de junio de 1994",
+  "premioGanado": 2,
+  }
+  },
+  {
+  "id": "21",
+  "name": "El Gran Hotel Budapest",
+  "genero": "Comedia",
+  "ingresos": 174801324,
+  "shortDescription": "Comedia dramática dirigida por Wes Anderson.",
+  "description": "Comedia dramática dirigida por Wes Anderson. Estrenada el 6 de febrero de 2014, la película recaudó $174,801,324. Aunque no fue taquillera, ganó 4 premios y se destacó por su estilo visual distintivo. La historia trata sobre el robo y la recuperación de una pintura renacentista de valor incalculable y sobre la batalla que enfrenta a los miembros de una familia por una inmensa fortuna. Como telón de fondo, los levantamientos que transformaron Europa durante la primera mitad del siglo XX.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/gran-hotel-budapest.jpg",
+  "facts": {
+  "taquillera": "no",
+  "fechaPublicacion": "6 de febrero de 2014",
+  "premioGanado": 4,
+  }
+  },
+  {
+  "id": "22",
+  "name": "Coco",
+  "genero": "Animacion",
+  "ingresos": 807082196,
+  "shortDescription": "Película animada de Pixar que celebra el Día de los Muertos.",
+  "description": "Esta película animada de Pixar celebra el Día de los Muertos y nos muestra como se celebra este dia, siendo uno de los mas importantes en Mexico, la historia llega al corazon de muchas personas. Dirigida por Lee Unkrich y Adrian Molina, la película se estrenó el 27 de octubre de 2017. Con ingresos de $807,082,196, ganó 2 premios y cautivó con su emotiva historia.El niño Miguel Rivera sueña con convertirse en un cantante famoso como su ídolo Ernesto de la Cruz, quien alcanzó la fama gracias a su tema Recuérdame. Pero Miguel tiene un impedimento. ",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/coco.jpeg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "27 de octubre de 2017",
+  "premioGanado": 2,
+  }
+  },
+  {
+  "id": "23",
+  "name": "The Social Network",
+  "genero": "Drama",
+  "ingresos": 224920315,
+  "shortDescription": "Drama biográfico sobre la creación de Facebook.",
+  "description": "Esta pelicula es un drama biográfico sobre la creación de Facebook y los fundadores. Nos muestra la dinamica y relacion de amistad que tuvieron los fundadores antes de que tuvieran problemas que despues terminaria por afectar su amistad. Dirigida por David Fincher, la película se estrenó el 1 de octubre de 2010. Aunque no fue taquillera, con ingresos de $224,920,315, ganó 3 premios y fue elogiada por su guion. Esta narra un drama de tribunales, sobre las implicaciones morales del entonces ascendente Mark Zuckerberg, cuyas peripecias lo encaminaron en la construcción de un imperio billonario",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/la-red-social.jpeg",
+  "facts": {
+  "taquillera": "no",
+  "fechaPublicacion": "1 de octubre de 2010",
+  "premioGanado": 3,
+  }
+  },
+  {
+  "id": "24",
+  "name": "Ratatouille",
+  "genero": "Animacion",
+  "ingresos": 623722818,
+  "shortDescription": "Comedia animada sobre un ratón que sueña con ser chef.",
+  "description": "Esta pelicula es una comedia animada sobre un ratón que sueña con ser chef y hace lo posible por conseguirlo. Esta pelicula nos enseña a soñar con lo que queremos ser y no rendirnos. Dirigida por Brad Bird y estrenada el 22 de junio de 2007, Ratatouille recaudó $623,722,818. Aunque no fue una película taquillera, ganó 1 premio y se destacó por su encanto y originalidad. La historia de Remy, el ratón amante de la cocina, sigue siendo querida por el público.",
+  "imageUrl": "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/ratatouille.jpg",
+  "facts": {
+  "taquillera": "si",
+  "fechaPublicacion": "22 de junio de 2007",
+  "premioGanado": 1,
+  }
+  }
+  ]
\ No newline at end of file
diff --git a/src/data/dataset.js b/src/data/dataset.js
index 0ebafb6f..9e1a8d72 100644
--- a/src/data/dataset.js
+++ b/src/data/dataset.js
@@ -1,8 +1,8 @@
 export default [
   {
-    "id": "ada-lovelace",
-    "name": "Ada Lovelace",
-    "shortDescription": "Pionera en la programación, primera programadora de la historia.",
+   "id": "ada-lovelace",
+   "name": "Ada Lovelace",
+   "shortDescription": "Pionera en la programación, primera programadora de la historia.",
     "description": "Una visionaria matemática británica del siglo XIX, es aclamada como la primera programadora de la historia. Su colaboración con Charles Babbage en la creación de la Máquina Analítica la llevó a desarrollar algoritmos, incluyendo el famoso \"algoritmo de Bernoulli\", destinados a ser procesados por una máquina. Su visión pionera la convirtió en una figura fundamental en la informática y la inteligencia artificial. Lovelace demostró que las computadoras podían ir más allá de simples cálculos matemáticos, anticipando un mundo donde la programación sería esencial en la resolución de problemas complejos, dejando una huella imborrable en la ciencia y la tecnología.",
     "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/ada-lovelace.jpg",
     "facts": {
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
index 5de554af..62b76c56 100644
--- a/src/dataFunctions.js
+++ b/src/dataFunctions.js
@@ -1,9 +1,89 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// Ordenar el array de objetos 'data' por el nombre en orden alfabético (A-Z)
+export const ordenarNombresAZ = (data) => {
+  const dataOrdenada = data.slice().sort((a,b)=>{
+    const nombreA = a.name.toUpperCase();
+    const nombreB = b.name.toUpperCase();
 
-export const example = () => {
-  return 'example';
+    if (nombreA < nombreB) {
+      return -1;
+    }
+    if (nombreA > nombreB) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return dataOrdenada;
+};
+
+// Ordenar el array de objetos 'data' por el nombre en orden alfabético (Z-A)
+export const ordenarNombresZA = (data) => {
+  const dataOrdenada = data.slice().sort((a, b)=>{
+    const nombreA = a.name.toUpperCase();
+    const nombreB = b.name.toUpperCase();
+
+    if (nombreA > nombreB) {
+      return -1;
+    }
+    if (nombreA < nombreB) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return dataOrdenada;
+};
+
+// Filtra las películas por el género seleccionado
+export const generoMovies = (data,categoriaSeleccionada) => {
+  const genero = data.filter(movie=>movie.genero===categoriaSeleccionada)
+  return genero; 
+};
+
+
+//Aqui van las funciones de las stadisticas:
+
+// Calcular estadísticas de ingresos por género
+export const calcularEstadisticasIngresosPorGenero = (data) => {
+  return data.reduce((acumulador, pelicula) => {
+    const { genero, ingresos } = pelicula;
+
+    if (!acumulador[genero]) {
+      acumulador[genero] = {
+        cantidadPeliculas: 0,
+        totalIngresos: 0,
+        ingresoPromedio: 0,
+      };
+    }
+
+    acumulador[genero].cantidadPeliculas++;
+    acumulador[genero].totalIngresos += ingresos;
+    acumulador[genero].ingresoPromedio =
+      acumulador[genero].totalIngresos / acumulador[genero].cantidadPeliculas;
+
+    return acumulador;
+  }, {});
+};
+
+// Estadísticas por género 
+
+export const premiosGanadosTotal = (data) => {
+  const sumaTotalPremiosGanados = data.reduce(function(total, movie) {
+    if (movie.facts && typeof movie.facts.premioGanado === 'number') {
+      return total + movie.facts.premioGanado;
+    }
+    return total 
+  }, 0);
+
+  
+  return sumaTotalPremiosGanados;
 };
 
-export const anotherExample = () => {
-  return [];
+export const promedioPremiosGanados = (data) => {
+  const sumaTotalPremiosGanados = premiosGanadosTotal(data);
+  const promedioPremios = data.length > 0 ? sumaTotalPremiosGanados / data.length : 0;
+
+  
+  return promedioPremios;
 };
+
diff --git a/src/datos1.png b/src/datos1.png
new file mode 100644
index 00000000..c5eb312f
Binary files /dev/null and b/src/datos1.png differ
diff --git a/src/datos2.png b/src/datos2.png
new file mode 100644
index 00000000..31f2def0
Binary files /dev/null and b/src/datos2.png differ
diff --git a/src/datoss3.png b/src/datoss3.png
new file mode 100644
index 00000000..c56e0f9e
Binary files /dev/null and b/src/datoss3.png differ
diff --git a/src/footer.png b/src/footer.png
new file mode 100644
index 00000000..e49f9f64
Binary files /dev/null and b/src/footer.png differ
diff --git a/src/header.png b/src/header.png
new file mode 100644
index 00000000..29699c07
Binary files /dev/null and b/src/header.png differ
diff --git a/src/index.html b/src/index.html
index 0151e7de..30726044 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,62 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <center><header>
+        
+      <h1></h1>
+    </header></center>
+ 
+    <div class="flex-container">
+      <label for="categorias"> </label>
+      <select data-testid="select-filter" id="categorias" name="genero">
+      <option value="">Seleccione Categoría</option> 
+      <option value="Accion">Acción</option>
+      <option value="Ciencia_Ficcion">Ciencia Ficción</option>
+      <option value="Drama">Drama</option>
+      <option value="Romance">Romance</option>
+      <option value="Animacion">Animación</option>
+      <option value="Fantasia">Fantasia</option>
+      <option value="Comedia">Comedia</option>
+      </select>
+      <label for="nombre"> </label>
+      <select data-testid="select-sort" id="nombre" name="orden">
+      <option value="Ordene">Ordene</option> 
+      <option value="asc">A-Z</option>
+      <option value="desc">Z-A</option>
+      </select>
+      <label for="premiosPorGenero" >Estadisticas de Premios: </label> 
+      <button id="premiosPorGenero">Ingresos por Genero</button>
+      <button id="premiosTotal">Total Premios Ganados</button>
+    </div>
+
+    <dialog class="statsPremios1" id="statsPremios1">
+      <h2>Ganancias por Género</h2>
+      <li id="generoTitulo"></li>
+      <li id="cantidadPeliculas"></li>
+      <li id="totalIngresos"></li>
+      <li id="ingresoPromedio"></li>
+      <button class="cerrarBoton1" id="cerrarBoton1">Cerrar Stadisticas</button>
+    </dialog>
+    <dialog class="statsPremios2" id="statsPremios2">
+      <h2 id="statspremios">Premios Ganados </h2>
+      <li id="totalSumaPremios"></li>
+      <li id="promedioSumaPremios"></li>
+      <button class="cerrarBoton2" id="cerrarBoton2">Cerrar Stadisticas</button>
+    </dialog>
+
+    <div class="centrarboton">
+      <button data-testid="button-clear" class="botonResetear">Resetear</button> 
+    </div>
+    <!--main es el contenedor de las imagenes--> 
+    <main id="root">
+      <ul></ul>
+    </main>
+
     <script src="main.js" type="module"></script>
+    
+    <footer></footer>
+    
   </body>
-</html>
\ No newline at end of file
+</html>
+
+
diff --git a/src/main.js b/src/main.js
index c943ecdd..4c194aec 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,167 @@
-import { example } from './dataFunctions.js';
+//import { example } from './dataFunctions.js';
 import { renderItems } from './view.js';
+import {ordenarNombresAZ, ordenarNombresZA, premiosGanadosTotal, promedioPremiosGanados} from './dataFunctions.js';
+import { generoMovies } from './dataFunctions.js';
+import { calcularEstadisticasIngresosPorGenero } from './dataFunctions.js';
+import data from './data/datamovies.js';
 
-import data from './data/dataset.js';
 
-console.log(example, renderItems(data), data);
\ No newline at end of file
+
+const showr = renderItems(data);
+const root = document.getElementById('root');
+root.innerHTML = showr;
+const selectSort = document.querySelector('[data-testid="select-sort"]');
+const selectFilter = document.querySelector('[data-testid="select-filter"]');
+//const estadisticaPremios = document.querySelector('[id="estadistica-premios"]');
+const totalGenero = document.querySelector('.statsPremios1');
+const abrirTotalPremios = document.querySelector('#premiosTotal');
+const boton2 = document.querySelector('.cerrarBoton2');
+const boton1 = document.querySelector('#premiosPorGenero');
+const button1 = document.querySelector('.cerrarBoton1');
+let datosOrdenados = [...data];
+
+// Función para actualizar la vista cuando se cambian los selectores
+const actualizarVista = () => {
+  // Inicialmente, usa los datos sin ordenar
+  
+  // Verifica la opción seleccionada en el selector de orden
+  
+  if (selectSort.value === 'asc') {
+    datosOrdenados = ordenarNombresAZ(datosOrdenados);
+  } else if (selectSort.value === 'desc') {
+    datosOrdenados = ordenarNombresZA(datosOrdenados);
+
+  }
+  // Llama a la función renderItems y actualiza el contenido del contenedor
+  const showo = renderItems(datosOrdenados);
+  root.innerHTML = showo;
+};
+  
+const mostrarPorGenero = () => {
+  // Obtén el valor seleccionado del selector
+
+  const categoriaSeleccionada = selectFilter.value;
+  //console.log(categoriaSeleccionada);
+  // Llama a la función generoMovies para obtener las películas según el género
+  const peliculasFiltradas = generoMovies(data, categoriaSeleccionada);
+  
+  if (selectSort.value === 'asc') {
+    datosOrdenados = ordenarNombresAZ(peliculasFiltradas);
+  } else if (selectSort.value === 'desc') {
+    datosOrdenados = ordenarNombresZA(peliculasFiltradas);
+  } else{
+    datosOrdenados = peliculasFiltradas;
+    
+  }
+  const showp = renderItems(datosOrdenados);
+  root.innerHTML = showp;
+  
+};
+
+
+// Agrega eventos de cambio a los selectores
+  
+const reset = document.querySelector('[data-testid="button-clear"]');
+reset.addEventListener('click',function(){
+  selectFilter.selectedIndex = 0;
+  selectSort.selectedIndex = 0;
+  //estadisticaPremios.selectedIndex = 0;
+  datosOrdenados = data;
+  root.innerHTML =renderItems(data);
+});
+selectSort.addEventListener('change', actualizarVista);
+selectFilter.addEventListener('change', mostrarPorGenero);
+
+
+//Creando las estadisticas
+
+//estadistica 1
+
+const imprimirEstadisticasPorGenero = (estadisticas) => {
+  const dialog = document.getElementById('statsPremios1');
+  const generoTitulo = document.getElementById('generoTitulo');
+  const cantidadPeliculas = document.getElementById('cantidadPeliculas');
+  const totalIngresos = document.getElementById('totalIngresos');
+  const ingresoPromedio = document.getElementById('ingresoPromedio');
+
+  // Limpiar contenido previo
+  generoTitulo.innerHTML = '';
+  cantidadPeliculas.textContent = '';
+  totalIngresos.textContent = '';
+  ingresoPromedio.textContent = '';
+
+  for (const genero in estadisticas) {
+    // Crear elemento li para el nombre del género
+    const generoLi = document.createElement('li');
+    generoLi.textContent = `${genero}:`;
+
+    // Crear lista ul para cada género
+    const listaUl = document.createElement('ul');
+
+    // Crear elementos li para cada estadística
+    const cantidadLi = document.createElement('li');
+    cantidadLi.textContent = `Cantidad de películas: ${estadisticas[genero].cantidadPeliculas}`;
+
+    const ingresosLi = document.createElement('li');
+    ingresosLi.textContent = `Total de ingresos: $${estadisticas[genero].totalIngresos.toLocaleString()}`;
+
+    const ingresoPromedioLi = document.createElement('li');
+    ingresoPromedioLi.textContent = `Ingreso promedio: $${estadisticas[genero].ingresoPromedio.toLocaleString()}`;
+
+    // Adjuntar elementos li al contenedor ul
+    listaUl.appendChild(cantidadLi);
+    listaUl.appendChild(ingresosLi);
+    listaUl.appendChild(ingresoPromedioLi);
+
+    // Adjuntar lista ul al contenedor generoTitulo
+    generoLi.appendChild(listaUl);
+    generoTitulo.appendChild(generoLi);
+  }
+
+  // Abre el dialog
+  dialog.showModal();
+};
+
+
+boton1.addEventListener('click', ()=> {
+  const estadisticas = calcularEstadisticasIngresosPorGenero(data);
+  imprimirEstadisticasPorGenero(estadisticas);
+  totalGenero.showModal();
+})
+
+button1.addEventListener('click', ()=> {
+  totalGenero.close();
+})
+
+//estadistica 2
+
+const mostrarEstadisticasPremios = (totalPremios, promedioPremios) => {
+  const dialog2 = document.getElementById('statsPremios2');
+  const totalSuma = document.getElementById('totalSumaPremios');
+  const totalPromedio = document.getElementById('promedioSumaPremios');
+  
+  
+  totalSuma.textContent = "";
+  totalPromedio.textContent = "";
+  totalSuma.textContent = `Total de Premios Ganados: ${totalPremios.toLocaleString()}`;
+  totalPromedio.textContent = `Total de Premios Ganados: ${promedioPremios.toLocaleString()}`;
+  
+  dialog2.showModal();
+}
+
+
+
+abrirTotalPremios.addEventListener('click', () => {
+  
+  const premiosData = (data);
+  const totalPremios = premiosGanadosTotal(premiosData);
+  const promedioPremios = promedioPremiosGanados(premiosData);
+  mostrarEstadisticasPremios(totalPremios, promedioPremios);
+  
+});
+
+
+boton2.addEventListener('click', () => {
+  const dialog2 = document.getElementById("statsPremios2");
+  dialog2.close();
+});
\ No newline at end of file
diff --git a/src/prompt1.png b/src/prompt1.png
new file mode 100644
index 00000000..0fc30cd5
Binary files /dev/null and b/src/prompt1.png differ
diff --git a/src/prompt2.png b/src/prompt2.png
new file mode 100644
index 00000000..87c7b53f
Binary files /dev/null and b/src/prompt2.png differ
diff --git a/src/prompt3.png b/src/prompt3.png
new file mode 100644
index 00000000..a1be631b
Binary files /dev/null and b/src/prompt3.png differ
diff --git a/src/prototipoaf.png b/src/prototipoaf.png
new file mode 100644
index 00000000..ceaad5ce
Binary files /dev/null and b/src/prototipoaf.png differ
diff --git a/src/prototipobf.png b/src/prototipobf.png
new file mode 100644
index 00000000..100347b7
Binary files /dev/null and b/src/prototipobf.png differ
diff --git a/src/style.css b/src/style.css
index e69de29b..da2692f3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,211 @@
+html{
+  background-color: black;
+  
+}
+
+header{
+  background-image: url("header.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  height: 600px;
+}
+.item-container{
+margin-block: -300px;
+margin-bottom: 200px;
+perspective: 100;
+-webkit-perspective: 800;
+perspective: 800;
+}
+.imgEs{
+display: flex;
+position: relative;
+top: -205px; /* ajustar los valores para mover la imagen */
+left: 600px;
+width: 50px;
+height: 50px;
+}
+.movie-info{
+width:300px;
+height:370px;
+background-color: black;
+position:relative;
+transform-style:preserve-3d;
+transition: .7s ease;
+-webkit-box-shadow: 0px 10px 15px -5px hsla(59, 100%, 48%, 0.651);
+-moz-box-shadow: 0px 10px 15px -5px hsla(59, 100%, 48%, 0.651);
+box-shadow:0px 10px 15px -5px hsla(59, 100%, 48%, 0.651);
+}
+.imagen, .atras{
+width: 100%;
+height:100%;
+position:absolute;
+backface-visibility:hidden;
+-webkit-backface-visibility:hidden;  
+}
+
+.img_movies{
+  width: 100%;
+  object-fit:cover;
+  margin: 5px;
+  margin-left: -35px;
+  }
+
+.ddimagen{
+  padding: 15px;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
+.atras{
+transform: rotateY(180deg);
+padding: 15px;
+display:flex;
+align-items:center;
+text-align: center;
+color:rgb(255, 255, 255);
+font-family:'Calibria';
+font-size:large;
+}
+
+.item-container:hover .movie-info{
+transform: rotateY(180deg);
+}
+
+.wrapper{
+width: 100px;
+display: flex;
+flex-direction: row;
+justify-content: space-evenly;
+align-items:center;
+line-height: 30px;
+margin: 20px;
+margin-left: 100px;
+}
+  
+.flex-container, .centrarboton{
+display: flex;
+justify-content: space-around;
+align-items: center;
+}
+.flex-container{
+padding: 100px;
+}   
+  
+label[for="categorias"],
+label[for="nombre"],
+label[for="estadisticas"]{
+font-family: 'Cambria';
+font-size: 20px;
+color: white;
+padding: 10px;
+margin-left: 40px;
+margin-top: -100px;
+}
+  
+select{
+border-radius: 20px;
+width: 250px;
+height: 50px;
+font-size: 12px;
+margin-top: -700px;
+}
+
+
+button[data-testid="button-clear"]{
+width: 180px;
+font-size:20px;
+margin: 50px;
+border-radius: 10px;
+line-height: 25px;
+margin-top: -700px;
+}
+
+@media (max-width: 100px) {
+  button[data-testid="button-clear"] {
+    width: 90px;
+  }
+  select[data-testid="select-filter"] {
+    width: 125px;
+    height: 25px;
+  }
+
+}
+#root{
+display: grid; 
+grid-template-columns: repeat(3,1fr);
+grid-gap: 100px;
+grid-auto-rows: 200px;
+grid-template-rows: repeat(10, 1fr);
+margin-bottom: -1000px;
+}      
+
+footer{
+
+width:100%;
+position: absolute;
+background-image: url("footer.png");
+background-size: contain;
+background-repeat: no-repeat;
+height: 600px;
+
+}
+
+.statsPremios1, .statsPremios2 {
+color: black;
+background-color: #ffffe3; 
+opacity: .95;
+max-width: 50ch;
+border:0;
+box-shadow: 10px;
+padding: 50px;
+line-height: 2.5;
+border-radius: 30px;
+}
+.statsPremios1::backdrop {
+background: black;
+opacity: 50% ;
+}
+
+.statsPremios2::backdrop {
+background: black;
+opacity: 50% ;
+}
+
+#premiosPorGenero, #premiosTotal {
+padding: 1%;
+border-radius: 20px;
+margin:10px;
+margin-top: -700px;
+}
+
+#premiosPorGenero:hover {
+background-color: #ffffef;
+}
+#premiosTotal:hover {
+background-color: #ffffef;
+}
+
+.botonResetear:hover{
+background-color: #ffffef;
+}
+
+#generoTitulo,
+#cantidadPeliculas,
+#totalIngresos,
+#ingresoPromedio{
+font-family: 'Courier New', Courier, monospace;
+ word-spacing: 0.25em;
+ margin: 16px;
+ list-style:none;
+
+};
+@media(max-width:800px){
+#root{
+  display: grid; 
+  grid-template-columns: repeat(1,1fr);
+  grid-gap: 50px;
+  grid-auto-rows: 100px;
+  grid-template-rows: repeat(10, 1fr);
+}
+}
\ No newline at end of file
diff --git a/src/view.js b/src/view.js
index 686f5ef9..1584ab0d 100644
--- a/src/view.js
+++ b/src/view.js
@@ -1,5 +1,34 @@
 export const renderItems = (data) => {
-  console.log(data)
   // Aquí comienza tu código y puedes retornar lo que tu necesites
-  return 'example';
-};
\ No newline at end of file
+  //Crear Funciones a usar
+  let root = "";
+  data.forEach((movies) => {
+    root +=  `
+    <div class = "wrapper" bis_skin_checked="1">
+     <div class="item-container" bis_skin_checked="1">
+       <div class="movie-info" bis_skin_checked="1">
+          <div class = "imagen" bis_skin_checked="1">
+           <dd itemprop = "imagen" class="ddimagen">
+           <img class = "img_movies" src=${movies.imageUrl}>
+            </dd>
+          </div>
+         <div class = "atras">
+         <dl itemscope itemtype="MOVIES">
+         <dt>Nombre:</dt><dd itemprop="name">${movies.name}</dd>
+         <dt>Short descripción:</dt><dd itemprop="shortdescription">${movies.shortDescription}</dd>
+         <dt>Premios Ganados:</dt><dd itemprop="datos_importantes">${movies.facts.premioGanado}</dd>
+         </dl></div>
+       </div>
+      </div>
+    </div>`
+
+  });
+ 
+  // Retornar el contenedor actualizado
+  return root;
+  
+};
+//falta hacer testings de ul y de nuestra data
+
+//otro componente que renderize lo que quiero mostrar, mi template de lo que voy a imprimir
+
diff --git a/test/data.js b/test/data.js
index 077a202a..1625d13c 100644
--- a/test/data.js
+++ b/test/data.js
@@ -2,51 +2,73 @@
 // al menos debe tener uno que se llame "data"
 
 export const data = [{
-  "id": "ada-lovelace",
-  "name": "Ada Lovelace",
-  "shortDescription": "Pionera en la programación, primera programadora de la historia.",
-  "description": "Una visionaria matemática británica del siglo XIX, es aclamada como la primera programadora de la historia. Su colaboración con Charles Babbage en la creación de la Máquina Analítica la llevó a desarrollar algoritmos, incluyendo el famoso \"algoritmo de Bernoulli\", destinados a ser procesados por una máquina. Su visión pionera la convirtió en una figura fundamental en la informática y la inteligencia artificial. Lovelace demostró que las computadoras podían ir más allá de simples cálculos matemáticos, anticipando un mundo donde la programación sería esencial en la resolución de problemas complejos, dejando una huella imborrable en la ciencia y la tecnología.",
-  "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/ada-lovelace.jpg",
-  "facts": {
-    "yearOfBirth": "1815",
-    "yearOfDeath": "1852",
-    "birthPlace": "Londres, Reino Unido",
-    "mainField": "Ciencia de la Computación"
-  },
-  "extraInfo": {
-    "imageSource": "https://www.bing.com/images/create/genera-una-imagen-de-ada-lovelace2c-la-primera-prog/650a1eff8ff04b88833d5cdef0309441"
+  
+  id: 1,
+  name: "El Señor de los Anillos: El retorno del Rey",
+  taquillera: true,
+  ingresos: 1118888979,
+  shortDescription: "Epopeya fantástica basada en la obra de J.R.R. Tolkien.",
+  imageUrl: "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/f34c8aa89f1e86bbd947c9615aef6a68392cdf6c/Imagenes/señor-de-los-anillos.jpg",
+  facts: {
+    taquillera: true,
+    fechaPublicacion: "17 de diciembre de 2003",
+    premioGanado: "11 premios de la Academia, incluyendo Mejor Película."
   }
+//intento 
 },
 {
-  "id": "emmy-noether",
-  "name": "Emmy Noether",
-  "shortDescription": "Matemática destacada, teorema fundamental en álgebra abstracta.",
-  "description": "Una brillante matemática alemana, revolucionó la física teórica con sus contribuciones al teorema de conservación de la energía y el teorema de Noether, fundamentales en la teoría de la relatividad y la mecánica cuántica. A pesar de los obstáculos que enfrentó como mujer en la academia, sus investigaciones en álgebra abstracta y teoría de grupos son fundamentales en la física moderna. Su capacidad para unificar conceptos matemáticos y físicos marcó un hito en la historia de la ciencia, allanando el camino para futuras generaciones de científicas.",
-  "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/emmy-noether.jpg",
-  "facts": {
-    "yearOfBirth": "1882",
-    "yearOfDeath": "1935",
-    "birthPlace": "Erlangen, Alemania",
-    "mainField": "Matemáticas"
-  },
-  "extraInfo": {
-    "imageSource": "https://www.bing.com/images/create/create-an-image-of-of-a-german-woman2c-a-pioneering/6510ddb1e8254b928b8f8f1d5e95fea4"
+  id: 2,
+  name: "Titanic",
+  taquillera: true,
+  ingresos: 2208208395,
+  shortDescription: "Romance dramático del trágico hundimiento del Titanic.",
+  imageUrl: "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/titanic.jpg",
+  facts: {
+    taquillera: true,
+    fechaPublicacion: "18 de diciembre de 1997",
+    premioGanado: "14 premios de la Academia, incluyendo Mejor Película."
   }
 },
 {
-  "id": "hypatia-de-alejandria",
-  "name": "Hypatia de Alejandría",
-  "shortDescription": "Matemática y filósofa en la antigua Alejandría.",
-  "description": "Filósofa y matemática en la antigua Alejandría, desafió las normas de género de su época al destacar en una sociedad dominada por hombres. Su legado incluye importantes contribuciones a la geometría y la astronomía, así como su destacado papel como maestra y defensora del conocimiento en una época de agitación política. Hypatia demostró que las mujeres podían sobresalir en campos intelectuales y su valentía al mantener sus creencias filosóficas la convierte en un símbolo de resistencia y sabiduría en la historia de la ciencia.",
-  "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/hypatia-de-alejandria.jpg",
-  "facts": {
-    "yearOfBirth": "circa 360",
-    "yearOfDeath": "415",
-    "birthPlace": "Alejandría, Egipto",
-    "mainField": "Matemáticas, Filosofía"
-  },
-  "extraInfo": {
-    "imageSource": "https://www.bing.com/images/create/create-a-vivid-digital-artwork-or-painting-that-de/6510df0ebe1a4807af22175452761e1a"
+  id: 3,
+  name: "Jurassic Park",
+  taquillera: true,
+  ingresos: 1049746767,
+  shortDescription: "Aventura con dinosaurios creados genéticamente.",
+  imageUrl: "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/jurassic-park.webp",
+  facts: {
+    taquillera: true,
+    fechaPublicacion: "11 de junio de 1993",
+    premioGanado: "3 premios de la Academia, innovación en efectos visuales."
   }
-},];
+},
+{
+  id: 4,
+  name: "El Padrino",
+  taquillera: false,
+  ingresos: 245066411,
+  shortDescription: "Clásico del crimen dirigido por Francis Ford Coppola.",
+  imageUrl: "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/el-padrino.jpeg",
+  facts: {
+    taquillera: false,
+    fechaPublicacion: "24 de marzo de 1972",
+    premioGanado: "3 premios de la Academia, incluyendo Mejor Actor (Marlon Brando)."
+  }
+},
+{
+  id: 5,
+  name: "Harry Potter y la piedra filosofal",
+  taquillera: true,
+  ingresos: 974755371,
+  shortDescription: "Primera entrega de la saga de Harry Potter.",
+  imageUrl: "https://raw.githubusercontent.com/gabyrramos/DEV013-dataverse/main/Imagenes/harry-potter-y-la-piedra-filosofal.jpeg",
+
+  facts: {
+    taquillera: true,
+    fechaPublicacion: "10 de noviembre de 2001",
+    premioGanado: "3 premios BAFTA."
+  }
+},
+
+]
 
diff --git a/test/dataFunctions.spec.js b/test/dataFunctions.spec.js
index 72c5eb9d..465791fb 100644
--- a/test/dataFunctions.spec.js
+++ b/test/dataFunctions.spec.js
@@ -1,18 +1,103 @@
-import { example, anotherExample } from '../src/dataFunctions.js';
-import { data as fakeData } from './data.js';
+//import { example, anotherExample } from '../src/dataFunctions.js';
 
-console.log(fakeData);
+import { ordenarNombresAZ, ordenarNombresZA, generoMovies, premiosGanadosTotal, promedioPremiosGanados } from '../src/dataFunctions.js';
 
-describe('example', () => {
+describe('ordenarNombresAZ', () => {
+  it('debería ordenar correctamente un array de objetos por el campo "name" en orden alfabético ascendente', () => {
+    const data = [
+      { name: 'Simon' },
+      { name: 'Joaquin' },
+      { name: 'Adriana' },
+    ];
+    const resultadoEsperado = [
+      { name: 'Adriana' },
+      { name: 'Joaquin' },
+      { name: 'Simon' },
+    ];
+    expect(ordenarNombresAZ(data)).toEqual(resultadoEsperado);
+  });
+
+  it('debería mantener el orden si el array ya está ordenado alfabéticamente', () => {
+    const data = [
+      { name: 'Adriana' },
+      { name: 'Joaquin' },
+      { name: 'Simon' },
+    ];
+    expect(ordenarNombresAZ(data)).toEqual(data);
+  });
+
+  it('debería devolver un array vacío si se proporciona un array vacío', () => {
+    expect(ordenarNombresAZ([])).toEqual([]);
+  });
+
+});
+
+describe('ordenarNombresZA', () => {
+  it('debería ordenar correctamente un array de objetos por el campo "name" en orden alfabético ascendente', () => {
+    const data = [
+      { name: 'Simon' },
+      { name: 'Joaquin' },
+      { name: 'Adriana' },
+    ];
+    const resultadoEsperado = [
+      { name: 'Simon' },
+      { name: 'Joaquin' },
+      { name: 'Adriana' },
+    ];
+    expect(ordenarNombresZA(data)).toEqual(resultadoEsperado);
+  });
+
+  it('debería mantener el orden si el array ya está ordenado alfabéticamente', () => {
+    const data = [
+      { name: 'Simon' },
+      { name: 'Joaquin' },
+      { name: 'Adriana' },
+    ];
+    expect(ordenarNombresZA(data)).toEqual(data);
+  });
+
+  it('debería devolver un array vacío si se proporciona un array vacío', () => {
+    expect(ordenarNombresZA([])).toEqual([]);
+  });
+});
+
+describe('generoMovies', () => {
+  const data = [
+    { genero: 'Romance' },
+    { genero: 'Action' },
+  ];
+  const categoriaSeleccionada = 'Romance';
+
+  it('deberia retornar el genero correcto', () => {
+    const resultado = generoMovies(data, categoriaSeleccionada);
+    expect(resultado).toEqual([{ genero: 'Romance' }]);
+  });
+});
+
+
+describe('premiosGanadosTotal', () => {
+  const data = [
+    { facts: { premioGanado: 1 } },
+    { facts: { premioGanado: 2 } },
+  ];
 
-  it('returns `example`', () => {
-    expect(example()).toBe('example');
+  it('Deberia sumar todos los premios ganados de los 24 objetos', () => {
+    const sumatoria = premiosGanadosTotal(data);
+    expect (sumatoria).toBe(3);
   });
 });
 
-describe('anotherExample', () => {
+describe('promedioPremiosGanados', () => {
+  const data = [
+    { facts: { premioGanado: 1 } },
+    { facts: { premioGanado: 2 } },
+  ];
+  
+  it('Deberia dar el promedio de la suma total entre los 24 objetos', () =>{
+    const sumatoria = premiosGanadosTotal(data);
+    const datos = promedioPremiosGanados(data);
 
-  it('returns `anotherExample`', () => {
-    expect(anotherExample()).toBe('OMG');
+    const promedio = data.length >0 ? sumatoria/data.length : 0;
+    expect (datos).toEqual(promedio);
   });
 });
diff --git a/tests-read-only/oa/oa-prompting.spec.js b/tests-read-only/oa/oa-prompting.spec.js
index dd7ccf75..e9743b5a 100644
--- a/tests-read-only/oa/oa-prompting.spec.js
+++ b/tests-read-only/oa/oa-prompting.spec.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import data from '../../src/data/dataset.js'
+import data from '../../src/data/datamovies.js'
 
 describe('Test de data set', () => {
   describe('Dataset', () => {