My first project using HTML5, CSS3, JS Vanilla
Índice
1. Resumen del proyecto
2. Objetivos de aprendizaje
3. Criterios de aceptación
4. Aprendizajes esperados
4. Hacker edition
5. Consideraciones técnicas
6. Pistas y recursos
7. Lecturas Complementarias
Preámbulo: Es un día aburrido y las niñas Daniela y Montserrat están cansadas de jugar los mismos juegos... Su prima llega de visita y les pregunta acerca del último video de BTS... las niñas gritan a la par el nombre del video. ¿Tanto saben las niñas sobre BTS? Han empezado una batalla campal para decidir quién es la que domina más el tema... Su prima las calma: -¡dejen de pelear!, veremos quién es realmente la que sabe todo sobre BTS... haré un cuestionario sobre las preguntas más importantes que deberían dominar si son realmente fans. ¡Quien responda la mayor cantidad de preguntas será la ganadora! Tras un rato, Amanda, la prima mayor decide que debería idear un plan para no tener que escribir las preguntas una y otra vez y revisar respuestas de opción múltiple como un exámen, ¡qué aburrido! Qué genial que fuera algo que pudieran resolver sin verse ni copiarse, en sus dispositivos personales... y que Amanda no tuviera que gastar su tiempo en revisar cada pregunta, que fuera automático!
Problema: Necesitamos una TRIVIA!
Solución: Necesitamos crear un proyecto web de preguntas y respuestas, la aplicación web debe permitir al usuario ingresar su nombre y sus respuestas, así como hacer un conteo de sus respuestas buenas y malas, para jugar y competir con sus amigos por la mejor puntuación. El tema es de libre elección.
El objetivo principal de este proyecto es tener una primera experiencia desarrollando una aplicación web que tenga interacción con el usuario a través de un navegador, conocer bien cómo solucionar el problema y trabajar en equipo.
Otro objetivo es pensar y planear el desarrollo del software que debería resolver el problema:
- Entender el problema y los requerimientos del proyecto.
- Diseñar el flujo en diagrama
- Diseñar la interfaz del usuario
- Escribir el pseudocódigo
- Escribir el código
- Validar el código
- Deployar el código en GitHubPages
- La trivia debe permitir al usuario ingresar su nombre y mostrarlo en sus resultados.
- La trivia debe tener un Flujo de salida, si el usuario no quiere participar.
- La trivia debe incluir al menos 10 preguntas en prompt y recibe las respuestas del usuario.
- Inmediatamente al terminar la última pregunta, debería mostrar los resultados, cantidad de buenas y cantidad de malas, así como las respuestas correctas.
- Entregar una ulr de Github Pages para probar la trivia.
HTML y CSS
Uso de HTML semántico.
Uso de selectores de html con clases de CSS.
Seguir la estructura del Layuout de una WebApplication
JavaScript
Tipos de Datos
Declaración correcta de variables (cont y let)
String concatenación
Uso de condicionales (if-else | switch | operador ternario)
Uso de funciones (parâmetros | argumentos | valor de retorno)
Uso identificadores descriptivos (Nomenclatura | Semántica).
Y uso de comentarios de código conforme al pseudocódigo y desarrollo del algoritmo.
Si terminaste el flujo de tu trivia y están contentos con el resultado, ahora procedan a realizar un flujo en el que la persona pueda elegir qué trivia realizar y que tenga al menos 2 opciones para elegir.
La lógica del proyecto deberá ser definida previamente en un diagrama de flujo donde se hayan descrito lod flujos posibles y deberá haberse escrito algorítimicamente en pseudocódigo, una vez realizado esto, programar los flujos en JavaScript Vanilla solamente. La arquitectura del proyecto deberá incluir:
index.html app.js style.css assets (folder con img, y otros "artefactos" si es necesario)
prompt() //function
console.log()