/react-teatre

S7-Teatro. En esta entrega construiremos una web interactiva para aprender textos de teatro. Aplicaremos técnicas fundamentales para aplicar estilos a la web y añadiremos acciones para que el usuario pueda interactuar con nuestra aplicación.

Primary LanguageJavaScript

react-teatre

Sprint 7. React teatre

DEMO: https://react-teatre.netlify.app/

Netlify Status

Nivel 1 ⭐

Ejercicio 1 ✅

  • Realizar una aplicación que lea un archivo json con los textos de una obra teatral y muestre cada uno de los textos en pantalla. Utilizaremos un componente llamado Línea para mostrar cada una de las líneas de texto. Este será el archivo JSON que recorreremos:
[
"Hola Romeo.", 
"Hola Julieta", 
"T'estimo, Romeo", 
"I jo a tu Julieta", 
"Escapem-nos a Mèxic", 
"Millor no, no li caus bé a la meva família i si seguim endavant amb el nostre amor, aquesta història acabarà malament", 
"Doncs vaja" 
]
  • El ejercicio debería quedar así:

image-23-1024x363

Nivel 2 ⭐⭐

Ejercicio 2 ✅

  • Maquetar la aplicación utilizando styled-components

Nivel 3 ⭐⭐⭐

Ejercicio 3 ✅

  • Mostrar solo una línea en vez de todas de la apliación
  • Añadir boton de avanzar y retroceder que nos permitan ir avanzando y retrocediendo entre las líneas de la aplicación solo una a la vez.

image-24-1024x129

Ejercicio 4 ✅

  • Mostrar todas las líneas de la aplicación pero solo resaltaremos una a la vez, que irá cambiando a medida que presionemos los botones de avanzar y retroceder.
    image-25-1024x260