Este proyecto es una Single Page Application (SPA) inspirada en la popular serie de televisión "Friends". La SPA consta de cuatro vistas principales: Home, Quiz, Personality Quiz y Results. La aplicación está diseñada para ofrecer a los usuarios la experiencia de participar en cuestionarios relacionados con la serie y obtener resultados detallados.
- HTML: Se utiliza para estructurar el contenido de la página web.
- CSS: Se utiliza para estilizar y diseñar la interfaz de usuario de la aplicación.
- JavaScript: Se utiliza para implementar la lógica de la aplicación, como la manipulación del DOM, la interacción del usuario y las solicitudes a la API.
- Mock.io: Se utiliza para simular una API que proporciona la información necesaria para las preguntas del cuestionario.
El proyecto está organizado en varias carpetas y archivos, cada uno con un propósito específico:
- index.html: Este archivo contiene la estructura básica de la aplicación y proporciona la entrada principal para los usuarios.
- style.css: Este archivo contiene todos los estilos CSS necesarios para dar estilo a la aplicación.
- main.js: Este archivo contiene la lógica principal de la aplicación escrita en JavaScript, incluyendo la manipulación del DOM y la interacción del usuario.
- personalityQuiz.js: Este archivo contiene la lógica específica para el cuestionario de personalidad, como la presentación de preguntas y el cálculo de resultados.
- users.js: Este archivo simula la respuesta de la API y proporciona la información necesaria para las preguntas del cuestionario.
- Home: Esta vista proporciona una breve introducción a la aplicación y un formulario de inicio para que los usuarios ingresen su nombre y correo electrónico.
- Quiz: En esta vista, los usuarios pueden participar en un cuestionario temático que consta de preguntas y opciones de respuesta. Las preguntas se obtienen de la API simulada.
- Personality Quiz: Esta vista ofrece a los usuarios la posibilidad de realizar un cuestionario de personalidad, el cual proporciona resultados específicos basados en sus respuestas. Los resultados se muestran en una gráfica.
- Results: En esta vista, los usuarios pueden ver sus resultados detallados después de completar los cuestionarios, incluyendo puntuaciones y comentarios personalizados.
El principal objetivo de este proyecto era crear una página web con una imagen alegre y un aspecto que evocara la década de los 80. Para lograr esto, se eligió una paleta de colores compuesta por azules y fucsias, que van con el espiritu de la serie y agregan un toque retro y vibrante a la interfaz de usuario.
El proyecto se ha desarrollado con un enfoque centrado en la responsividad. Para lograr esto, se han utilizado unidades de medida relativas como vh (viewport height), vw (viewport width) y % (porcentaje), lo que permite que los elementos se escalen proporcionalmente con el tamaño de la ventana del navegador o dispositivo. Esta práctica facilita la adaptabilidad de las diferentes vistas del proyecto, asegurando que el contenido se visualice de manera óptima tanto en pantallas grandes como pequeñas.
A continuación se muestra una paleta de colores retro utilizada en el proyecto:
| Color | Código |
|---|---|
| Azul | #96f0fa |
| Amarillo | #FCFC8B |
| Rosa | #F4C8ED |
| Rosa Claro | #FFB6C1 |
Para usar la aplicación, simplemente abra el archivo index.html en su navegador web. Si desea contribuir al proyecto, puede hacerlo creando una bifurcación del repositorio, realizando sus cambios y luego enviando una solicitud de extracción.
- Asegúrese de tener una conexión a Internet activa para cargar correctamente la información del cuestionario desde la API simulada.
- Para cualquier consulta o problema técnico, no dude en contactar al desarrollador del proyecto.
@DaniellaBarraza125 (GitHub)
¡Espero que disfrutes explorando la aplicación! 🎉