diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml
new file mode 100644
index 00000000..12596ef3
--- /dev/null
+++ b/.github/workflows/jekyll-gh-pages.yml
@@ -0,0 +1,51 @@
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Deploy Jekyll with GitHub Pages dependencies preinstalled
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./src
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.hintrc b/.hintrc
new file mode 100644
index 00000000..4b311bab
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/language": [
+      "default",
+      {
+        "html-has-lang": "off"
+      }
+    ],
+    "meta-viewport": "off"
+  }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index c717e841..58c3720c 100644
--- a/README.md
+++ b/README.md
@@ -1,170 +1,95 @@
-# Dataverse
+# MovieDev
+
+<p align="center">
+  <img src= https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white alt="Visual Studio Code">
+  <img src=https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) alt="HTML5">
+  <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3">
+  <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript">
+  <img src="https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white" alt="Git">
+  <img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" alt="GitHub">
+  <img src="https://img.shields.io/badge/-jest-%23C21325?style=for-the-badge&logo=jest&logoColor=white">
+   
+</p>
+
+## Acerca de la Página Web
+
+* [1. Resumen del proyecto](#1-resumen-del-proyecto)
+* [2. Funcionalidades destacadas](#2-funcionalidades-destacadas)
+* [3. Consideraciones técnicas](#3-consideraciones-técnicas)
+* [4. Criterios de aceptación mínimos del proyecto](#4-criterios-de-aceptación-mínimos-del-proyecto)
+* [5. Objetivos de aprendizaje](#5-objetivos-de-aprendizaje)
+* [6. Algunos conceptos aplicados](#6-algunos-conceptos-aplicados)
 
-## Í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. Resumen del proyecto
 
-***
+En este proyecto, hemos creado la plataforma web **MovieDev**, la cual funciona como una colección de tarjetas que abarcan 24 películas de los géneros: documental, thriller, ciencia ficción, drama y animación. Todos las películas vinculadas al fascinante mundo de la tecnología, pensando en nuestras usuarias ideales: "Desarrolladoras Web". La información recopilada se basa en un conjunto de datos generados con la colaboración de [ChatGPT](https://www.xataka.com/basics/chatgpt-que-como-usarlo-que-puedes-hacer-este-chat-inteligencia-artificial).
 
-## 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`.
+--
+
+
+<img src="./src/img/home.png">
+
+--
+
+
+
+### Características principales
+
+La página web **MovieDev** se centra en ofrecer tres funciones clave:
+
+1. **Ordenamiento:** las películas pueden ser ordenadas de manera intuitiva.
+2. **Filtrado:** la capacidad de filtrar la información.
+3. **Estadísticas:** se realizan distintos cálculos con los datos de las 24 películas
+
+---
+
+## 2. Funcionalidades destacadas
+
+### Ordenamiento 
+
+- **Ordenamiento por año:** los usuarios pueden organizar la lista de películas según el año de lanzamiento, facilitando la exploración cronológica y permitiendo sumergirse en la evolución de las representaciones tecnológicas en el cine.
+
+- **Ordenamiento por nombre:** la opción de ordenar alfabéticamente facilita la búsqueda de películas específicas por título, proporcionando una ruta rápida y eficiente a la información deseada.
+
+### Filtrado
+
+- La capacidad de filtrar las películas según su género: documental, thriller, ciencia ficción, drama y animación, permite a los usuarios obtener resultados específicos al explorar el contenido.
+
+### Estadísticas
+
+- **Estadísticas por puntaje:** selecciona y muestra en pantalla la data que cumple estrictamente con alguno de estos tres requisitos del puntaje en porcentaje, entre el 50% y 70%, 70% y 90%, y sobre el 90% de aceptación.
+
+- **Estadísticas por país:** calcula la frecuencia de películas existentes por país, proporcionando una visión estadística de la distribución geográfica de las películas en el conjunto de datos de MovieDev.
+
+### Diseño adaptativo y estilo atractivo
+
+- **Diseño adaptativo:** la página web ha sido diseñada pensando en la accesibilidad, siendo completamente responsive para adaptarse a dispositivos de diferentes tamaños, desde computadoras de escritorio hasta teléfonos móviles.
+
+- **Estilo atractivo:** la interfaz se beneficia de un diseño estéticamente agradable, con colores y elementos visuales que mejoran la experiencia de navegación y destacan la temática tecnológica.
+  
+
+### Test unitarios
+
+**MovieDev** fue desarrollada en conjunto con un exhaustivo conjunto de pruebas unitarias en formato Jest, una herramienta ampliamente reconocida para la realización de pruebas en proyectos JavaScript. 
+
+La ventaja clave de emplear pruebas unitarias radica en su capacidad para verificar la funcionalidad correcta de las diversas funciones y la eficaz modularización del código.
+
+Durante el proceso de prueba, nos enfocamos en cada función individual, asegurándonos de que cumpliera con su propósito específico. Estas pruebas no solo ayudaron a identificar y corregir posibles errores, sino que también garantizaron la estabilidad y fiabilidad de la aplicación. 
+
+---
+
+## 3. Consideraciones técnicas
+
+La aplicación fue realizada en el marco del bootcamp para Desarrolladoras Web de **Laboratoria**, en el que a su vez se nos solicitaron las siguientes consideraciones técnicas:
 
 * Las funcionalidades de ordenar deben operar sobre la data filtrada.
-  Por ejemplo, si filtro los pokemones de tipo fuego y luego los ordeno por
+  Por ejemplo, si filtro las películas de comedia y luego las ordeno por
   nombre ascendentemente, la aplicación deberá mantener el filtro aplicado y
-  ordenar los pokemones de tipo fuego.
+  ordenar las películas de comedia.
 
-* La aplicación debe permitir a la usuaria reiniciar la aplicación, limpiando
+* La aplicación permite a la usuaria reiniciar la aplicación, limpiando
   filtros y ordenamiento, con un `<button>` con un atributo de datos
   `data-testid="button-clear"`.
 
@@ -172,31 +97,34 @@ Aquí definimos en más detalle las funcionalidades mínimas que debe tener:
   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
+* La aplicación es  _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:**
+
+Tomamos en cuenta las propuestas de **Laboratoria** para nuestro diseño:
+
+* [Wireframe mobile 1](https://github.com/Laboratoria/curriculum/assets/123121338/54711bb7-cb05-448e-b677-3cbd9bf13c14) (sugerencia de Laboratoria).
+
+* Resultado (pantalla responsive):
+
+
+<img src="image-2.png" alt="Pantalla móvil" width="50%">
+
+--
+
 
-Diseño Mobile:
+**Diseño Desktop:**
 
-* [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)
+* [Wireframe desktop 1](https://github-production-user-asset-6210df.s3.amazonaws.com/92090/261137084-1625aeb8-883c-4b79-86da-5fab34fa5b88.png) (sugerencia de Laboratoria).
 
-Diseño Desktop:
+* Resultado:
 
-* [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)
+<img src="image-1.png" alt="Pantalla móvil" width="70%">
 
-## 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.
+### Estructura del Proyecto.
 
 El _boilerplate_ contiene una estructura de archivos como punto de partida así
 como toda la configuración de dependencias:
@@ -220,105 +148,15 @@ como toda la configuración de dependencias:
 
 ```
 
-### `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.
+## 4. Criterios de aceptación mínimos del proyecto
 
-* `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`
-
-En este archivo tendrás hacer pruebas unitarias de las funciones
-implementadas en el archivo `dataFunctions.js`. (`filterBy`, `sortBy`, etc.)
-
-### `test/data.js`
-
-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.
-
-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
+Al ser parte del programa de bootcamper Laboratoria para Desarrolladoras Web, el proyecto presenta criterios mínimos de aceptación para considerarse entregable, a continuación se describen:
 
 ### Criterios de código
 
-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.
-
-Puedes ejecutar las pruebas de cada grupo de objetivos de aprendizaje de manera
-individual con los siguientes comandos:
-
+Conjunto de pruebas que se superen exitosamente:
 ``` sh
 npm run test:oas-html
 npm run test:oas-css
@@ -332,322 +170,246 @@ npm run test:oas // Esto es para correr todos los tests de OAs
 
 * **Uso de HTML semántico**
 
-  - [ ] Tiene un `<header>` con `<h1>`
-  - [ ] Tiene un `<footer>`
-  - [ ] Tiene un `<main>` con `<h2>`
-  - [ ] Todas las etiquetas de controles (inputs, selects, radio, etc) tienen `<label>`
-  - [ ] `<ul>` esta usado para dibujar la data
-  - [ ] Los hijos de `<li>` usan attributos de microdata `itemscope` e `itemprop`
+  - [x] Tiene un `<header>` con `<h1>`
+  - [x] Tiene un `<footer>`
+  - [x] Tiene un `<main>` con `<h2>`
+  - [x] Todas las etiquetas de controles (inputs, selects, radio, etc) tienen `<label>`
+  - [x] `<ul>` esta usado para dibujar la data
+  - [x] Los hijos de `<li>` usan attributos de microdata `itemscope` e `itemprop`
 
 #### CSS
 
 * **Uso de selectores de CSS**
 
-  - [ ] Uso de selector class para los items <li>
-  - [ ] Uso de flexbox en sentido `row` y `column`
-  - [ ] Uso de flexbox para el elemento que contiene los items
-  - [ ] Uso de flexbox para el elemento que contiene los UI inputs
+  - [x] Uso de selector class para los items <li>
+  - [x] Uso de flexbox en sentido `row` y `column`
+  - [x] Uso de flexbox para el elemento que contiene los items
+  - [x] Uso de flexbox para el elemento que contiene los UI inputs
 
 #### Web APIs
 
 * **Uso de selectores del DOM**
 
-  - [ ] La aplicación usa [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+  - [x] La aplicación usa [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
     para buscar los elementos del DOM
   
 * **Manejo de eventos del DOM (listeners, propagación, delegación)**
 
-  - [ ] `addEventListener` con callback que tiene parámetro de `event`,
+  - [x] `addEventListener` con callback que tiene parámetro de `event`,
     lo que permite el uso del objeto [`event`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_objects)
     con `event.target` o `event.currentTarget`
-  - [ ] La aplicación registra [Event Listeners](https://developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener)
+  - [x] La aplicación registra [Event Listeners](https://developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener)
     para escuchar `click`, `change`, `keyup` dependiendo del evento que
     se quiere escuchar
 
 * **Manipulación dinámica del DOM**
 
-  - [ ] La aplicación actualiza el atributo [`innerHTML`](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML).
-  - [ ] La aplicación usa `createElement` y `appendChild`, o template strings
+  - [x] La aplicación actualiza el atributo [`innerHTML`](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML).
+  - [x] La aplicación usa `createElement` y `appendChild`, o template strings
     para crear elementos
 
 #### JavaScript
 
 * **Variables (declaración, asignación, ámbito)**
 
-  - [ ] La aplicación declara variables con [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
+  - [x] La aplicación declara variables con [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
     y [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
     en manera adecuada
 
 * **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
 
-  - [ ] La aplicación usa el statement
+  - [x] La aplicación usa el statement
     [`if..else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)
       para evaluar condiciones
 
 * **Uso de bucles/ciclos (while, for, for..of)**
 
-  - [ ] La aplicación usa el statement [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)
+  - [x] La aplicación usa el statement [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)
     o método [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
     para iterar
 
 * **Funciones (params, args, return)**
 
   En el archivo `dataFunctions.js` define las siguientes funciones:
-  - [ ] una función `sortBy` que tiene 3 parámetros (`data`, `sortBy`, `sortOrder`)
+  - [x] una función `sortBy` que tiene 3 parámetros (`data`, `sortBy`, `sortOrder`)
     y devuelve el arreglo ordenado
-  - [ ] una función `filterBy` que tiene 3 parámetros (`data`, `filterBy`, `value`)
+  - [x] 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`)
+  - [x] 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)
 
 * **Arrays (arreglos)**
 
-  - [ ] Uso de [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays)
-  - [ ] Uso de [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
+  - [x] Uso de [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays)
+  - [x] 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)
+  - [x] Uso de [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+  - [x] Uso de [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+  - [x] Uso de [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
+  - [x] Uso de [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
 
 * **Objetos**
 
-  - [ ] Uso de notación de punto para [acceder propiedades](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors)
-  - [ ] Uso de notación de brackets para [acceder propiedades](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors)
+  - [x] Uso de notación de punto para [acceder propiedades](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors)
+  - [x] Uso de notación de brackets para [acceder propiedades](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors)
 
 * **Módulos de ECMAScript (ES Modules)**
 
-  - [ ] La aplicación usa [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+  - [x] La aplicación usa [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
     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).
+### Generación de datos 
 
-#### Generar los datos
+Esta data tiene una estructura archivo javascript. Este archivo, exporta un arreglo con 24 objetos y la estructura de cada objeto
+es la siguiente:
 
-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`).
+* `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á
+* `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á
+* `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:
+* `facts`: un objeto con al menos **3** "hechos" o "info" sobre este elemento.
+
+Un ejemplo de data de **MovieDev**:
 
 ```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",
+    "id": "hackers",
+    "name": "Hackers",
+    "shortDescription": "Jóvenes hackers y aventureros luchan contra la injusticia.",
+    "description": "Ambientada en el mundo del ciberespacio.....",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/Hackers.png",
     "facts": {
-      "yearOfBirth": 1843,
-      "placeOfBirth": "London, England",
-      "mainField": "Computer Science",
+      "yearMovie": 1995,
+      "directorMovie": "Iain Softley",
+      "productionCompany": "MGM",
+      "genreMovie": "Thriller",
+      "genreValue": "thriller"
+    },
+    "extraInfo": {
+      "rottenTomatoesScore": "32%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "107 minutos"
     }
   },
+  },
   //... 23 objetos más
 ]
 ```
 
-La data generada deberás reemplazarla por el contenido de este archivo:
-`./src/data/dataset.js`.
+#### Prompt utilizado
 
-**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.
+- Capturas del prompting:
 
-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.
+La data utilizada en MovieDev se generó con ayuda de inteligencia artificial como se presenta a continuación:
 
-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
+<img width="500" src="./src/img/prompting/data1.png">
+
+--
+
+
+<img width="500" src="./src/img/prompting/data2.png">
+
+--
+
+
+Además, usamos imágenes generadas a través de inteligencia artificial. Ejemplo de promp y resultado:
+
+
+<img src="image.png" alt="Pantalla móvil" width="50%">
+
+--
+
+
+### Diseño de la Interfaz de Usuaria
+
+Después de seleccionar la temática que queríamos trabajar: **página web sobre películas de tecnología y desarrollo web**, decidimos definir a nuestra usuaria ideal respondiendo las siguientes preguntas: 
+
+- ¿Quiénes son las principales usuarias del producto?
+
+Mujeres, futuras programadoras Web. Con interés en inmersión en el mundo del desarrollo Web.
+
+- ¿Cuáles son los objetivos de estas usuarias en relación con el producto?
+
+Saber más sobre tecnología, sus usos, alcances, historia, utopías y distopías. Contextualizarse más. Información para conversaciones interesantes con personas del rubro.
+
+- ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?
+
+Datos básicos y estadísticos interesantes. Resúmenes, imágenes asociadas a los films.
+
+- ¿Cuándo utilizan o utilizarían el producto
+
+En tiempo de ocio. 
+
+Nuestra investigación derivó en todas las **HISTORIAS DE USUARIA** de nuestro proyecto, que se muestran a continuación: 
+
+<img width="500" alt="image" src="https://github.com/MilenaPacheco/DEV013-dataverse/assets/153201066/8ae47c2f-2d73-4248-8ccc-789672d6b015">
+
+--
+
 
-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.
 
-#### Diseño de la Interfaz de Usuaria
+### Prototipos de alta, mediana y baja fidelidad
 
-##### Prototipo de alta fidelidad
+A continuación se muestran capturas de nuestros prototipos de baja, mediana y alta fidelidad. Para los cuales pedimos feedback a nuestras compañeras y coaches.
 
-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.
+#### Baja fidelidad
 
-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_.
+<img width="456" alt="image" src="https://github.com/MilenaPacheco/DEV013-dataverse/assets/153201066/6740d6fa-a88a-45db-ab71-bff995b1e05e">
+__
 
-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.
+#### Mediana fidelidad
 
-#### Implementación de la Interfaz de Usuaria (HTML/CSS/JS)
+<img width="517" alt="image" src="https://github.com/MilenaPacheco/DEV013-dataverse/assets/153201066/354153b9-bb62-4a22-aa46-3e0c3b2ab5b3">
 
-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.
+Enlace: https://www.figma.com/proto/XNxIMUAnDnIHL85t7uu5W4/MovieDev-MEDIANA-F.?type=design&node-id=0-1&t=yTF97nxfWS6n1wPi-0&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=17%3A175
 
-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.
+#### Alta fidelidad
 
-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).
+<img width="1000" alt="image" src="https://github.com/MilenaPacheco/DEV013-dataverse/assets/153201066/a6a8ae5a-d968-4980-9dac-05f2f93ad175">
 
-## 7. Hacker edition
+Enlace: https://www.figma.com/file/6BDUns99NmJqwwlsWQ3NEA/Untitled?type=design&mode=design&t=Y5brons7GHSLIU9y-0
 
-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
+### Testeos de usabilidad
+Arrojaron lo siguiente:
+- Problemas de usabilidad en la posición del menú de filtrado, ordenado y botones asociados, así como en la adecuación de sus tamaños. Este desafío surgió debido a que la disposición y el tamaño de estos son factores cruciales para garantizar una experiencia de usuario intuitiva y eficiente. Enfrentamos este desafío con un enfoque cuidadoso en el diseño de la interfaz.
+- Teníamos muchos colores en el diseño de la interfaz. También resultaban muy brillantes.
+- No funcionaba en cualquier tamaño de dispositivo.
+- Se cargaban las tarjetas sin las imágenes.
+- Fuentes muy grandes o ilegibles por falta de correcto contraste.
+- Toda la página no tenía el mismo nivel de diseño, habían partes más crudas que otras.
 
-## 8. Objetivos de aprendizaje
+Todos estos temas fueron considerados y abordados en nuestro entregable.
 
+---
 
-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.
+## 5. Objetivos de aprendizaje
+
+Como equipo reflexionamos y marcamos los objetivos que hemos llegado a entender y aplicar en el proyecto. Estos objetivos fueron determinantes en nuestra estrategia de trabajo.
 
 ### HTML
 
-- [ ] **Uso de HTML semántico**
+- [x] **Uso de HTML semántico**
 
   <details><summary>Links</summary><p>
 
@@ -657,7 +419,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
 
 ### CSS
 
-- [ ] **Uso de selectores de CSS**
+- [x] **Uso de selectores de CSS**
 
   <details><summary>Links</summary><p>
 
@@ -665,7 +427,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)
 </p></details>
 
-- [ ] **Modelo de caja (box model): borde, margen, padding**
+- [x] **Modelo de caja (box model): borde, margen, padding**
 
   <details><summary>Links</summary><p>
 
@@ -676,7 +438,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)
 </p></details>
 
-- [ ] **Uso de flexbox en CSS**
+- [x] **Uso de flexbox en CSS**
 
   <details><summary>Links</summary><p>
 
@@ -687,7 +449,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
 
 ### Web APIs
 
-- [ ] **Uso de selectores del DOM**
+- [x] **Uso de selectores del DOM**
 
   <details><summary>Links</summary><p>
 
@@ -696,7 +458,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [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)**
+- [x] **Manejo de eventos del DOM (listeners, propagación, delegación)**
 
   <details><summary>Links</summary><p>
 
@@ -706,7 +468,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)
 </p></details>
 
-- [ ] **Manipulación dinámica del DOM**
+- [x] **Manipulación dinámica del DOM**
 
   <details><summary>Links</summary><p>
 
@@ -720,9 +482,9 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
 
 ### JavaScript
 
-- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos**
+- [x] **Diferenciar entre tipos de datos primitivos y no primitivos**
 
-- [ ] **Arrays (arreglos)**
+- [x] **Arrays (arreglos)**
 
   <details><summary>Links</summary><p>
 
@@ -735,14 +497,14 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
 </p></details>
 
-- [ ] **Objetos (key, value)**
+- [x] **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)**
+- [x] **Variables (declaración, asignación, ámbito)**
 
   <details><summary>Links</summary><p>
 
@@ -750,7 +512,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/basics/variables)
 </p></details>
 
-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
+- [x] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
 
   <details><summary>Links</summary><p>
 
@@ -758,7 +520,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [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)**
+- [x] **Uso de bucles/ciclos (while, for, for..of)**
 
   <details><summary>Links</summary><p>
 
@@ -766,7 +528,7 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
 </p></details>
 
-- [ ] **Funciones (params, args, return)**
+- [x] **Funciones (params, args, return)**
 
   <details><summary>Links</summary><p>
 
@@ -776,14 +538,14 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions)
 </p></details>
 
-- [ ] **Pruebas unitarias (unit tests)**
+- [x] **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)**
+- [x] **Módulos de ECMAScript (ES Modules)**
 
   <details><summary>Links</summary><p>
 
@@ -791,44 +553,44 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
   * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export)
 </p></details>
 
-- [ ] **Uso de linter (ESLINT)**
+- [x] **Uso de linter (ESLINT)**
 
-- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**
+- [x] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**
 
-- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)**
+- [x] **Diferenciar entre expresiones (expressions) y sentencias (statements)**
 
 ### Control de Versiones (Git y GitHub)
 
-- [ ] **Git: Instalación y configuración**
+- [x] **Git: Instalación y configuración**
 
-- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)**
+- [x] **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)**
+- [x] **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**
+- [x] **GitHub: Creación de cuenta y repos, configuración de llaves SSH**
 
-- [ ] **GitHub: Despliegue con GitHub Pages**
+- [x] **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)**
+- [x] **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**
+- [x] **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**
+- [x] **Crear prototipos de alta fidelidad que incluyan interacciones**
 
-- [ ] **Seguir los principios básicos de diseño visual**
+- [x] **Seguir los principios básicos de diseño visual**
 
 ### Investigación
 
-- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**
+- [x] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**
 
   <details><summary>Links</summary><p>
 
@@ -838,135 +600,242 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t
 
 ### AI Prompting
 
-- [ ] **Dando Instrucciones**
+- [x] **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>
 
-- [ ] **Few shot prompting**
+- [x] **Few shot prompting**
 
   <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>
 
-## 9. Pistas, tips y lecturas complementarias
-
-### Primeros pasos
-
-Súmate al canal de Slack
-[#project-dataverse](https://claseslaboratoria.slack.com/archives/C03MV35EP5M)
-para conversar y pedir ayuda del proyecto.
-
-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:
-
-* ¿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.
-
-Cuando ya estés lista para codear, te sugerimos empezar de esta manera:
-
-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:
-
-### Contenido de referencia
-
-#### Desarrollo Front-end
-
-* [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.
+---
+
+## 6. Algunos conceptos aplicados
+
+### filter: 
+Filtra elementos de un array basándose en una condición especificada. **Sintaxis:**
+```js
+const newArray = array.filter(callback(element[, index[, array]])[, thisArg]);
+```
+
+### sort: 
+Ordena los elementos de un array de acuerdo con la función de comparación proporcionada. **Sintaxis:**
+```js
+array.sort([compareFunction]);
+```
+
+### map:
+Crea un nuevo array con los resultados de llamar a una función proporcionada para cada elemento del array. **Sintaxis:**
+```js
+const newArray = array.map(callback(currentValue[, index[, array]])[, thisArg]);
+```
+
+### reduce:
+Aplica una función acumulativa a los elementos de un array para reducirlos a un solo valor. **Sintaxis:**
+```js
+array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);
+```
+
+### parseFloat:
+Convierte una cadena en un número de punto flotante. **Sintaxis:**
+```js
+const number = parseFloat(string);
+```
+
+### localeCompare:
+Compara dos cadenas de texto y devuelve un valor que indica si una es menor, igual o mayor que la otra. **Sintaxis:**
+```js
+const comparison = string1.localeCompare(string2);
+```
+
+### push:
+Agrega uno o más elementos al final de un array. **Sintaxis:**
+```js
+array.push(element1[, element2[, ...[, elementN]]]);
+```
+
+### length:
+Devuelve la cantidad de elementos en un array. **Sintaxis:**
+```js
+const arrayLength = array.length;
+```
+
+### puntos ".":
+Se utiliza para acceder a propiedades de un objeto. **Sintaxis:**
+```js
+const person = {
+  name: 'John',
+  age: 30,
+  job: 'Developer'
+};
+
+console.log(person.name); // Resultado: 'John'
+```
+
+### corchetes "[]":
+Se utiliza para acceder a elementos de un array o propiedades de un objeto cuando el nombre de la propiedad es dinámico o contiene caracteres especiales. **Sintaxis:**
+```js
+const fruits = ['apple', 'banana', 'orange'];
+
+console.log(fruits[1]); // Resultado: 'banana'
+
+const propertyName = 'age';
+const person = {
+  name: 'Alice',
+  age: 25
+};
+
+console.log(person[propertyName]); // Resultado: 25
+```
+
+### querySelector: 
+Selecciona el primer elemento del DOM que coincida con el selector especificado. Arroja un elemento del DOM o null si no se encuentra ninguna coincidencia.
+```js
+const element = document.querySelector(selector);
+```
+
+### toggle:
+Alterna entre añadir y eliminar una clase en un elemento del DOM.
+```js
+element.classList.toggle(className);
+```
+
+### addEventListener:
+Agrega un evento a un elemento del DOM para que escuche eventos específicos y ejecute una función cuando se produce el evento.
+```js
+element.addEventListener(eventType, callback);
+```
+
+### createElement:
+Crea un nuevo elemento del DOM con el nombre de la etiqueta especificada.
+```js
+const newElement = document.createElement(tagName);
+```
+
+### appendChild:
+Añade un nodo al final de la lista de hijos de un nodo padre.
+```js
+parentNode.appendChild(childNode);
+```
+
+### removeChild:
+Elimina un nodo hijo de un nodo padre.
+```js
+parentNode.removeChild(childNode);
+```
+
+### innerHTML:
+Obtiene o establece el contenido HTML de un elemento del DOM.
+```js
+const content = element.innerHTML;
+element.innerHTML = newContent;
+```
+
+### textContent:
+Obtiene o establece el contenido de texto de un elemento del DOM.
+```js
+const textContent = element.textContent;
+element.textContent = newTextContent;
+```
+
+### setInterval:
+Ejecuta una función a intervalos regulares especificados en milisegundos.
+```js
+const intervalId = setInterval(callback, interval);
+```
+
+### className:
+Obtiene o establece la clase de un elemento del DOM.
+```js
+const classes = element.className;
+element.className = newClasses;
+```
+
+### classList:
+Obtiene una lista de las clases de un elemento del DOM
+```js
+const classes = element.classList;
+```
+
+### style:
+Obtiene o establece el estilo de un elemento del DOM.
+```js
+const elementStyle = element.style;
+```
+
+### selectedIndex:
+Obtiene o establece el índice seleccionado en un elemento "select" del DOM.
+```js
+const index = selectElement.selectedIndex;
+selectElement.selectedIndex = newIndex;
+```
+
+### parentNode:
+Obtiene el nodo padre de un elemento del DOM.
+```js
+const parent = element.parentNode;
+```
+
+### value:
+Obtiene o establece el valor de un elemento del DOM, como en los elementos de entrada.
+```js
+const elementValue = element.value;
+element.value = newValue;
+```
+
+### e.target.value:
+En un evento, e.target se refiere al elemento que desencadenó el evento, y .value extrae el valor actual de ese elemento. Se utiliza para obtener el valor de un elemento en el que se ha desencadenado un evento, comúnmente usado en eventos de cambio (change) en elementos de formulario.
+```js
+const handleChange = (e) => {
+  const value = e.target.value;
+  // Resto del código...
+};
+
+// Agregando el event listener para el evento de cambio
+elemento.addEventListener('change', handleChange);
+```
+
+### Object.keys:
+Se utiliza para obtener un array que contiene las claves del objeto proporcionado, permitiendo el acceso a las propiedades del objeto de manera iterable.
+```js
+const obj = { a: 1, b: 2, c: 3 };
+const keysArray = Object.keys(obj);
+
+console.log(keysArray); // Resultado: ['a', 'b', 'c']
+```
+
+
+**Eventos:**
+
+### change: 
+Se activa cuando el valor de un elemento cambia (por ejemplo, en un elemento de formulario).
+```js
+element.addEventListener('change', callback);
+```
+
+### click:
+Se activa cuando se hace clic en un elemento.
+```js
+element.addEventListener('click', callback);
+```
+
+**Elementos del DOM:**
+
+### document:
+La interfaz Document representa cualquier página web cargada en el navegador y sirve como punto de entrada al contenido de la página web, que es el árbol DOM.
+
+### window:
+Representa la ventana del navegador y proporciona métodos y propiedades .
+
+### Diferencia entre expresión y sentencia:
+- **Expresión:** una expresión es cualquier fragmento de código que produce un valor. Ejemplo: 2 + 3 es una expresión que evalúa a 5.
+
+- **Sentencia:** una sentencia es una unidad completa de código que realiza una acción. Ejemplo: if (x > 0) { console.log("Positivo"); } es una sentencia que ejecuta un bloque de código si la condición es verdadera.
+
+**La distinción clave radica en que una expresión produce un valor, mientras que una sentencia realiza una acción o controla el flujo del programa.**
diff --git a/image-1.png b/image-1.png
new file mode 100644
index 00000000..43466c67
Binary files /dev/null and b/image-1.png differ
diff --git a/image-2.png b/image-2.png
new file mode 100644
index 00000000..019ae58b
Binary files /dev/null and b/image-2.png differ
diff --git a/image.png b/image.png
new file mode 100644
index 00000000..2f2da8a6
Binary files /dev/null and b/image.png differ
diff --git a/src/data/dataset.js b/src/data/dataset.js
index 2d28c7f2..70e70db9 100644
--- a/src/data/dataset.js
+++ b/src/data/dataset.js
@@ -1,379 +1,462 @@
-export default [
+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": "C://Users//Christian//Desktop//Laboratoria//curriculum//projects//02-dataverse//thumb.png",
+    "id": "hackers",
+    "name": "Hackers",
+    "shortDescription": "Jóvenes hackers y aventureros luchan contra la injusticia.",
+    "description": "Ambientada en el mundo del ciberespacio, sigue a un grupo de jóvenes hackers liderados por Dade Murphy (interpretado por Jonny Lee Miller) y Kate Libby (interpretada por Angelina Jolie). Juntos, se embarcan en una emocionante aventura para exponer una conspiración corporativa. Con una estética vibrante y una banda sonora electrónica, la película captura la subcultura hacker de los años 90. Hackers se destaca por su representación única de la ciberseguridad y la cultura hacker en una época de rápido avance tecnológico.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/Hackers.png",
     "facts": {
-      "yearOfBirth": "1815",
-      "yearOfDeath": "1852",
-      "birthPlace": "Londres, Reino Unido",
-      "mainField": "Ciencia de la Computación"
+      "yearMovie": 1995,
+      "directorMovie": "Iain Softley",
+      "productionCompany": "MGM",
+      "genreMovie": "Thriller",
+      "genreValue": "thriller"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/genera-una-imagen-de-ada-lovelace2c-la-primera-prog/650a1eff8ff04b88833d5cdef0309441"
+      "rottenTomatoesScore": "32%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "107 minutos"
     }
   },
   {
-    "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",
+    "id": "short-circuit",
+    "name": "Short Circuit",
+    "shortDescription": "Un robot militar adquiere conciencia y busca la libertad.",
+    "description": "Es una encantadora comedia de ciencia ficción que sigue a Johnny 5, un robot militar experimental que adquiere conciencia propia después de ser alcanzado por un rayo. Huyendo del ejército y buscando descubrir el mundo, Johnny 5 se embarca en una aventura de autodescubrimiento. La película combina humor, ternura y un toque de acción mientras Johnny 5 forma amistades y desafía su programación original. Short Circuit ofrece una mirada entrañable a la inteligencia artificial y a la conexión humana, convirtiéndose en un clásico querido desde su lanzamiento en 1986.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/short-circuit.png",
     "facts": {
-      "yearOfBirth": "1882",
-      "yearOfDeath": "1935",
-      "birthPlace": "Erlangen, Alemania",
-      "mainField": "Matemáticas"
+      "yearMovie": 1986,
+      "directorMovie": "John Badham",
+      "productionCompany": "TriStar Pictures",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/create-an-image-of-of-a-german-woman2c-a-pioneering/6510ddb1e8254b928b8f8f1d5e95fea4"
+      "rottenTomatoesScore": "57%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "98 minutos"
     }
   },
   {
-    "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": "/projects/02-dataverse/thumb.png",
+    "id": "indie-game-the-movie",
+    "name": "Indie Game: The Movie",
+    "shortDescription": "Historias detrás de la creación de videojuegos indie.",
+    "description": "Sumerge a los espectadores en la vida de apasionados desarrolladores de videojuegos independientes. Esta obra proporciona una visión profunda de los desafíos emocionales y creativos que enfrentan mientras luchan por plasmar sus visiones artísticas en el exigente mundo de los videojuegos. A través de testimonios íntimos, la película captura momentos de triunfo y desesperación, revelando la dedicación incansable que impulsa a estos creadores. Desde la lucha contra limitaciones financieras hasta la búsqueda de reconocimiento, Indie Game: The Movie ofrece una mirada cautivadora a la compleja travesía de quienes buscan dejar su marca en la industria del juego independiente.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/indie-game-the-movie.jpeg",
     "facts": {
-      "yearOfBirth": "circa 360",
-      "yearOfDeath": "415",
-      "birthPlace": "Alejandría, Egipto",
-      "mainField": "Matemáticas, Filosofía",
-      "holamundo": "Hola"
+      "yearMovie": 2012,
+      "directorMovie": "James Swirsky, Lisanne Pajot",
+      "productionCompany": "BlinkWorks Media",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/create-a-vivid-digital-artwork-or-painting-that-de/6510df0ebe1a4807af22175452761e1a"
+      "rottenTomatoesScore": "93%",
+      "countryMovie": "Canadá",
+      "durationMovie": "96 minutos"
     }
   },
   {
-    "id": "marjorie-lee-browne",
-    "name": "Marjorie Lee Browne",
-    "shortDescription": "Matemática, contribuyó a la teoría de números.",
-    "description": "Matemática estadounidense, destacó en una época en la que las mujeres afroamericanas enfrentaban múltiples barreras en la educación superior. No solo obtuvo su doctorado en matemáticas, sino que también se convirtió en una destacada educadora, promoviendo la diversidad en las ciencias matemáticas y desafiando la discriminación racial y de género. Su compromiso con la educación y su capacidad para inspirar a futuras generaciones la convierten en un modelo a seguir para las mujeres en la ciencia, dejando una huella perdurable en la historia académica.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/marjorie-lee-browne.jpg",
+    "id": "citizenfour",
+    "name": "Citizenfour",
+    "shortDescription": "Revelaciones sobre la vigilancia masiva gubernamental.",
+    "description": "Es un documental que arroja luz sobre el escándalo de vigilancia masiva revelado por Edward Snowden. Dirigido por Laura Poitras, la película sigue de cerca los eventos que llevaron al denunciante a revelar documentos clasificados de la NSA. Capturando la tensión y la paranoia, Citizenfour ofrece una mirada impactante a la valiente decisión de Snowden de exponer la extensa vigilancia gubernamental. A través de entrevistas íntimas y material de archivo, la película plantea preguntas cruciales sobre la privacidad, la seguridad nacional y el precio del activismo en la era digital, dejando una impresión duradera en la audiencia.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/citizenfour.jpeg",
     "facts": {
-      "yearOfBirth": "1914",
-      "yearOfDeath": "1979",
-      "birthPlace": "Memphis, Estados Unidos",
-      "mainField": "Matemáticas"
+      "yearMovie": 2014,
+      "directorMovie": "Laura Poitras",
+      "productionCompany": "RADiUS-TWC",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/design-an-inspiring-and-historically-accurate-imag/6510df7e7bb745f69d67f695441607a8"
+      "rottenTomatoesScore": "96%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "114 minutos"
     }
   },
   {
-    "id": "shakuntala-devi",
-    "name": "Shakuntala Devi",
-    "shortDescription": "Matemática prodigio, conocida como la 'Calculadora Humana'.",
-    "description": "Conocida como \"la bruja de las matemáticas\" de la India, dejó una marca indeleble en el mundo de los números. Su capacidad mental asombrosa la llevó a resolver complejos cálculos matemáticos mentalmente en cuestión de segundos, estableciendo récords mundiales. Además de su talento innato, Devi promovió activamente la educación matemática y luchó por la igualdad de género en un país donde las mujeres enfrentaban desafíos en la ciencia y la educación. Su legado destaca el poder de la mente humana y la importancia de la igualdad de oportunidades en la ciencia.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/shakuntala-devi.jpg",
+    "id": "the-imitation-game",
+    "name": "The Imitation Game",
+    "shortDescription": "Alan Turing descifra el código Enigma durante la Segunda Guerra Mundial.",
+    "description": "Es un cautivador thriller histórico que narra la vida de Alan Turing, un genio matemático británico. Benedict Cumberbatch interpreta magistralmente a Turing, quien lidera un equipo durante la Segunda Guerra Mundial para descifrar el código Enigma alemán. La película explora no solo la genialidad de Turing sino también su lucha contra la discriminación y su impacto en la historia al acelerar el fin de la guerra. Con un guion ingenioso y actuaciones conmovedoras, The Imitation Game es un tributo emocionante a un héroe injustamente olvidado.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-imitation-game.jpeg",
     "facts": {
-      "yearOfBirth": "1929",
-      "yearOfDeath": "2013",
-      "birthPlace": "Bangalore, India",
-      "mainField": "Matemáticas"
+      "yearMovie": 2014,
+      "directorMovie": "Morten Tyldum",
+      "productionCompany": "Black Bear Pictures",
+      "genreMovie": "Thriller",
+      "genreValue": "thriller"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/indian-woman-writing-math-problems-in-a-blackbard-/6510e19f3db54e14b365b7e8dc5045f6"
+      "rottenTomatoesScore": "91%",
+      "countryMovie": "Reino Unido",
+      "durationMovie": "113 minutos"
     }
   },
   {
-    "id": "sofia-kovalevskaya",
-    "name": "Sofia Kovalevskaya",
-    "shortDescription": "Matemática y escritora, contribuyó a la teoría de funciones.",
-    "description": "Matemática rusa del siglo XIX, dejó una marca indeleble en la ciencia del siglo XIX al desafiar las barreras de género. Como matemática rusa, superó las restricciones sociales de su época para convertirse en la primera mujer en obtener un doctorado en matemáticas en Europa. Sus contribuciones a la teoría de las ecuaciones diferenciales y la mecánica revolucionaron la disciplina, abriendo nuevas perspectivas en el análisis matemático. Su destacada membresía en la Academia de Ciencias de Suecia marcó un hito en la historia de las mujeres en la ciencia.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/sofia-kovalevskaya.jpg",
+    "id": "jobs",
+    "name": "Jobs",
+    "shortDescription": "La vida visionaria y tumultuosa de Steve Jobs, co-fundador de Apple.",
+    "description": "Presenta la vida tumultuosa y visionaria de Steve Jobs, co-fundador de Apple. Ashton Kutcher personifica a Jobs, llevando a la pantalla la travesía desde la garaje donde comenzó Apple hasta convertirse en un ícono tecnológico. La película explora la intensidad creativa de Jobs, su tenacidad y su impacto en la revolución digital. A través de momentos clave y desafíos personales, Jobs ofrece una visión íntima del hombre detrás de la innovación, destacando su genialidad y complejidad en el mundo empresarial y tecnológico del siglo XX.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/jobs.jpeg",
     "facts": {
-      "yearOfBirth": "1850",
-      "yearOfDeath": "1891",
-      "birthPlace": "Moscú, Rusia",
-      "mainField": "Matemáticas"
+      "yearMovie": 2013,
+      "directorMovie": "Joshua Michael Stern",
+      "productionCompany": "Open Road Films",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/indian-woman-writing-math-problems-in-a-blackbard-/6510e19f3db54e14b365b7e8dc5045f6"
+      "rottenTomatoesScore": "28%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "128 minutos"
     }
   },
   {
-    "id": "yoko-shimomura",
-    "name": "Yoko Shimomura",
-    "shortDescription": "Compositora de música, destacada en la industria de los videojuegos.",
-    "description": "Compositora japonesa, es una figura destacada en la ciencia de la música y el arte sonoro. Aunque no se dedica a la ciencia en el sentido tradicional, su trabajo en la composición musical ha requerido un profundo entendimiento de la teoría musical y la tecnología de audio. Ha contribuido de manera significativa a la industria de los videojuegos, componiendo icónicas bandas sonoras que han enriquecido la experiencia de juego. Su éxito en un campo donde las mujeres estaban subrepresentadas la convierte en un modelo a seguir, incluso en campos no convencionales como la composición musical.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/yoko-shimomura.jpg",
+    "id": "the-martian",
+    "name": "The Martian",
+    "shortDescription": "Un astronauta lucha por sobrevivir en Marte con habilidades tecnológicas.",
+    "description": "Es una emocionante epopeya espacial basada en la novela de Andy Weir. Matt Damon interpreta a Mark Watney, un astronauta dejado atrás en Marte, desafiado a sobrevivir con recursos limitados. La película combina ciencia, ingenio y suspenso mientras Watney utiliza su ingenio para cultivar alimentos y comunicarse con la Tierra. Con un elenco estelar y efectos visuales asombrosos, The Martian captura la lucha humana por la supervivencia en el espacio, celebrando la tenacidad y el espíritu humano en la exploración interplanetaria.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-martian.jpeg",
     "facts": {
-      "yearOfBirth": "1967",
-      "birthPlace": "Hyogo, Japón",
-      "mainField": "Composición Musical, Video Juegos"
+      "yearMovie": 2015,
+      "directorMovie": "Ridley Scott",
+      "productionCompany": "20th Century Fox",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/yoko-shimomura-making-music-for-a-video-game-in-19/6510e40dd1eb45d0906e8c1f4bb601d3"
+      "rottenTomatoesScore": "91%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "144 minutos"
     }
   },
   {
-    "id": "maryam-mirzakhani",
-    "name": "Maryam Mirzakhani",
-    "shortDescription": "Matemática, ganadora del Premio Fields.",
-    "description": "Matemática iraní, hizo historia al convertirse en la primera mujer en ganar la Medalla Fields, el premio más prestigioso en matemáticas. Sus investigaciones en la geometría de superficies y la teoría de las superficies de Riemann han tenido un impacto duradero en la matemática pura. A lo largo de su carrera, Mirzakhani inspiró a muchas mujeres a perseguir carreras en ciencia y matemáticas, derribando las barreras de género. Su enfoque innovador y su capacidad para resolver problemas complejos la convierten en un modelo a seguir para la comunidad científica y en un símbolo de la excelencia matemática.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/maryam-mirzakhani.jpg",
+    "id": "the-pirates-of-silicon-valley",
+    "name": "Pirates of S.V",
+    "shortDescription": "La rivalidad entre Steve Jobs y Bill Gates en la revolución informática.",
+    "description": "Es un fascinante drama biográfico que narra la rivalidad entre Steve Jobs (interpretado por Noah Wyle) y Bill Gates (interpretado por Anthony Michael Hall) durante la explosión de la revolución informática. La película destaca la creatividad, ambición y visiones contrapuestas que dieron forma al surgimiento de Apple y Microsoft. Con un enfoque en la personalidad única de ambos líderes, Pirates of Silicon Valley ofrece una visión reveladora de los comienzos de la era de la computación personal y la competencia que transformó la industria tecnológica.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-pirates-of-silicon-valley.jpeg",
     "facts": {
-      "yearOfBirth": "1977",
-      "yearOfDeath": "2017",
-      "birthPlace": "Teherán, Irán",
-      "mainField": "Matemáticas"
+      "yearMovie": 1999,
+      "directorMovie": "Martyn Burke",
+      "productionCompany": "TNT",
+      "genreMovie": "Drama",
+      "genreValue": "drama"
     },
     "extraInfo": {
-      "imageSource": "https://chalkdustmagazine.com/features/mathematics-maryam-mirzakhani/"
+      "rottenTomatoesScore": "88%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "97 minutos"
     }
   },
   {
-    "id": "adele-goldberg",
-    "name": "Adele Goldberg",
-    "shortDescription": "Informática pionera, co-creadora del lenguaje de programación Smalltalk.",
-    "description": "Informática estadounidense reconocida por su influyente trabajo en la investigación y desarrollo de la programación orientada a objetos. Su contribución más destacada es la creación del lenguaje de programación Smalltalk, que revolucionó la forma en que se desarrollan software y sistemas informáticos. Goldberg ha sido una defensora incansable de la usabilidad y la accesibilidad en la informática, asegurando que las aplicaciones informáticas sean más amigables para los usuarios. Su trabajo ha allanado el camino para una programación más intuitiva y eficiente, y su legado perdura en la industria de la tecnología.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/adele-goldberg.jpg",
+    "id": "the-social-dilemma",
+    "name": "The Social Dilemma",
+    "shortDescription": "Exploración de los impactos negativos de las redes sociales en la sociedad.",
+    "description": "Es un revelador documental dirigido por Jeff Orlowski que explora el impacto de las redes sociales en la sociedad contemporánea. Mediante testimonios de expertos en tecnología y ex empleados de grandes plataformas, la película destapa los peligros ocultos detrás de la manipulación algorítmica y la adicción digital. Ilustrando cómo estas plataformas explotan la atención y manipulan la información, The Social Dilemma plantea cuestionamientos esenciales sobre la privacidad, la polarización y el poder de la tecnología en la configuración de nuestras vidas cotidianas, ofreciendo una perspectiva inquietante y reflexiva sobre el precio de la conectividad moderna.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-social-dilemma.jpeg",
     "facts": {
-      "yearOfBirth": "1945",
-      "birthPlace": "Chicago, Estados Unidos",
-      "mainField": "Ciencias de la Computación"
+      "yearMovie": 2020,
+      "directorMovie": "Jeff Orlowski",
+      "productionCompany": "Exposure Labs",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://pionerasinformaticas.ujaen.es/en/computer-women-pioneers/adele-goldberg-en"
+      "rottenTomatoesScore": "86%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "94 minutos"
     }
   },
   {
-    "id": "barbara-liskov",
-    "name": "Barbara Liskov",
-    "shortDescription": "Científica de la computación, pionera en programación orientada a objetos.",
-    "description": "Pionera de la informática, es conocida por su trabajo en la programación y la arquitectura de sistemas distribuidos. Fue la primera mujer en obtener un doctorado en ciencias de la computación en el Instituto de Tecnología de Stanford y desarrolló el lenguaje de programación CLU, que estableció fundamentos para la programación orientada a objetos. Liskov ha dejado una marca indeleble en la industria de la tecnología al liderar avances en sistemas de almacenamiento y seguridad informática. Su enfoque en la fiabilidad y la robustez ha influido en el diseño de sistemas críticos en todo el mundo.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/barbara-liskov.jpg",
+    "id": "revolution-os",
+    "name": "Revolution OS",
+    "shortDescription": "La historia del sistema operativo Linux y el código abierto.",
+    "description": "Es un documental que sumerge a los espectadores en la fascinante historia del software libre y de código abierto. Explorando el surgimiento de figuras clave como Richard Stallman y Linus Torvalds, la película destaca la revolución informática que llevó a la creación de sistemas operativos como Linux y el movimiento GNU. A través de entrevistas y material de archivo, Revolution OS ofrece una visión perspicaz de la lucha por la libertad en el ámbito digital y la creación de un ecosistema informático basado en la colaboración y la transparencia.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/revolution-os.jpeg",
     "facts": {
-      "yearOfBirth": "1939",
-      "birthPlace": "Los Angeles, Estados Unidos",
-      "mainField": "Ciencia de la Computación"
+      "yearMovie": 2001,
+      "directorMovie": "J.T.S. Moore",
+      "productionCompany": "Cinematico",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://medium.com/a-computer-of-ones-own/barbara-liskov-inventor-of-abstract-data-types-9f8908fdcf86"
+      "rottenTomatoesScore": "71%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "85 minutos"
     }
   },
   {
-    "id": "grace-hopper",
-    "name": "Grace Hopper",
-    "shortDescription": "Científica de la computación, creadora del primer compilador.",
-    "description": "Una de las pioneras de la informática, es famosa por su contribución al desarrollo del primer compilador y al lenguaje de programación COBOL. Además, desafió los estereotipos de género en la década de 1940 al unirse a la Marina de los Estados Unidos y convertirse en la primera programadora de la computadora Harvard Mark I. Su legado abarca la creación de conceptos cruciales como la \"depuración de software\" y su influencia en el desarrollo de la informática moderna, estableciendo estándares para la programación de alto nivel y la innovación tecnológica.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/grace-hopper.jpg",
+    "id": "her",
+    "name": "Her",
+    "shortDescription": "Una historia de amor entre un hombre y un sistema operativo con IA.",
+    "description": "Es un cautivador drama de ciencia ficción que explora la relación entre el hombre y la inteligencia artificial. Joaquin Phoenix interpreta a Theodore, un escritor solitario que se enamora de Samantha, un sistema operativo con voz (Scarlett Johansson). Ambientada en un futuro cercano, la película examina la soledad, la conexión emocional y los límites de la tecnología en las relaciones humanas. Con una cinematografía evocadora y una narrativa reflexiva, Her invita a la audiencia a cuestionar la naturaleza del amor y la evolución de la interacción humana en la era digital.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/her.png",
     "facts": {
-      "yearOfBirth": "1906",
-      "yearOfDeath": "1992",
-      "birthPlace": "Nueva York, Estados Unidos",
-      "mainField": "Ciencia de la Computación"
+      "yearMovie": 2013,
+      "directorMovie": "Spike Jonze",
+      "productionCompany": "Warner Bros.",
+      "genreMovie": "Drama",
+      "genreValue": "drama"
     },
     "extraInfo": {
-      "imageSource": "https://photos.com/featured/grace-hopper-with-early-computer-bettmann.html"
+      "rottenTomatoesScore": "95%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "126 minutos"
     }
   },
   {
-    "id": "margaret-hamilton",
-    "name": "Margaret Hamilton",
-    "shortDescription": "Científica de la computación, lideró desarrollo de software para Apollo 11.",
-    "description": "Destacada científica de la computación que desempeñó un papel fundamental en el programa Apollo de la NASA. Fue directora de la División de Ingeniería de Software en el Laboratorio de Instrumentación del MIT, donde desarrolló el concepto de \"ingeniería de software\". Su liderazgo en el desarrollo del software de vuelo para las misiones Apollo fue fundamental para el éxito de la llegada del hombre a la Luna. Hamilton es un ejemplo de cómo la tecnología y la ciencia pueden alcanzar logros extraordinarios cuando se combinan con un enfoque innovador y una visión audaz.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/margaret-hamilton.jpg",
+    "id": "ex-machina",
+    "name": "Ex Machina",
+    "shortDescription": "Exploración de la inteligencia artificial y la ética en su creación.",
+    "description": "Es un intrigante thriller de ciencia ficción que examina la inteligencia artificial y la ética de la creación. Domhnall Gleeson interpreta a Caleb, un programador invitado a evaluar la conciencia de Ava, una asombrosa androide con inteligencia artificial, encarnada por Alicia Vikander. La película explora cuestiones existenciales y morales a medida que se desarrolla un tenso juego de engaño entre creador y creación. Con una narrativa intensa y visuales cautivadores, Ex Machina ofrece una meditación provocadora sobre la relación entre humanos y máquinas, desafiando las fronteras de la inteligencia artificial.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/ex-machina.jpeg",
     "facts": {
-      "yearOfBirth": "1936",
-      "birthPlace": "Paoli, Indiana, Estados Unidos",
-      "mainField": "Ciencia de la Computación"
+      "yearMovie": 2014,
+      "directorMovie": "Alex Garland",
+      "productionCompany": "A24",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
     },
     "extraInfo": {
-      "imageSource": "https://odetta.ai/blogs/margaret-hamilton-the-first-software-engineer"
+      "rottenTomatoesScore": "92%",
+      "countryMovie": "Reino Unido",
+      "durationMovie": "108 minutos"
     }
   },
   {
-    "id": "radia-perlman",
-    "name": "Radia Perlman",
-    "shortDescription": "Ingeniera de redes, inventora del algoritmo Spanning Tree.",
-    "description": "Científica de la computación estadounidense, ha dejado una marca indeleble en el mundo de las redes informáticas y la seguridad. Conocida como \"la madre de Internet\", su invención del algoritmo Spanning Tree Protocol (STP) revolucionó la conectividad de redes y sentó las bases para la infraestructura de Internet moderna. A pesar de operar en un campo dominado por hombres, Perlman ha demostrado que las mujeres pueden liderar avances tecnológicos vitales. Su compromiso con la resiliencia de las redes y la ciberseguridad ha influido en la estabilidad y confiabilidad de la comunicación en línea.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/radia-perlman.jpg",
+    "id": "the-net",
+    "name": "The Net",
+    "shortDescription": "Una analista de sistemas se convierte en blanco de una conspiración informática.",
+    "description": "Es un thriller tecnológico que sigue la vida de Angela Bennett, interpretada por Sandra Bullock, una experta en sistemas que se encuentra atrapada en una red de conspiración. Después de recibir un disco con información confidencial, su identidad es eliminada, y se ve envuelta en una red de engaños y peligros en línea. La película, lanzada en 1995, anticipa cuestiones actuales sobre privacidad y ciberseguridad, proporcionando una visión fascinante y, a veces inquietante, de los riesgos asociados con la creciente dependencia de la tecnología y la conectividad.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-net.jpeg",
     "facts": {
-      "yearOfBirth": "1951",
-      "birthPlace": "Portsmouth, Estados Unidos",
-      "mainField": "Ciencia de la Computación"
+      "yearMovie": 1995,
+      "directorMovie": "Irwin Winkler",
+      "productionCompany": "Columbia Pictures",
+      "genreMovie": "Thriller",
+      "genreValue": "thriller"
     },
     "extraInfo": {
-      "imageSource": "https://hackaday.com/2018/05/29/spanning-the-tree-dr-radia-perlman-untangling-networks/"
+      "rottenTomatoesScore": "36%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "114 minutos"
     }
   },
   {
-    "id": "shafi-goldwasser",
-    "name": "Shafi Goldwasser",
-    "shortDescription": "Científica de la computación, ganadora del Premio Turing.",
-    "description": "Es una destacada criptógrafa y científica de la computación que ha contribuido significativamente a la teoría de la computación y la seguridad de la información. Su trabajo en criptografía de probabilidad y complejidad computacional ha sentado las bases para la seguridad en línea y la privacidad de datos en un mundo cada vez más digitalizado. Goldwasser es un ejemplo de cómo la ciencia de la computación puede abordar desafíos contemporáneos y proteger la información en la era de la información.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/shafi-goldwasser.jpg",
+    "id": "terms-and-conditions-may-apply",
+    "name": "T&C may apply",
+    "shortDescription": "Implicaciones de aceptar términos y condiciones en línea.",
+    "description": "es un documental revelador que examina el precio de la privacidad en la era digital. A través de entrevistas y análisis detallados, la película destapa los términos y condiciones a menudo ignorados de servicios en línea y aplicaciones, destacando cómo las corporaciones tecnológicas recopilan y utilizan datos personales. Revelando los riesgos de la vigilancia masiva, el documental plantea preguntas críticas sobre la privacidad individual y la pérdida de control en un mundo cada vez más conectado, ofreciendo una perspectiva impactante sobre el trueque inadvertido de la privacidad por conveniencia digital.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/terms-and-conditions-may-apply.jpeg",
     "facts": {
-      "yearOfBirth": "1958",
-      "birthPlace": "Nueva York, Estados Unidos",
-      "mainField": "Ciencia de la Computación"
+      "yearMovie": 2013,
+      "directorMovie": "Cullen Hoback",
+      "productionCompany": "Hybrid Cinema",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://www.jahresbericht2019.unibe.ch/successes_2019/einstein_lectures/index_eng.html"
+      "rottenTomatoesScore": "78%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "79 minutos"
     }
   },
   {
-    "id": "chien-shiung-wu",
-    "name": "Chien-Shiung Wu",
-    "shortDescription": "Física experimental, contribuyó a la física nuclear.",
-    "description": "Física experimental de origen chino, desafiando los prejuicios de género y nacionalidad, realizó experimentos fundamentales en física de partículas y contribuyó significativamente a la comprensión de la desintegración beta. Su famoso experimento \"Wu\" refutó la paridad en la física de partículas, lo que cambió la forma en que los científicos comprenden las fuerzas fundamentales de la naturaleza. Wu demostró que el talento y la perseverancia pueden superar cualquier barrera, y su legado sigue siendo un faro de inspiración para científicas en todo el mundo.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/chien-shiung-wu.jpg",
+    "id": "wargames",
+    "name": "WarGames",
+    "shortDescription": "Un joven hacker desencadena una simulación de guerra global.",
+    "description": "Es un clásico de culto de los años 80 que fusiona la intriga tecnológica con la amenaza global. Matthew Broderick interpreta a David Lightman, un joven hacker que, sin saberlo, entra en el sistema de defensa nuclear de Estados Unidos mientras juega un videojuego. Lo que comienza como un inocente desafío se convierte en un tenso enfrentamiento internacional cuando el sistema interpreta sus acciones como una amenaza real. WarGames ofrece una mirada cautivadora a las implicaciones de la tecnología en la seguridad global, explorando la delgada línea entre juego y realidad.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/wargames.png",
     "facts": {
-      "yearOfBirth": "1912",
-      "yearOfDeath": "1997",
-      "birthPlace": "Liuhe, Taicang, China",
-      "mainField": "Física"
+      "yearMovie": 1983,
+      "directorMovie": "John Badham",
+      "productionCompany": "United Artists",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
     },
     "extraInfo": {
-      "imageSource": "https://www.thoughtco.com/chien-shiung-wu-biography-3530366"
+      "rottenTomatoesScore": "93%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "114 minutos"
     }
   },
   {
-    "id": "hedy-lamarr",
-    "name": "Hedy Lamarr",
-    "shortDescription": "Actriz e inventora, contribuyó al desarrollo de la tecnología de espectro ensanchado.",
-    "description": "Actriz austroamericana y científica, fue una mente brillante en la intersección de la tecnología y el entretenimiento. Junto con el compositor George Antheil, inventó un sistema de comunicación secreta durante la Segunda Guerra Mundial que sentó las bases para la tecnología de espectro ensanchado y la comunicación inalámbrica moderna. Lamarr demostró que las mujeres pueden destacar tanto en el cine como en la ciencia, y su legado como inventora ha sido fundamental para el desarrollo de la tecnología de comunicación inalámbrica que usamos en la actualidad.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/hedy-lamarr.jpg",
+    "id": "codegirl",
+    "name": "CodeGirl",
+    "shortDescription": "Un grupo de chicas programadoras compite en un concurso internacional.",
+    "description": "Es un inspirador documental que sigue a jóvenes programadoras de todo el mundo que compiten en la Technovation Challenge. Enfrentándose a desafíos sociales y tecnológicos, estas chicas buscan crear aplicaciones que aborden problemas locales. La película resalta la importancia de la inclusión de género en el campo de la tecnología, mostrando el poder transformador de la programación para empoderar a las jóvenes. CodeGirl ofrece una mirada conmovedora y optimista a la próxima generación de mujeres en la industria tecnológica, destacando su creatividad y capacidad para hacer cambios significativos en sus comunidades.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/codegirl.jpg",
     "facts": {
-      "yearOfBirth": "1914",
-      "yearOfDeath": "2000",
-      "birthPlace": "Viena, Austria",
-      "mainField": "Actuación, Física"
+      "yearMovie": 2015,
+      "directorMovie": "Lesley Chilcott",
+      "productionCompany": "FilmBuff",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://www.sparkfun.com/news/6147"
+      "rottenTomatoesScore": "Not available",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "107 minutos"
     }
   },
   {
-    "id": "maria-goeppert-mayer",
-    "name": "Maria Goeppert Mayer",
-    "shortDescription": "Física teórica, ganadora del Premio Nobel de Física.",
-    "description": "Física teórica alemana-estadounidense, dejó una profunda huella en la física nuclear y la mecánica cuántica. Fue la segunda mujer en recibir el Premio Nobel de Física y su trabajo pionero en la estructura de capas nucleares revolucionó nuestra comprensión de los núcleos atómicos. A pesar de las barreras de género en la academia, su dedicación y talento la llevaron a contribuir significativamente a la teoría nuclear, abriendo el camino para futuras investigadoras en un campo dominado por hombres. Maria Goeppert Mayer es un ejemplo inspirador de excelencia científica y perseverancia en la búsqueda del conocimiento.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/maria-goeppert-mayer.jpg",
+    "id": "algorithm",
+    "name": "Algorithm",
+    "shortDescription": "Exploración de la relación entre humanos y algoritmos en la era digital.",
+    "description": "Es un thriller de suspense que explora el lado oscuro de la inteligencia artificial. La película sigue a un periodista, interpretado por Raphael Barker, mientras investiga una serie de misteriosas muertes relacionadas con un algoritmo de predicción criminal. A medida que profundiza en el mundo de la vigilancia y la tecnología, se enfrenta a una conspiración que desafía los límites éticos de la inteligencia artificial. Con giros impredecibles y un enfoque en los dilemas éticos, Algorithm ofrece una mirada inquietante a las consecuencias imprevistas de la automatización en la toma de decisiones.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/algorithm.png",
     "facts": {
-      "yearOfBirth": "1906",
-      "yearOfDeath": "1972",
-      "birthPlace": "Kattowitz, Alemania",
-      "mainField": "Física"
+      "yearMovie": 2014,
+      "directorMovie": "Jonathan Schiefer",
+      "productionCompany": "Diginuke",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://www.wsemexhibit.org/maria-goeppert-mayer.html"
+      "rottenTomatoesScore": "Not available",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "90 minutos"
     }
   },
   {
-    "id": "lise-meitner",
-    "name": "Lise Meitner",
-    "shortDescription": "Física nuclear, contribuyó a la teoría de la fisión nuclear.",
-    "description": "Física austriaca-sueca, dejó un legado imborrable en la física nuclear y la radioquímica. A pesar de enfrentar obstáculos de género en una era dominada por hombres, colaboró con Otto Hahn en el descubrimiento de la fisión nuclear, un avance revolucionario. Aunque no compartió el Premio Nobel por este logro, su contribución fue crucial para comprender la energía nuclear y la física de partículas. Su determinación y pasión por la ciencia han inspirado a generaciones de científicas. Lise Meitner es un símbolo perdurable de la perseverancia femenina y el impacto duradero que las mujeres pueden tener en la ciencia.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/lise-meitner.jpg",
+    "id": "the-great-hack",
+    "name": "The Great Hack",
+    "shortDescription": "Exploración de la manipulación de datos en elecciones políticas.",
+    "description": "Es un revelador documental que examina el impacto de la explotación de datos en la era de la información. A través de las historias de individuos afectados y expertos en tecnología, la película destapa la manipulación masiva de datos por parte de grandes corporaciones y la influencia en eventos políticos clave, como el referéndum del Brexit y las elecciones de EE. UU. Revelando las complejidades de la privacidad en la era digital, The Great Hack plantea cuestionamientos cruciales sobre la democracia, la vigilancia y la responsabilidad en un mundo conectado.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-great-hack.jpeg",
     "facts": {
-      "yearOfBirth": "1878",
-      "yearOfDeath": "1968",
-      "birthPlace": "Viena, Austria",
-      "mainField": "Física"
+      "yearMovie": 2019,
+      "directorMovie": "Karim Amer, Jehane Noujaim",
+      "productionCompany": "Netflix",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://www.bing.com/images/create/lise-meitner-in-nuclear-physics-lab-in-19502c-retro/651196e6bbcb4009950e9955c2199760"
+      "rottenTomatoesScore": "86%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "114 minutos"
     }
   },
   {
-    "id": "sau-lan-wu",
-    "name": "Sau Lan Wu",
-    "shortDescription": "Física de partículas, contribuyó a experimentos clave en física de alta energía.",
-    "description": "Física experimental sinoamericana, ha sido una fuerza motriz en la física de partículas. Destacó en experimentos en el CERN y lideró investigaciones cruciales, como el descubrimiento del quark c, que expandieron nuestro entendimiento de la estructura fundamental de la materia. Wu superó desafíos en una disciplina dominada por hombres y ha sido un faro de inspiración para científicas de todo el mundo. Sau Lan Wu es un ejemplo de excelencia científica y de cómo las mujeres pueden dejar huella en la investigación de vanguardia.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/sau-lan-wu.jpg",
+    "id": "the-cleaners",
+    "name": "The Cleaners",
+    "shortDescription": "Exploración de los moderadores de contenido en redes sociales.",
+    "description": "Es un documental impactante que explora el oscuro mundo de la moderación de contenido en las redes sociales. La película revela la vida de los limpiadores digitales, trabajadores anónimos que eliminan contenido perturbador y potencialmente peligroso de las plataformas en línea. Profundizando en la complejidad ética de sus decisiones y el impacto en la libertad de expresión, The Cleaners arroja luz sobre la responsabilidad de las grandes empresas tecnológicas en la regulación del discurso digital y plantea preguntas críticas sobre la censura y la influencia en la era de la información.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-cleaners.png",
     "facts": {
-      "yearOfBirth": "1940",
-      "birthPlace": "Hong Kong, China",
-      "mainField": "Física de Partículas"
+      "yearMovie": 2018,
+      "directorMovie": "Hans Block, Moritz Riesewieck",
+      "productionCompany": "Gebrueder Beetz Filmproduktion",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
     },
     "extraInfo": {
-      "imageSource": "https://repository.aip.org/islandora/object/nbla%3A315195"
+      "rottenTomatoesScore": "84%",
+      "countryMovie": "Alemania",
+      "durationMovie": "88 minutos"
     }
   },
   {
-    "id": "jocelyn-bell-burnell",
-    "name": "Jocelyn Bell Burnell",
-    "shortDescription": "Astrónoma y astrofísica, co-descubridora de los púlsares.",
-    "description": "Astrofísica británica, es una figura extraordinaria en la ciencia. Durante su doctorado, hizo un descubrimiento revolucionario al detectar los primeros púlsares, estrellas de neutrones altamente magnetizadas que emiten pulsos regulares de radiación. A pesar de que su asesor recibió el Premio Nobel por este descubrimiento, Bell Burnell se ha convertido en un símbolo de perseverancia y contribución de las mujeres a la astronomía. Su carrera distinguida y su activismo en favor de la diversidad de género en la ciencia han inspirado a generaciones futuras de científicas. Jocelyn Bell Burnell es un ejemplo de valentía y excelencia científica.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/jocelyn-bell-burnell.jpg",
+    "id": "ghost-in-the-shell",
+    "name": "Ghost in the Shell",
+    "shortDescription": "Exploración filosófica de la identidad en un mundo ciberpunk.",
+    "description": "Es un icónico thriller de ciencia ficción que explora la convergencia entre humanidad y tecnología en un futuro cyberpunk. Basada en el manga homónimo, la película sigue a Motoko Kusanagi, una cíborg que lidera la unidad de seguridad cibernética. En un mundo donde las líneas entre humano y máquina se desdibujan, la trama indaga en la identidad, la conciencia y la ética de la inteligencia artificial. Con visuales impresionantes y filosofía profunda, Ghost in the Shell ha dejado una duradera marca, inspirando obras posteriores en el género cibernético y de ciencia ficción.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/ghost-in-the-shell.jpg",
     "facts": {
-      "yearOfBirth": "1943",
-      "birthPlace": "Belfast, Reino Unido",
-      "mainField": "Astronomía, Astrofísica"
+      "yearMovie": 2001,
+      "directorMovie": "Mamoru Oshii",
+      "productionCompany": "Bandai Visual",
+      "genreMovie": "Animación",
+      "genreValue": "animation"
     },
     "extraInfo": {
-      "imageSource": "https://womeninscienceweadmire.icfo.eu/wiswa-2/jocelyn-bell/"
+      "rottenTomatoesScore": "96%",
+      "countryMovie": "Japón",
+      "durationMovie": "82 minutos"
     }
   },
   {
-    "id": "dorothy-crowfoot-hodgkin",
-    "name": "Dorothy Crowfoot Hodgkin",
-    "shortDescription": "Química, ganadora del Premio Nobel de Química.",
-    "description": "Química británica, es una figura icónica en la ciencia que superó las barreras de género de su época. Su trabajo revolucionario en la cristalografía de rayos X permitió determinar la estructura de importantes biomoléculas, como la penicilina, la vitamina B12 y la insulina. Fue galardonada con el Premio Nobel de Química en 1964, siendo la tercera mujer en recibir este prestigioso reconocimiento. Hodgkin no solo fue una científica excepcional, sino también una defensora de la igualdad de género en la ciencia, allanando el camino para futuras generaciones de científicas y dejando un legado duradero en la investigación y la equidad.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/dorothy-crowfoot-hodgkin.jpg",
+    "id": "2001-a-space-odyssey",
+    "name": "2001: A Space Odyssey",
+    "shortDescription": "Odisea cósmica que explora la evolución humana y la inteligencia artificial.",
+    "description": "Es una obra maestra del cine de ciencia ficción que redefine el género. La película sigue la misión espacial a Júpiter y la inteligencia artificial HAL 9000. Con una narrativa audaz y visualmente impactante, la película aborda la evolución humana, la inteligencia artificial, y la relación entre la humanidad y la tecnología. Desde la misteriosa monolito hasta el inolvidable viaje a través de las estrellas, 2001: A Space Odyssey es una experiencia cinematográfica única y provocadora que ha dejado una huella duradera en la historia del cine.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/2001.png",
     "facts": {
-      "yearOfBirth": "1910",
-      "yearOfDeath": "1994",
-      "birthPlace": "El Cairo, Egipto / Shipston-on-Stour, Reino Unido",
-      "mainField": "Química"
+      "yearMovie": 1968,
+      "directorMovie": "Stanley Kubrick",
+      "productionCompany": "Metro-Goldwyn-Mayer",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
     },
     "extraInfo": {
-      "imageSource": "https://www.some.ox.ac.uk/news/jan-royall-why-we-must-champion-dorothy-hodgkin-for-the-50-note/"
+      "rottenTomatoesScore": "93%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "149 minutos"
     }
   },
   {
-    "id": "marie-curie",
-    "name": "Marie Curie",
-    "shortDescription": "Física y química, ganadora de dos Premios Nobel.",
-    "description": "física y química de origen polaco y nacionalizada francesa, es una de las figuras más icónicas en la historia de la ciencia. Ganadora de dos premios Nobel (Física en 1903 y Química en 1911), Curie realizó investigaciones fundamentales sobre la radiactividad y el descubrimiento de los elementos radio y polonio. Su dedicación y valentía en la investigación científica, a pesar de los desafíos de la discriminación de género y los riesgos de la radiación, la convierten en un modelo a seguir para científicas de todo el mundo.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/marie-curie.jpg",
+    "id": "wall-e",
+    "name": "Wall-E",
+    "shortDescription": "Aventuras de un pequeño robot dejado para limpiar la Tierra desierta.",
+    "description": "Es un conmovedor relato animado ambientado en una Tierra desolada abandonada por los humanos. La historia sigue a Wall-E, un pequeño robot recolector de desechos dejado atrás, mientras descubre el amor y el propósito entre los restos descartados de la civilización humana. Con un diálogo mínimo, la película transmite de manera hermosa mensajes medioambientales y explora la resistencia de la vida. La encantadora personalidad de Wall-E y la narrativa conmovedora hacen de ella una obra maestra visualmente impresionante y emocionalmente resonante. Continúa cautivando a las audiencias con sus temas atemporales y animación excepcional, ganando amplio reconocimiento por su narrativa reflexiva.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/walle.png",
     "facts": {
-      "yearOfBirth": "1867",
-      "yearOfDeath": "1934",
-      "birthPlace": "Varsovia, Polonia",
-      "mainField": "Física y Química"
+      "yearMovie": 2008,
+      "directorMovie": "Andrew Stanton",
+      "productionCompany": "Walt Disney Pictures",
+      "genreMovie": "Animación",
+      "genreValue": "animation"
     },
     "extraInfo": {
-      "imageSource": "https://www.historyextra.com/period/first-world-war/life-of-the-week-marie-curie/"
+      "rottenTomatoesScore": "95%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "98 minutos"
     }
   },
   {
-    "id": "marjory-stephenson",
-    "name": "Marjory Stephenson",
-    "shortDescription": "Microbióloga y bioquímica, investigó en enzimología.",
-    "description": "Bioquímica británica, brilló como científica en una época en la que las mujeres enfrentaban obstáculos muy significativos en la investigación científica. Su trabajo pionero en microbiología, enzimología y bioquímica contribuyó al entendimiento de procesos fundamentales en la vida. Fue una de las primeras mujeres en ser elegida miembro de la Royal Society, un reconocimiento a su destacada contribución a la ciencia. Además, fue una mentora y defensora de las mujeres en la ciencia, inspirando y allanando el camino para futuras generaciones.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/marjory-stephenson.jpg",
+    "id": "ready-player-one",
+    "name": "Ready Player One",
+    "shortDescription": "Aventura virtual en un mundo distópico dentro de un OASIS.",
+    "description": "Es un emocionante viaje a un futuro distópico donde la humanidad se refugia en OASIS, un vasto universo virtual. La historia sigue a Wade Watts, quien busca un tesoro digital dentro de OASIS para cambiar su vida y desafiar a la malévola corporación IOI. Llena de referencias pop y aventuras virtuales, la película celebra la cultura de los videojuegos y la nostalgia de los años 80. Con visuales deslumbrantes y una narrativa llena de acción, Ready Player One es un festín para los amantes de la cultura geek y una emocionante odisea para todos.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/ready-player-one.jpeg",
     "facts": {
-      "yearOfBirth": "1885",
-      "yearOfDeath": "1948",
-      "birthPlace": "Londres, Reino Unido",
-      "mainField": "Química, Microbiología, Bioquímica"
+      "yearMovie": 2018,
+      "directorMovie": "Steven Spielberg",
+      "productionCompany": "Warner Bros.",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
     },
     "extraInfo": {
-      "imageSource": "https://microbiologysociety.org/grants-prizes/all-prizes-and-competitions-/prize-lectures/marjory-stephenson-prize-lecture/marjory-stephenson-a-short-history.html"
+      "rottenTomatoesScore": "72%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "140 minutos"
     }
   },
   {
-    "id": "rosalind-franklin",
-    "name": "Rosalind Franklin",
-    "shortDescription": "Química y cristalógrafa, contribuyó a la comprensión de la estructura del ADN.",
-    "description": "Química y cristalógrafa británica, destacó en un campo dominado por hombres y su contribución a la ciencia es innegable. Sus investigaciones pioneras en la cristalografía de rayos X fueron fundamentales para revelar la estructura del ADN en forma de doble hélice, un hito crucial en la biología molecular. A pesar de que su trabajo inicial fue subestimado, su determinación y habilidad científica allanaron el camino para futuros avances en genética y biología. Franklin es un ejemplo inspirador de cómo las mujeres pueden sobresalir en la ciencia, dejando un legado duradero en la investigación y la igualdad de género.",
-    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/rosalind-franklin.jpg",
+    "id": "the-matrix",
+    "name": "The Matrix",
+    "shortDescription": "Realidad virtual en un mundo distópico en rebelión contra las máquinas.",
+    "description": "Es un épico de ciencia ficción que transporta a los espectadores a un mundo distópico donde la realidad es una ilusión. Neo, interpretado por Keanu Reeves, descubre la verdad detrás de su existencia al unirse a la resistencia contra las máquinas que controlan la realidad simulada. Con efectos visuales revolucionarios y una narrativa fascinante, la película desafía los límites de la percepción y la libertad individual. The Matrix se ha convertido en un clásico moderno, explorando temas de identidad, libre albedrío y el poder de la mente en un cautivador viaje cinematográfico.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/the-matrix.jpeg",
     "facts": {
-      "yearOfBirth": "1920",
-      "yearOfDeath": "1958",
-      "birthPlace": "Londres, Reino Unido",
-      "mainField": "Química, Cristalografía"
+      "yearMovie": 1999,
+      "directorMovie": "The Wachowskis",
+      "productionCompany": "Warner Bros.",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
     },
     "extraInfo": {
-      "imageSource": ""
+      "rottenTomatoesScore": "88%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "136 minutos"
     }
   }
+
 ];
+
+//console.log("Estoy mostrando la data", data);
+export default data;
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
index 5de554af..9913e3d9 100644
--- a/src/dataFunctions.js
+++ b/src/dataFunctions.js
@@ -1,9 +1,129 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+//Función que filtra
+export const filterData = (data, filterBy, value) => {
+  const filterMovie = data.filter(film => film.facts[filterBy] === value);
+  return filterMovie;
+};
+
+
+//Función que ordena
+export const sortData = (data, sortBy, sortOrder) => {
+  const sortedData = data.sort((a, b) => {
+    if (sortOrder === "asc") {
+      if (typeof a.facts[sortBy] === 'number') {
+        return a.facts[sortBy] - b.facts[sortBy];
+      } else {
+        return String(a[sortBy]).localeCompare(String(b[sortBy]));
+      }
+    } else {
+      if (typeof a.facts[sortBy] === 'number') {
+        return b.facts[sortBy] - a.facts[sortBy];
+      } else {
+        return String(b[sortBy]).localeCompare(String(a[sortBy]));
+      }
+    }
+  });
+  return sortedData;
+};
+
+
+
+
+//Función para clasificar películas de la data según score en Rotten Tomatoes.
+export const computeStatsScore = (data) => {
+  //  Quitar porcentaje en score   data.extraInfo.rottenTomatoesScore
+  const scoreOut50 = data.filter((film) => {
+    const score = parseFloat(film.extraInfo.rottenTomatoesScore);
+    return 50 <= score && score < 70;
+  });
+
+  //console.log("Array de películas con puntaje mayor a 50 y menor a 70:");
+  //console.log(scoreOut50);
+
+  const scoreOut70 = data.filter((film) => {
+    const score = parseFloat(film.extraInfo.rottenTomatoesScore);
+    return 70 <= score && score < 90;
+  });
+
+  //console.log("Array de películas con puntaje mayor a 70 y menor a 90:");
+  //console.log(scoreOut70);
+
+  const scoreOut90 = data.filter((film) => {
+    const score = parseFloat(film.extraInfo.rottenTomatoesScore);
+    return 90 <= score && score <= 100;
+  });
+
+  //console.log("Array de películas con puntaje mayor o igual a 90 y menor o igual a 100:");
+  //console.log(scoreOut90);
 
-export const example = () => {
-  return 'example';
+  const perOut50 = Math.round((scoreOut50.length * 100) / data.length);
+  //console.log("Porcentaje de películas con puntaje mayor a 50 y menor a 70:");
+  //console.log(perOut50);
+
+  const perOut70 = Math.round((scoreOut70.length * 100) / data.length);
+  //console.log("Porcentaje de películas con puntaje mayor a 70 y menor a 90:");
+  //console.log(perOut70);
+
+  const perOut90 = Math.round((scoreOut90.length * 100) / data.length);
+  //console.log("Porcentaje de películas con puntaje mayor o igual a 90 y menor o igual a 100:");
+  //console.log(perOut90);
+
+  return {
+    scoreOut50,
+    scoreOut70,
+    scoreOut90,
+    perOut50,
+    perOut70,
+    perOut90
+  };
 };
 
-export const anotherExample = () => {
-  return [];
+
+
+//Función para calcular frecuencia de países.
+export const computeStats = (data) => {
+  const countryFrequencies = data.map((movie) => {
+    const country = movie.extraInfo.countryMovie;
+    const name = movie.name;
+
+    return {
+      country,
+      movieName: name,
+    };
+  });
+
+  const countryFrequency = countryFrequencies.reduce((acumulador, movie) => {
+    const country = movie.country;
+
+    // Verificar si el país ya está en el acumulador
+    if (!acumulador[country]) {
+      acumulador[country] = {
+        count: 0,
+        movies: []
+      };
+    }
+
+    // Incrementar la frecuencia y agregar la película a la lista
+    acumulador[country].count += 1;
+    acumulador[country].movies.push(movie.movieName);
+
+    return acumulador;
+  }, {});
+
+  // Devolver la frecuencia de películas por país directamente
+  return countryFrequency;
 };
+
+/*export const filterData = (data, filterBy, value) => {
+  const filteredData = data.filter(film => film.facts[filterBy] === value);
+  return filteredData;
+};*/
+
+/*export const sortData = (data, sortBy, sortOrder) => {
+  //console.log(sortBy);
+  const copyArray = [...data];
+  if (sortBy === "name") {
+    return copyArray.sort((a, b) => (sortOrder === "asc" ? a[sortBy].localeCompare(b[sortBy]) : b[sortBy].localeCompare(a[sortBy])));
+  } else if (sortBy === "yearMovie") {
+    return copyArray.sort((a, b) => (sortOrder === "asc" ? a.facts[sortBy] - b.facts[sortBy] : b.facts[sortBy] - a.facts[sortBy]));
+  }
+};*/
\ No newline at end of file
diff --git a/src/img/2001.png b/src/img/2001.png
new file mode 100644
index 00000000..410f2793
Binary files /dev/null and b/src/img/2001.png differ
diff --git a/src/img/Hackers.png b/src/img/Hackers.png
new file mode 100644
index 00000000..d448d9d3
Binary files /dev/null and b/src/img/Hackers.png differ
diff --git a/src/img/MovieDev.gif b/src/img/MovieDev.gif
new file mode 100644
index 00000000..c0d4bdf1
Binary files /dev/null and b/src/img/MovieDev.gif differ
diff --git a/src/img/algorithm.png b/src/img/algorithm.png
new file mode 100644
index 00000000..deaf7cf1
Binary files /dev/null and b/src/img/algorithm.png differ
diff --git a/src/img/avengers-age-of-ultron.png b/src/img/avengers-age-of-ultron.png
new file mode 100644
index 00000000..57eb3251
Binary files /dev/null and b/src/img/avengers-age-of-ultron.png differ
diff --git a/src/img/blade-runner.png b/src/img/blade-runner.png
new file mode 100644
index 00000000..bb22552d
Binary files /dev/null and b/src/img/blade-runner.png differ
diff --git a/src/img/citizenfour.jpeg b/src/img/citizenfour.jpeg
new file mode 100644
index 00000000..fac66813
Binary files /dev/null and b/src/img/citizenfour.jpeg differ
diff --git a/src/img/codegirl.jpg b/src/img/codegirl.jpg
new file mode 100644
index 00000000..50dd0315
Binary files /dev/null and b/src/img/codegirl.jpg differ
diff --git a/src/img/e-dreams.png b/src/img/e-dreams.png
new file mode 100644
index 00000000..eaf12ec8
Binary files /dev/null and b/src/img/e-dreams.png differ
diff --git a/src/img/ex-machina.jpeg b/src/img/ex-machina.jpeg
new file mode 100644
index 00000000..77e5c057
Binary files /dev/null and b/src/img/ex-machina.jpeg differ
diff --git a/src/img/ghost-in-the-shell.jpg b/src/img/ghost-in-the-shell.jpg
new file mode 100644
index 00000000..3e1fdafe
Binary files /dev/null and b/src/img/ghost-in-the-shell.jpg differ
diff --git a/src/img/her.png b/src/img/her.png
new file mode 100644
index 00000000..53efda4d
Binary files /dev/null and b/src/img/her.png differ
diff --git a/src/img/home.png b/src/img/home.png
new file mode 100644
index 00000000..9b0ca681
Binary files /dev/null and b/src/img/home.png differ
diff --git "a/src/img/icons8-men\303\272-16.png" "b/src/img/icons8-men\303\272-16.png"
new file mode 100644
index 00000000..5e337280
Binary files /dev/null and "b/src/img/icons8-men\303\272-16.png" differ
diff --git a/src/img/indie-game-the-movie.jpeg b/src/img/indie-game-the-movie.jpeg
new file mode 100644
index 00000000..5c668c51
Binary files /dev/null and b/src/img/indie-game-the-movie.jpeg differ
diff --git a/src/img/jobs.jpeg b/src/img/jobs.jpeg
new file mode 100644
index 00000000..2cecd64f
Binary files /dev/null and b/src/img/jobs.jpeg differ
diff --git a/src/img/menuHamb.svg b/src/img/menuHamb.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/src/img/prompting/data1.png b/src/img/prompting/data1.png
new file mode 100644
index 00000000..ef4ab79d
Binary files /dev/null and b/src/img/prompting/data1.png differ
diff --git a/src/img/prompting/data2.png b/src/img/prompting/data2.png
new file mode 100644
index 00000000..20094049
Binary files /dev/null and b/src/img/prompting/data2.png differ
diff --git a/src/img/prompting/data3.png b/src/img/prompting/data3.png
new file mode 100644
index 00000000..33d321c2
Binary files /dev/null and b/src/img/prompting/data3.png differ
diff --git a/src/img/prompting/data4.png b/src/img/prompting/data4.png
new file mode 100644
index 00000000..3bfb0ce4
Binary files /dev/null and b/src/img/prompting/data4.png differ
diff --git a/src/img/prompting/data5.png b/src/img/prompting/data5.png
new file mode 100644
index 00000000..6d14c920
Binary files /dev/null and b/src/img/prompting/data5.png differ
diff --git a/src/img/prompting/revolution-os-prompt.png b/src/img/prompting/revolution-os-prompt.png
new file mode 100644
index 00000000..a01e1b81
Binary files /dev/null and b/src/img/prompting/revolution-os-prompt.png differ
diff --git a/src/img/prompting/wall-e-prompt.png b/src/img/prompting/wall-e-prompt.png
new file mode 100644
index 00000000..3160d0f6
Binary files /dev/null and b/src/img/prompting/wall-e-prompt.png differ
diff --git a/src/img/ready-player-one.jpeg b/src/img/ready-player-one.jpeg
new file mode 100644
index 00000000..37e1b43d
Binary files /dev/null and b/src/img/ready-player-one.jpeg differ
diff --git a/src/img/revolution-os.jpeg b/src/img/revolution-os.jpeg
new file mode 100644
index 00000000..42c4ce3d
Binary files /dev/null and b/src/img/revolution-os.jpeg differ
diff --git a/src/img/short-circuit.png b/src/img/short-circuit.png
new file mode 100644
index 00000000..791340dc
Binary files /dev/null and b/src/img/short-circuit.png differ
diff --git a/src/img/terminator.jpeg b/src/img/terminator.jpeg
new file mode 100644
index 00000000..b921a92a
Binary files /dev/null and b/src/img/terminator.jpeg differ
diff --git a/src/img/terms-and-conditions-may-apply.jpeg b/src/img/terms-and-conditions-may-apply.jpeg
new file mode 100644
index 00000000..fd195a0f
Binary files /dev/null and b/src/img/terms-and-conditions-may-apply.jpeg differ
diff --git a/src/img/the-cleaners.png b/src/img/the-cleaners.png
new file mode 100644
index 00000000..2eb477ae
Binary files /dev/null and b/src/img/the-cleaners.png differ
diff --git a/src/img/the-great-hack.jpeg b/src/img/the-great-hack.jpeg
new file mode 100644
index 00000000..e87db12f
Binary files /dev/null and b/src/img/the-great-hack.jpeg differ
diff --git a/src/img/the-imitation-game.jpeg b/src/img/the-imitation-game.jpeg
new file mode 100644
index 00000000..d0267b41
Binary files /dev/null and b/src/img/the-imitation-game.jpeg differ
diff --git a/src/img/the-martian.jpeg b/src/img/the-martian.jpeg
new file mode 100644
index 00000000..ac7542aa
Binary files /dev/null and b/src/img/the-martian.jpeg differ
diff --git a/src/img/the-matrix.jpeg b/src/img/the-matrix.jpeg
new file mode 100644
index 00000000..122eebc6
Binary files /dev/null and b/src/img/the-matrix.jpeg differ
diff --git a/src/img/the-net.jpeg b/src/img/the-net.jpeg
new file mode 100644
index 00000000..24f32a7e
Binary files /dev/null and b/src/img/the-net.jpeg differ
diff --git a/src/img/the-pirates-of-silicon-valley.jpeg b/src/img/the-pirates-of-silicon-valley.jpeg
new file mode 100644
index 00000000..1bef24ac
Binary files /dev/null and b/src/img/the-pirates-of-silicon-valley.jpeg differ
diff --git a/src/img/the-social-dilemma.jpeg b/src/img/the-social-dilemma.jpeg
new file mode 100644
index 00000000..84f55cd0
Binary files /dev/null and b/src/img/the-social-dilemma.jpeg differ
diff --git a/src/img/the-social-network.jpeg b/src/img/the-social-network.jpeg
new file mode 100644
index 00000000..fe1a6f5b
Binary files /dev/null and b/src/img/the-social-network.jpeg differ
diff --git a/src/img/trippy-rgb.jpeg b/src/img/trippy-rgb.jpeg
new file mode 100644
index 00000000..0d9705c6
Binary files /dev/null and b/src/img/trippy-rgb.jpeg differ
diff --git a/src/img/walle.png b/src/img/walle.png
new file mode 100644
index 00000000..3b5a1cbd
Binary files /dev/null and b/src/img/walle.png differ
diff --git a/src/img/wargames.png b/src/img/wargames.png
new file mode 100644
index 00000000..540cda38
Binary files /dev/null and b/src/img/wargames.png differ
diff --git a/src/index.html b/src/index.html
index 411fac74..056ddac6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,19 +1,71 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <header>
-        <h1>Hello!</h1>
-    </header>
-    <label for="women">Women</label>
-    <select name="women" id="women">
+
+<head>
+  <meta charset="utf-8">
+  <title>MovieDev</title>
+  <link rel="stylesheet" href="style.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+  <header>
+    <div class="title">
+      <h1>MovieDev</h1>
+      <button class="open-menu">
+        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="25" viewBox="0 0 24 24">
+          <path d="M5,7h2h12c1.1,0,2-0.9,2-2s-0.9-2-2-2H7H5C3.9,3,3,3.9,3,5S3.9,7,5,7z" fill="#1F0441"></path><path d="M19,10h-3H5c-1.1,0-2,0.9-2,2s0.9,2,2,2h11h3c1.1,0,2-0.9,2-2S20.1,10,19,10z" fill="#1F0441"></path><path d="M19,17h-6H5c-1.1,0-2,0.9-2,2s0.9,2,2,2h8h6c1.1,0,2-0.9,2-2S20.1,17,19,17z" fill="#1F0441"></path>
+        </svg>
+      </button>
+    </div>
+  </header>
+
+    <div class="inputs">
+      <label for="genre"><strong>Filtrar por género</strong></label>
+      <select name="genre" id="genre" data-testid="select-filter">
+      <option value="a" selected disabled>Selecciona filtro</option>
+      <option value="fiction">Ciencia Ficción</option>
+      <option value="animation">Animación</option>
+      <option value="thriller">Thriller</option>
+      <option value="documental">Documental</option>
+      <option value="drama">Drama</option>
     </select>
-    <div id="root"></div>
-    <footer></footer>
-    <script src="main.js" type="module"></script>
-  </body>
-</html>
+    
+    <label for="alfa"><strong>Ordenar alfabéticamente</strong></label>
+    <select name="alfa" id="alfa" data-testid="select-sort">
+      <option value="a" selected disabled>Selecciona orden</option>
+      <option value="asc">A - Z</option>
+      <option value="desc">Z - A</option>
+    </select>
+
+    <label for="year"><strong>Ordenar por año</strong></label>
+    <select name="year" id="year" data-testid="select-sort-year">
+      <option value="a" selected disabled>Selecciona orden</option>
+      <option value="asc">Ascendente</option>
+      <option value="desc">Descendente</option>
+    </select>
+
+    <label for="statistics"><strong>Estadísticas RT</strong></label>
+    <select name="statistics" id="statistics">
+      <option value="a" selected disabled>Estadísticas</option>
+      <option value="score50">50% y 70% en RT</option>
+      <option value="score70">70% y 90% en RT</option>
+      <option value="score90">90% y 100% en RT</option>
+    </select>
+    
+    <label for="statistics-country"><strong>Estadísticas por países</strong></label>
+    <select name="statistics-country" id="statistics-country">
+      <option value="a" selected disabled>Estadísticas</option>
+      <option value="country">Películas por país</option>
+    </select>
+
+    <button id="btn" data-testid="button-clear">Limpiar</button>
+
+  </div>
+ 
+  <div id="root"></div>
+  <footer>M.O.Dev</footer>
+  <script src="main.js" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index cab4fb0c..eef64130 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,245 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
-
+import { sortData, filterData, computeStats, computeStatsScore } from './dataFunctions.js';
+import { renderItems, renderItemsStadistics } from './view.js';
 import data from './data/dataset.js';
+let currentMovies = [...data];
+
+const toggleMovieCards = () => {
+  const movieCards = document.querySelector(".cards");
+  movieCards.classList.toggle("cards-menu");
+}
+
+function renderAndAppendToRoot(data) {
+  const rootElement = document.querySelector('#root');
+  if (rootElement) {
+    const renderedHTML = renderItems(data);
+    rootElement.innerHTML = renderedHTML;
+  }
+}
+renderAndAppendToRoot(data);
+
+function renderAndAppendToRootStadistics(data, title, percent) {
+  const rootElement = document.querySelector('#root');
+  if (rootElement) {
+    const renderedHTML = renderItemsStadistics(data, title, percent);
+    rootElement.innerHTML = renderedHTML;
+  }
+}
+
+const resetCardDiv = () => {
+  statisticsCountrySelect.selectedIndex = "";
+  if (cardDiv) {
+    cardDiv.style.display = 'none';
+    while (cardDiv.firstChild) {
+      cardDiv.removeChild(cardDiv.firstChild);
+    }
+  }
+};
+
+const btnFilterGenre = document.getElementById("genre");
+btnFilterGenre.addEventListener("change", (e) => {
+
+  const filterGenre = filterData(data, "genreValue", e.target.value);
+  currentMovies = [...filterGenre];
+  //console.log("Estoy ordenando por género", filterGenre);
+  renderAndAppendToRoot(filterGenre);
+  resetCardDiv();
+  toggleMovieCards();
+}
+);
+
+
+const btnOrdenName = document.getElementById("alfa");
+btnOrdenName.addEventListener("change", (e) => {
+
+  const orderedData = sortData(currentMovies, "name", e.target.value);
+  currentMovies = [...orderedData];
+  //console.log("Estoy ordenando alfabéticamente", orderedData);
+  renderAndAppendToRoot(orderedData);
+  resetCardDiv();
+  toggleMovieCards();
+}
+);
+
+
+const btnOrderYear = document.getElementById("year");
+btnOrderYear.addEventListener("change", (e) => {
+
+  const orderYear = sortData(currentMovies, "yearMovie", e.target.value);
+  currentMovies = [...orderYear];
+  //console.log(orderYear);
+  renderAndAppendToRoot(orderYear);
+  resetCardDiv();
+  toggleMovieCards();
+
+
+}
+);
+
+// Este btn limpia los imputs en el menú de selección
+const btn = document.querySelector("#btn");
+
+let statisticsCountrySelect = document.querySelector("#statistics-country");
+const resetfilters = () => {
+  resetCardDiv();
+
+  const genreSelect = document.getElementById("genre");
+  const alfaSelect = document.getElementById("alfa");
+  const yearSelect = document.getElementById("year");
+  const statisticsSelect = document.getElementById("statistics");
+  statisticsCountrySelect = document.getElementById("statistics-country");
+
+  if (genreSelect) {
+    genreSelect.selectedIndex = "";
+  }
+
+  if (alfaSelect) {
+    alfaSelect.selectedIndex = "";
+  }
+
+  if (yearSelect) {
+    yearSelect.selectedIndex = "";
+  }
+
+  if (statisticsSelect) {
+    statisticsSelect.selectedIndex = "";
+  }
+
+  if (statisticsCountrySelect) {
+    statisticsCountrySelect.selectedIndex = "";
+  }
+
+  currentMovies = [...data];
+  renderAndAppendToRoot(data);
+  toggleMovieCards();
+
+
+};
+btn.addEventListener("click", resetfilters);
+
+
+const openMenu = document.querySelector(".open-menu");
+let menuOpen = false;
+openMenu.addEventListener("click", function () {
+  const menuInputs = document.querySelector(".inputs");
+  toggleMovieCards();
+
+  if (!menuOpen) {
+    menuInputs.style.display = "flex";
+    menuOpen = true;
+    
+  } else {
+    menuInputs.style.display = "none";
+    menuOpen = false;
+  }
+});
+
+/*if (!menuOpen) {
+  menuInputs.style.display = "flex";
+  menuOpen = true;
+} setTimeout(function () {
+  menuInputs.style.display = "none";
+  menuOpen = false;
+}, 9000);
+});*/
+
+//crear una constante para que en la pantalla no aparezca ninguna tarjeta renderizada
+const resetViewport = () => {
+  currentMovies = [];
+  renderAndAppendToRoot(currentMovies);
+};
+
+let cardDiv;
+let statistics;
+const btnStatistics = document.querySelector("#statistics-country");
+btnStatistics.addEventListener("change", () => {
+  resetViewport();
+  cardDiv = document.createElement("div");
+  cardDiv.className = "cards-two";
+
+  if (cardDiv) {
+    cardDiv.style.display = 'block'; 
+  }
+  statistics = computeStats(data);
+
+  // Crear un div para la tarjeta de estadística por países
+  //const positionHeader = document.querySelector("#position-header");
+  //document.body.insertBefore(cardDiv, positionHeader.nextSibling);
+
+  // Crear un título para la data dentro del div
+  const countryTitleParagraph = document.createElement("p");
+  countryTitleParagraph.innerHTML = "<strong>Películas tecnológicas por país en la data MovieDev:</strong>";
+  cardDiv.appendChild(countryTitleParagraph);
+
+  // Iterar sobre los resultados de computeStats para acumular películas por países
+  const keys = Object.keys(statistics);
+  for (let i = 0; i < keys.length; i++) {
+    const countryMovie = keys[i];
+    const countryInfo = statistics[countryMovie];
+
+    // Crear un párrafo para cada país
+    const countryInfoParagraph = document.createElement("p");
+    countryInfoParagraph.textContent = `${countryMovie}: ${countryInfo.count}`;
+
+    // Añadir el párrafo al div
+    cardDiv.appendChild(countryInfoParagraph);
+  }
+  const inputsElement = document.querySelector(".inputs");
+
+  // Insertar el div después de ".inputs"
+  if (inputsElement && inputsElement.parentNode) {
+    inputsElement.parentNode.insertBefore(cardDiv, inputsElement.nextSibling);
+  }
+  currentMovies = [...data];
+
+  // Insertar el div después del primer hijo del body
+  //console.log(statistics);
+});
+
+
+let orderData = [];
+const selectStadistics = document.querySelector("#statistics");
+//const stadisticsButton = document.querySelector("#statistics");
+//Función del select Stadistics
+//let stadistics = [];
+selectStadistics.addEventListener('change', (e) => {
+  resetCardDiv();
+
+  orderData = [];
+  //btnFilterGenre.setAttribute('disabled', 'true');
+  //console.log(e.target.value)
+  if (e.target.value === "score50") {
+    orderData = computeStatsScore(data);
+    //console.log("Data order: " + orderData);
+    return renderAndAppendToRootStadistics(orderData.scoreOut50, "Puntuación entre 50% y 70% de aprobación.", orderData.perOut50);
+  } else if (e.target.value === "score70") {
+    orderData = computeStatsScore(data);
+    return renderAndAppendToRootStadistics(orderData.scoreOut70, "Puntuación entre 70% y 90% de aprobación.", orderData.perOut70);
+  } else if (e.target.value === "score90") {
+    orderData = computeStatsScore(data);
+    return renderAndAppendToRootStadistics(orderData.scoreOut90, "Puntuación entre 90% y 100% de aprobación.", orderData.perOut90);
+  }
+})
+/*const estadistica = computeStatsScore(data);
+
+stadisticsButton.addEventListener("click", function () {
+  renderAndAppendToRoot(estadistica);
+  resetCardDiv();
+
+  //Escuchar click y cambiar display:none/flex
+  const elementClick = document.querySelector(".header-icons");
+  elementClick.addEventListener("click", function () {
+    const elementDiv = document.querySelector(".inputs");
+    if (elementDiv.style.display === "none") {
+      elementDiv.style.display = "flex";
+      //console.log(elementDiv);
+    } else {
+      elementDiv.style.display = "none";
+      //console.log(elementDiv);
+    }
+
+  });
+
+  computeStatsScore(data);
+  //console.log(estadistica);
 
-console.log(example, renderItems(data), data);
+});*/
diff --git a/src/style.css b/src/style.css
index e69de29b..86c6483b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,272 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Titan+One&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
+header {
+    margin: 0;
+}
+
+.open-menu {
+    display: block;
+    border: 0;
+    font-size: 1.2rem;
+    background-color: transparent;
+    cursor: pointer;
+    color: #1F0441;
+    font-family: 'Titan One', sans-serif;
+}
+
+select {
+    margin: 0;
+    width: 165px;
+    font-family: 'Courier New', Courier, monospace;
+    border-radius: 5px;
+    font-size: 14px;
+    color: white;
+    cursor: pointer;
+    background-color: #1F0441;
+    text-align: center;
+}
+
+.title {
+    padding-top: 15px;
+    width: 100vw;
+    height: 65px;
+    color: #1F0441;
+    background-color: #FCAB10;
+    text-align: center;
+    font-family: 'Titan One', sans-serif;
+    font-size: 15px;
+}
+
+.inputs {
+    position: absolute;
+    display: none;
+    flex-direction: column;
+    width: 200px;
+    background-color: #FCAB10;
+    font-family: 'Roboto Mono', monospace;
+    align-items:flex-end;
+    padding: 9px;
+    font-size: 14px;
+    color: #1F0441;
+    border-radius: 0 0 10px 0;
+    gap: 0.5rem;
+}
+
+body {
+    flex-grow: 1;
+    background-color: #1F0441;
+    color: #1F0441;
+}
+
+.cards {
+    width: 290px;
+    padding: 15px;
+    border-radius: 10px;
+    margin: 7px;
+    box-sizing: border-box;
+    background-color: #0CE3E8;
+    text-align: center;
+    font-size: 16px;
+    font-family: 'Roboto Mono', monospace;
+}
+
+img {
+    height: 17vw;
+    margin-bottom: 15px;
+    border-radius: 10px;
+}
+
+ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 20px;
+}
+
+.name-movie {
+    font-size: 20px;
+    margin-bottom: 3px;
+}
+
+.info-movie {
+    margin-bottom: 15px;
+}
+
+.year-movie {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+#btn {
+    margin: 30px 10px 10px 10px;
+    border-radius: 5px; 
+    background-color: transparent;
+    color: #1F0441;
+    font-family: 'Titan One', sans-serif;
+    border-color: #1F0441;
+    padding: 2px;
+    cursor: pointer;
+}
+
+.cards-two {
+    background-color: #0CE3E8;
+    width: 260px;
+    padding: 15px;
+    border-radius: 10px;
+    text-align: center;
+    font-size: 16px;
+    font-family: 'Roboto Mono', monospace;
+    margin-top: 120px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 111px;
+}
+
+.cards-menu {
+    margin-left: 200px;
+}
+
+footer {
+    background-color: #FCAB10;
+    color:#1F0441;
+    width: 100vw;
+    text-align: center;
+    padding: 5px;
+    font-family: 'Titan One', sans-serif;
+    position: relative;
+    bottom:0px;
+    bottom: 0;
+    left:0px;
+}
+
+h2{
+    margin-top: 15px;
+    color: white;
+    font-size: 20px;
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+h4{
+    color: white;
+    font-size: 20px;
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+@media (max-width: 600px) {
+    * {
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+    }
+    
+    header {
+        margin: 0;
+    }
+    .title {
+        padding-top: 7px;
+        width: 100vw;
+        height: 65px;
+        color: #1F0441;
+        background-color: #FCAB10;
+        text-align: center;
+        font-family: 'Titan One', sans-serif;
+        font-size: 10px;
+    }
+    
+    body {
+      background-color: white;
+      color: #1F0441;
+      flex-grow: 1;
+    }
+
+    .inputs {
+        position: absolute;
+        display: none;
+        flex-direction: column;
+        width: 130px;
+        background-color: #FCAB10;
+        font-family: 'Roboto Mono', monospace;
+        align-items:flex-end;
+        padding: 9px;
+        font-size: 12px;
+        color: #1F0441;
+        border-radius: 0 0 10px 0;
+        gap: 0.3rem;
+    }
+
+    img {
+        height: 14vw;
+        margin-bottom: 10px;
+        border-radius: 7px;
+    }
+    .cards {
+        width: 260px;
+        padding: 10px;
+        border-radius: 7px;
+        margin: 7px;
+        box-sizing: border-box;
+        background-color: #0CE3E8;
+        text-align: center;
+        font-size: 12px;
+        font-family: 'Roboto Mono', monospace;
+        flex-direction: column;
+    }
+
+    ul {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding: 20px;
+        align-content: center;
+    }
+    h2{
+        margin-top: 15px;
+        color: #1F0441;
+        font-size: 15px;
+        text-align: center;
+        font-family: 'Courier New', Courier, monospace;
+    }
+    
+    h4{
+        color: #1F0441;
+        font-size: 15px;
+        text-align: center;
+        font-family: 'Courier New', Courier, monospace;
+    }
+
+    select {
+        margin: 0;
+        width: 120px;
+        font-family: 'Courier New', Courier, monospace;
+        border-radius: 5px;
+        font-size: 12px;
+        color: #1F0441;
+        cursor: pointer;
+        background-color: white;
+        text-align: center;
+    }
+
+    .cards-two {
+        background-color: #0CE3E8;
+        width: 160px;
+        padding: 15px;
+        border-radius: 10px;
+        text-align: center;
+        font-size: 13px;
+        font-family: 'Roboto Mono', monospace;
+        margin-top: 120px;
+        margin-left: 160px;
+        margin-bottom: 111px;
+    }
+
+  }
diff --git a/src/view.js b/src/view.js
index ba3946c8..b92143ca 100644
--- a/src/view.js
+++ b/src/view.js
@@ -1,13 +1,44 @@
+//import data from "./data/dataset";
+
+
 export const renderItems = (data) => {
-  console.log(data)
+  //console.log(data)
   let html = '';
-  data.forEach(woman => html += `
-  
-    <ul>
-      <li itemtype="" itemscope="">${woman.name}</li>
-    </ul>
-  
-  `);
+  data.forEach(function (film) { 
+    html += `<li class="cards" itemscope itemtype="movie">
+              <dl>
+                <img src="${film.imageUrl}" alt=Imagen de la película: ${film.name} />
+                <dt></dt><dd class="name-movie" itemprop="name"><strong>${film.name}</strong></dd>
+                <dt></dt><dd class="year-movie" itemprop="yearMovie"><strong>(${film.facts.yearMovie})</strong></dd>
+                <dt></dt><dd class= "info-movie" itemprop="shortDescription">${film.shortDescription}</dd>
+                <dt></dt><dd itemprop="genreMovie"><strong>Género: </strong>${film.facts.genreMovie}</dd>
+
+              </dl>
+              </li>`
+  });
+
+  html = '<ul>' + html + '</ul>';
   return html;
 };
 
+export const renderItemsStadistics = (data,title,percent) => {
+  let html = '';
+  data.forEach(function (film) { 
+    html += `
+              <li class="cards" itemscope itemtype="movie">
+              <dl>
+                <img src="${film.imageUrl}" alt=${film.name} />
+                <dt></dt><dd class="tittle" itemprop="name"><strong>${film.name}</strong></dd>
+                <dt></dt><dd class="tittle" itemprop="year"><strong>(${film.facts.yearMovie})</strong></dd>
+                <dt></dt><dd class= "info-movie" itemprop="shortDescription">${film.shortDescription}</dd>
+                <dt></dt><dd itemprop="genreMovie"><strong>Género: </strong>${film.facts.genreMovie}</dd>
+                <dt></dt><dd itemprop="rottenTomatoesScore"><strong>Puntuación: </strong>${film.extraInfo.rottenTomatoesScore}</dd>
+              </dl>
+              </li>`
+  });
+
+  html = `<h2>${title}</h2>
+          <h4>Estas películas representan el ${percent}% de la data de MovieDev:</h4> 
+            <ul>${html}</ul>`;
+  return html;
+};
\ No newline at end of file
diff --git a/test/data.js b/test/data.js
index 077a202a..1e4ea0ed 100644
--- a/test/data.js
+++ b/test/data.js
@@ -1,52 +1,59 @@
-// Aqui puedes agregar los datos que necesites para tus pruebas
-// 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": "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"
+export const data = [
+  {
+    "id": "hackers",
+    "name": "Hackers",
+    "shortDescription": "Jóvenes hackers y aventureros luchan contra la injusticia.",
+    "description": "Ambientada en el mundo del ciberespacio, sigue a un grupo de jóvenes hackers liderados por Dade Murphy (interpretado por Jonny Lee Miller) y Kate Libby (interpretada por Angelina Jolie). Juntos, se embarcan en una emocionante aventura para exponer una conspiración corporativa. Con una estética vibrante y una banda sonora electrónica, la película captura la subcultura hacker de los años 90. Hackers se destaca por su representación única de la ciberseguridad y la cultura hacker en una época de rápido avance tecnológico.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/Hackers.png",
+    "facts": {
+      "yearMovie": 1995,
+      "directorMovie": "Iain Softley",
+      "productionCompany": "MGM",
+      "genreMovie": "Thriller",
+      "genreValue": "thriller"
+    },
+    "extraInfo": {
+      "rottenTomatoesScore": "32%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "107 minutos"
+    }
   },
-  "extraInfo": {
-    "imageSource": "https://www.bing.com/images/create/create-an-image-of-of-a-german-woman2c-a-pioneering/6510ddb1e8254b928b8f8f1d5e95fea4"
-  }
-},
-{
-  "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"
+  {
+    "id": "short-circuit",
+    "name": "Short Circuit",
+    "shortDescription": "Un robot militar adquiere conciencia y busca la libertad.",
+    "description": "Es una encantadora comedia de ciencia ficción que sigue a Johnny 5, un robot militar experimental que adquiere conciencia propia después de ser alcanzado por un rayo. Huyendo del ejército y buscando descubrir el mundo, Johnny 5 se embarca en una aventura de autodescubrimiento. La película combina humor, ternura y un toque de acción mientras Johnny 5 forma amistades y desafía su programación original. Short Circuit ofrece una mirada entrañable a la inteligencia artificial y a la conexión humana, convirtiéndose en un clásico querido desde su lanzamiento en 1986.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/short-circuit.png",
+    "facts": {
+      "yearMovie": 1986,
+      "directorMovie": "John Badham",
+      "productionCompany": "TriStar Pictures",
+      "genreMovie": "Ciencia ficción",
+      "genreValue": "fiction"
+    },
+    "extraInfo": {
+      "rottenTomatoesScore": "57%",
+      "countryMovie": "Estados Unidos",
+      "durationMovie": "98 minutos"
+    }
   },
-  "extraInfo": {
-    "imageSource": "https://www.bing.com/images/create/create-a-vivid-digital-artwork-or-painting-that-de/6510df0ebe1a4807af22175452761e1a"
-  }
-},];
+  {
+    "id": "indie-game-the-movie",
+    "name": "Indie Game: The Movie",
+    "shortDescription": "Historias detrás de la creación de videojuegos indie.",
+    "description": "Sumerge a los espectadores en la vida de apasionados desarrolladores de videojuegos independientes. Esta obra proporciona una visión profunda de los desafíos emocionales y creativos que enfrentan mientras luchan por plasmar sus visiones artísticas en el exigente mundo de los videojuegos. A través de testimonios íntimos, la película captura momentos de triunfo y desesperación, revelando la dedicación incansable que impulsa a estos creadores. Desde la lucha contra limitaciones financieras hasta la búsqueda de reconocimiento, Indie Game: The Movie ofrece una mirada cautivadora a la compleja travesía de quienes buscan dejar su marca en la industria del juego independiente.",
+    "imageUrl": "https://raw.githubusercontent.com/MilenaPacheco/DEV013-dataverse/main/src/img/indie-game-the-movie.jpeg",
+    "facts": {
+      "yearMovie": 2012,
+      "directorMovie": "James Swirsky, Lisanne Pajot",
+      "productionCompany": "BlinkWorks Media",
+      "genreMovie": "Documental",
+      "genreValue": "documental"
+    },
+    "extraInfo": {
+      "rottenTomatoesScore": "93%",
+      "countryMovie": "Canadá",
+      "durationMovie": "96 minutos"
+    }
+  },];
 
diff --git a/test/dataFunctions.spec.js b/test/dataFunctions.spec.js
index 72c5eb9d..014b9f62 100644
--- a/test/dataFunctions.spec.js
+++ b/test/dataFunctions.spec.js
@@ -1,18 +1,122 @@
-import { example, anotherExample } from '../src/dataFunctions.js';
+import { filterData, sortData, computeStats, computeStatsScore } from '../src/dataFunctions.js';
 import { data as fakeData } from './data.js';
 
 console.log(fakeData);
 
-describe('example', () => {
+describe('filterData', () => {
 
-  it('returns `example`', () => {
-    expect(example()).toBe('example');
+  it('verifica si data es un arreglo, si es así regresa true', () => {
+    expect(Array.isArray(fakeData)).toBe(true);
+  });
+
+  it('si data  es un arreglo y filterBy es "genreValue" y value es "thriller" debo recibir un arreglo con la propiedad name: "Hackers" ', () => {
+    expect(filterData(fakeData, "genreValue", "thriller")[0]).toHaveProperty("name", "Hackers");
+  });
+
+  it('si data  es un arreglo y filterBy es "genreValue" y value es "tdocumental" debo recibir un arreglo con la propiedad name: "Indie Game: The Movie" ', () => {
+    expect(filterData(fakeData, "genreValue", "documental")[0]).toHaveProperty("name", "Indie Game: The Movie");
+  });
+})
+
+
+describe('sortData', () => {
+  //En este test se quiere para el resultado que solo arroje el id de las películas ordenadas para no tener un resultado muy extenso.
+  it('ordena ascendentemente los id en función de el año de la película: "yearMovie"', () => {
+    const result = sortData(fakeData, "yearMovie", "asc").map(movie => movie.id);
+    expect(result).toEqual([
+      "short-circuit",
+      "hackers",
+      "indie-game-the-movie"
+    ]);
+  });
+
+
+  it('sortBy es string como formato esperado', () => {
+    const sortBy = { name: true, yearMovie: true };
+    Object.keys(sortBy).forEach((key) => {
+      expect(typeof key).toBe('string');
+    });
+  });
+});
+
+
+describe("computeStats", () => {
+
+  it('el recuento de películas para un país específico es el esperado', () => {
+    const result = computeStats(fakeData);
+    const countryUsa = result["Estados Unidos"].count;
+    expect(countryUsa).toEqual(2);
+  });
+})
+
+
+describe("computeStatsScore", () => {
+
+  it('devuelve un objeto con propiedades esperadas', () => {
+    const result = computeStatsScore(fakeData);
+    expect(typeof result).toBe('object');
+    expect(result).toHaveProperty('scoreOut50');
+    expect(result).toHaveProperty('scoreOut70');
+    expect(result).toHaveProperty('scoreOut90');
   });
 });
 
-describe('anotherExample', () => {
+describe('Test de la función filterData', () => {
 
-  it('returns `anotherExample`', () => {
-    expect(anotherExample()).toBe('OMG');
+  it('La función filterData debe filtrar', () => {
+    const result = filterData(fakeData, "genreValue", "thriller")[0];
+    expect(result).toHaveProperty("name", "Hackers");
   });
+  it('La función filterData es pura, criterio 1', () => {
+    //No depende de variables externas es completamente independiente
+    const result = filterData(fakeData, "productionCompany", "TriStar Pictures")[0];
+    expect(result).toHaveProperty("name", "Short Circuit");
+  });
+  it('La función filterData es pura, criterio 2', () => {
+    //Retorna el mismo resultado para los mismos argumentos
+    const result1 = filterData(fakeData, "productionCompany", "MGM");
+    const result2 = filterData(fakeData, "productionCompany", "MGM");
+    expect(result1).toEqual(result2);
+  });
+  // Bloque de prueba
+  describe('Verificación de filterData, no manipula directamente el DOM', () => {
+    let createElementSpy;
+    let appendChildSpy;
+
+    beforeEach(() => {
+      // Espía en las funciones relacionadas con el DOM
+      createElementSpy = jest.spyOn(document, 'createElement');
+      appendChildSpy = jest.spyOn(document.body, 'appendChild');
+    });
+
+    // Restablece los espías después de cada prueba
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('No debería manipular directamente el DOM', () => {
+      const result = filterData(fakeData, "genreValue", "thriller")[0];
+      expect(createElementSpy).not.toHaveBeenCalled();
+      expect(appendChildSpy).not.toHaveBeenCalled();
+
+      expect(result).toHaveProperty("name", "Hackers");
+    });
+  });
+
 });
+
+describe('Test de la función sortData', () => {
+  const resultOrder = [fakeData[0], fakeData[2], fakeData[1]];
+  describe('La función sortData debe ordenar de manera ascendente por nombre y año de producción', () => {
+    it('Ascendente por string', () => {
+
+      const result = sortData(fakeData, "name", "asc");
+      expect(result).toEqual(resultOrder);
+    });
+    it('Ascendente por string', () => {
+      const result = sortData(fakeData, "name", "desc");
+      expect(result).toEqual(resultOrder.reverse());
+    });
+  })
+
+})
diff --git a/tests-read-only/oa/oa-prompting.spec.js b/tests-read-only/oa/oa-prompting.spec.js
index dd7ccf75..a2a29b86 100644
--- a/tests-read-only/oa/oa-prompting.spec.js
+++ b/tests-read-only/oa/oa-prompting.spec.js
@@ -62,7 +62,7 @@ describe('Test de data set', () => {
         });
       });
 
-      describe('shortDescripcion', () => {
+      describe('shortDescription', () => {
         it('Debe ser un string', () => {
           expect(typeof item.description).toBe('string');
         });
@@ -74,7 +74,7 @@ describe('Test de data set', () => {
       });
       
       
-      describe('descripcion', () => {
+      describe('description', () => {
         it('Debe ser un string', () => {
           expect(typeof item.description).toBe('string');
         });