La aplicación consiste en un quiz de 5 preguntas aleatorias. El usuario podrá registrarse para guardar sus partidas.
- El Quiz constará de 5 preguntas. Cada pregunta tendrá 4 opciones y sólo una de ellas será la correcta
- Podrán ser preguntas nuestras y preguntas que vengan de https://opentdb.com/
- La aplicación tendrá que ser una SPA (single-page application). Sólo una pregunta cada vez en pantalla
- Manipulación dinámica del DOM
- Crear una página SPA para las preguntas
- Manejo de ES6
- Asincronía. Usar API de preguntas https://opentdb.com/
- APIs HTML5: Uso de Local storage y gráficas, etc...
- Sin frameworks ni librerias externas en la medida de lo posible
- Gestión del proyecto en Github desde el principio. Uso de ramas, fork, pull request, etc...
- Código limpio, buenas prácticas
- FASE 1: Diseño del front: Diseño responsive, mobile first, semántica HTML5.
- FASE 2: Lógica de JavaScript.
- FASE 3: Asincronía: Leer 5 preguntas random de la API de prenguntas para generar el Quiz.
- FASE 4 (avanzado) - APIs HTML5: Almacenar la puntuación de cada partida en Local Storage. Mostrar en la Home con una gráfica los resultados de las últimas partidas jugadas.
- FASE 5 - Migración a Firebase
- FASE 6 - Firebase Auth. Login con Google (obligatorio) y email+password
- Repositorio: Quiz Team Up
- Live Site: Demo
- HTML5 semántico
- CSS
- Flexbox
- Mobile-first workflow
- Diseño SPA
- Local Storage
- Firebase: Firestore y Firebase Auth
- Diseño SPA. Aprender la lógica del evento "cambio de Hash" y emplearlo para navegar dentro de una misma página
- Validación de respuestas adaptada al diseño SPA. Conseguír que la validación de las respuestas y el almacenamiento de las repuestas correctas funcione en una Single Page Aplication
- Localstorage y Firebase. Combinar ambos métodos para almacenar las partidas guardadas
- Firebase Auth. Asimilar el flujo de datos para crear una navegación adecuada en la página de inicio
- Desarrollar la lógica de una página de inicio con autenticación
- Mejorar la navegación durante la autenticación con modales
- Practicar el uso de Firebase
- Tutorial SPA JS Vanilla - Tutorial sobre el uso de SPA con Vanilla Jvascript.
- Firebase Auth - Tutorial sobre Firebase Auth.