Búsqueda del tesoro del hechizo impulsada por Axios

Introducción

En este proyecto, aprenderás cómo enviar solicitudes con encabezados de autorización utilizando Axios y cómo actualizar el DOM basado en los datos de respuesta. Construirás una aplicación web simple que interactúe con un servidor para obtener partes de una misteriosa incantación.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto y obtener el código inicial
• Cómo implementar la funcionalidad para el botón "Llave 1"
• Cómo implementar la funcionalidad para el botón "Llave 2"
• Cómo comprobar si se puede abrir la caja del tesoro basado en las partes de la incantación obtenidas

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar Axios para realizar solicitudes HTTP con encabezados personalizados
• Manipular el DOM para mostrar contenido dinámico
• Implementar lógica condicional para comprobar condiciones específicas
• Seguir instrucciones paso a paso para completar un proyecto de desarrollo web

Configura la estructura del proyecto

En este paso, establecerás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── css
├── lib
├── js
│   └── index.js
└── index.html

Entre ellos:

• index.html es la página principal.
• css es la carpeta para almacenar los estilos del proyecto.
• lib es la carpeta para almacenar las dependencias JavaScript del proyecto.
• js/index.js es el archivo JavaScript donde debes complementar el código.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementa el botón de Llave 1

En este paso, implementarás la funcionalidad para el botón "Llave 1".

1. En el archivo js/index.js, localiza el bloque key1Button.addEventListener("click", async () => {... }).

2. Cambia let { data } = await axios.get("/spellone"); al siguiente código:

   let { data } = await axios.get("/spellone", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });

   Estas líneas de código enviarán una solicitud GET al punto final /spellone con el encabezado Authorization establecido con el token proporcionado. Los datos de respuesta se mostrarán en el elemento spell1.

3. Guarda el archivo js/index.js.

Implementa el botón de Llave 2

En este paso, implementarás la funcionalidad para el botón "Llave 2".

1. En el archivo js/index.js, localiza el bloque key2Button.addEventListener("click", async () => {... }).

2. Cambia let { data } = await axios.get("/spelltwo"); al siguiente código:

   let { data } = await axios.get("/spelltwo", {
     headers: {
       Authorization: "2b58f9a8-7d73-4a9c-b8a2-9f05d6e8e3c7"
     }
   });

   Estas líneas de código enviarán una solicitud GET al punto final /spelltwo con el encabezado Authorization establecido con el token proporcionado. Los datos de respuesta se mostrarán en el elemento spell2.

3. Guarda el archivo js/index.js.

Revisa la caja del tesoro

En este paso, implementarás la lógica para comprobar si se puede abrir la caja del tesoro.

1. En el archivo js/index.js, localiza la función tryOpenTreasureBox().
2. Esta función comprueba si el contenido de los elementos spell1 y spell2 coincide con los valores esperados ("I love you" y "You love me too"). Si se cumplen las condiciones, agregará la clase "abierta" al elemento treasureBox y mostrará el mensaje de éxito.
3. Guarda el archivo js/index.js.

Prueba la aplicación

1. Vuelve al navegador y actualiza la página.
2. Haz clic en los botones "Llave 1" y "Llave 2" y observa los cambios en la página.
3. Si la caja del tesoro se abre con éxito, verás el mensaje de éxito mostrado. El efecto final es el siguiente:

¡Felicitaciones! Has completado el proyecto "Encantamiento Misterioso". Has aprendido cómo enviar solicitudes con encabezados de autorización utilizando Axios y cómo actualizar el DOM basado en los datos de respuesta.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.