Axios-Driven Incantation Treasure Hunt

Introduction

In this project, you will learn how to send requests with authorization headers using Axios and how to update the DOM based on the response data. You will be building a simple web application that interacts with a server to obtain parts of a mysterious incantation.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to set up the project and get the initial code
• How to implement the functionality for the "Key 1" button
• How to implement the functionality for the "Key 2" button
• How to check if the treasure box can be opened based on the obtained incantation parts

🏆 Achievements

After completing this project, you will be able to:

• Use Axios to make HTTP requests with custom headers
• Manipulate the DOM to display dynamic content
• Implement conditional logic to check for specific conditions
• Follow step-by-step instructions to complete a web development project

Skills Graph

Set Up the Project Structure

In this step, you will set up the project files and structure. Follow the steps below to complete this step:

Open the project folder. The directory structure is as follows:

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

Among them:

• index.html is the main page.
• css is the folder for storing the project styles.
• lib is the folder for storing the project's JavaScript dependencies.
• js/index.js is the JavaScript file where you need to supplement the code.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and manually refresh it to see the page.

Implement the Key 1 Button

In this step, you will implement the functionality for the "Key 1" button.

1. In the js/index.js file, locate the key1Button.addEventListener("click", async () => { ... }) block.

2. Change let { data } = await axios.get("/spellone"); to the following code:

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

   These lines of code will send a GET request to the /spellone endpoint with the Authorization header set to the provided token. The response data will be displayed in the spell1 element.

3. Save the js/index.js file.

Implement the Key 2 Button

In this step, you will implement the functionality for the "Key 2" button.

1. In the js/index.js file, locate the key2Button.addEventListener("click", async () => { ... }) block.

2. Change let { data } = await axios.get("/spelltwo"); to the following code:

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

   These lines of code will send a GET request to the /spelltwo endpoint with the Authorization header set to the provided token. The response data will be displayed in the spell2 element.

3. Save the js/index.js file.

Check the Treasure Box

In this step, you will implement the logic to check if the treasure box can be opened.

1. In the js/index.js file, locate the tryOpenTreasureBox() function.
2. This function checks if the content of spell1 and spell2 elements match the expected values ("I love you" and "You love me too"). If the conditions are met, it will add the "opened" class to the treasureBox element and display the success message.
3. Save the js/index.js file.

Test the Application

1. Go back to the browser and refresh the page.
2. Click the "Key 1" and "Key 2" buttons and observe the changes in the page.
3. If the treasure box is successfully opened, you will see the success message displayed. The completed effect is as follows:

Congratulations! You have completed the "Mysterious Incantation" project. You have learned how to send requests with authorization headers using Axios and how to update the DOM based on the response data.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.