Chasse au trésor de l'incantation guidée par Axios

Introduction

Dans ce projet, vous allez apprendre à envoyer des requêtes avec des en-têtes d'autorisation à l'aide d'Axios et à mettre à jour le DOM en fonction des données de réponse. Vous allez construire une application web simple qui interagit avec un serveur pour obtenir des parties d'une incantation mystérieuse.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer le projet et obtenir le code initial
• Comment implémenter la fonctionnalité du bouton "Clé 1"
• Comment implémenter la fonctionnalité du bouton "Clé 2"
• Comment vérifier si la boîte à trésors peut être ouverte en fonction des parties d'incantation obtenues

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser Axios pour effectuer des requêtes HTTP avec des en-têtes personnalisés
• Manipuler le DOM pour afficher du contenu dynamique
• Implémenter une logique conditionnelle pour vérifier des conditions spécifiques
• Suivre des instructions étape par étape pour terminer un projet de développement web

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

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

Dans lequel :

• index.html est la page principale.
• css est le dossier pour stocker les styles du projet.
• lib est le dossier pour stocker les dépendances JavaScript du projet.
• js/index.js est le fichier JavaScript où vous devrez compléter le code.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez manuellement pour voir la page.

Implémenter le bouton Clé 1

Dans cette étape, vous allez implémenter la fonctionnalité du bouton "Clé 1".

1. Dans le fichier js/index.js, localisez le bloc key1Button.addEventListener("click", async () => {... }).

2. Changez let { data } = await axios.get("/spellone"); en le code suivant :

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

   Ces lignes de code enverront une requête GET à l'endpoint /spellone avec l'en-tête Authorization défini sur le jeton fourni. Les données de réponse seront affichées dans l'élément spell1.

3. Enregistrez le fichier js/index.js.

Implémenter le bouton Clé 2

Dans cette étape, vous allez implémenter la fonctionnalité du bouton "Clé 2".

1. Dans le fichier js/index.js, localisez le bloc key2Button.addEventListener("click", async () => {... }).

2. Changez let { data } = await axios.get("/spelltwo"); en le code suivant :

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

   Ces lignes de code enverront une requête GET à l'endpoint /spelltwo avec l'en-tête Authorization défini sur le jeton fourni. Les données de réponse seront affichées dans l'élément spell2.

3. Enregistrez le fichier js/index.js.

Vérifier la boîte à trésors

Dans cette étape, vous allez implémenter la logique pour vérifier si la boîte à trésors peut être ouverte.

1. Dans le fichier js/index.js, localisez la fonction tryOpenTreasureBox().
2. Cette fonction vérifie si le contenu des éléments spell1 et spell2 correspond aux valeurs attendues ("I love you" et "You love me too"). Si les conditions sont remplies, elle ajoutera la classe "opened" à l'élément treasureBox et affichera le message de réussite.
3. Enregistrez le fichier js/index.js.

Tester l'application

1. Revenez au navigateur et rafraîchissez la page.
2. Cliquez sur les boutons "Clé 1" et "Clé 2" et observez les changements sur la page.
3. Si la boîte à trésors est ouverte avec succès, vous verrez le message de réussite affiché. L'effet terminé est le suivant :

Félicitations ! Vous avez terminé le projet "Incantation Mystérieuse". Vous avez appris à envoyer des requêtes avec des en-têtes d'autorisation à l'aide d'Axios et à mettre à jour le DOM en fonction des données de réponse.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.