K-Drama Trivia es un app de juego en la que recibirás preguntas con alternativas y elegir una respuesta según tu criterio. Al final podrás ver tus aciertos y conocer cuanto sabes del mundo de los k-dramas 💜
Nos decidimos por una trivia de K-dramas ya que es algo en lo que ambas tenemos afinidad y nos gustaría compartir.
- Investigamos ejemplos sobre trivias relacionadas a nuetro tema e inspeccionamos las páginas web para conocer un sobre ellas.
- Vimos qué tipos de preguntas y diseños mostraban, lo cual nos sirvió como referencia para crear nuestro prototipo.
- Creemos que nuestras usuarias potenciales estarán contentas de jugar con estas trivias que ofrecen preguntas divertidas sobre el tema, con un diseño minimalista.
- Usamos atributos alt para describir las imágenes de nuestra web para hacerla amigable para usuarias que usen lectores de pantalla.
En nuestra primera charla, comentamos como veíamos el proyecto y lo plasmamos de forma sencilla en un Documento
de Slides PRESENTACIÓN
Acordamos que nuestra App tendría una vista, con tres secciones que representan cada pregunta y un botón que
permita ver los resultados. También incluímos un bosquejo de la estructura HTML con lo que ya conocíamos:
Elegimos usar el color lila y una paleta similar para nuestros colores de la web. Básicamente con una tonalidad ligera e incluir imágenes relacionadas con nuestra trivia.
Decidimos seguir las recomendaciones de los hitos ya que nos permite ir incrementando el nivel de complejidad del proyecto así como ir añadiendo nuevos features a medida que vamos dominando un concepto nuevo. Usamos la metodología Scrum para organizar nuestro proyecto inicialmente en Documento Docs Documentación y ya finalmente en este README.md
Nuestro objetivo inicial fue realizar solo el hito 1, para lo cual nos propusimos leer los materiales propuestos y buscar otros recursos como tutoriales y/o preguntar en slack.
✅ Crear 1 sola pantalla o vista.
✅ 3 preguntas con 3 alternativas de respuesta (botones de radio) cada una.
✅ 1 botón para responder.
💬 El botón para “Resultados” que muestre las respuestas correctas.
- Iniciamos en nuestro index.html armando la estructura con HTML semántico. También colocamos nombres de clase a los elementos HTML para poder identificarlos con facilidad al momento de aplicar estilos. Creamos las secciones de preguntas con el elemento section y añadimos un botón para ver los resultados.
- Al finalizar, nos dimos cuenta que ya habíamos avanzado más de lo que nos propusimos
- Nos falto poder hacer que el boton de ver resultados funcione, no sabiamoa como plantear la función en JS aún.
En esta parte ya estabamos mas familiarizadas con el proyecto, por lo que nos planteamos en el dia 2 poder crear una función que cuente cuantas preguntas fueron correctas. Tambien se creo en el navegador la parte donde el usuario debe insertar su nombre y darle click en el botón comencemos.
✅ Una caja de texto (input text) en la que escribe su nombre quien juega.
✅ Antes de las peguntas debe decir "Hola nombre usuaria"
✅ Boton para mostrar el número de aciertos
✅ El botón para “Enviar” resultados y contar aciertos
- En la parte de la interactividad, usamos funciones para asociarlas a los elementos botones de la web, así al hacer clic en un botón, la función específica en main.js se ejecuta. Allí aplicamos variables, selectores, eventos y if statement para lograr que el nombre de la usuaria y los resultados de la trivia (conteo) se muestren.
- Pulimos más con estilos y añadimos una imagen
Para este hito tenemos pensado darle el diseño respectivo a la parte del texto y preguntas para que este ordenado. Nos propusimos hacer que el botón tengo un sombreado cuando se pase el cursor sobre el. Tambien dividiremos la página en dos vistas mediante funciones en js.
✅ Mensaje de alerta al no ingresar input en la vista 1.
✅ Crear una segunda vista separando la página de inicio de la trivia (vista 2).
✅ El botón para responder muestra la alternativa correcta para cada pregunta y, además, muestra si cada una de las respuestas fue correcta o incorrecta (vista 2).
✅ Un botón para volver a jugar que vuelve a la pantalla inicial en la que se pide el nombre (vista 2).
✅ Un botón de "jugar" o "comenzar" para ir a las preguntas (vista 2).
- Nos enfocamos en la funcionalidad de JS, creamos nuestra función para validar las respuestas de la usuaria, pero nos atascamos y esta no se ejecutaba. Contamos con la ayuda de la coach para revisar el código y determinar el problema, y hacer ajustes en los valores de nuestras respuestas.
- Mejoramos el CSS de nuestra web, armonizando la paleta de colores, y cuadrando los elementos de la web.
Ahora estamos revisando una vez más nuestro código para añadir los comentarios, verificar los elementos, sus clases, atributos, formatos. Decidimos dar los últimos ajustes de estilos.
✅ Revisar código (coherencia, formato, comentarios)
✅ Revisar estilos