Caça ao Tesouro da Incantação com Axios

Introdução

Neste projeto, você aprenderá como enviar requisições com cabeçalhos de autorização usando Axios e como atualizar o DOM com base nos dados da resposta. Você construirá uma aplicação web simples que interage com um servidor para obter partes de uma misteriosa incantação.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto e obter o código inicial
• Como implementar a funcionalidade para o botão "Key 1"
• Como implementar a funcionalidade para o botão "Key 2"
• Como verificar se o baú do tesouro pode ser aberto com base nas partes da incantação obtidas

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar Axios para fazer requisições HTTP com cabeçalhos personalizados
• Manipular o DOM para exibir conteúdo dinâmico
• Implementar lógica condicional para verificar condições específicas
• Seguir instruções passo a passo para concluir um projeto de desenvolvimento web

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Dentre eles:

• index.html é a página principal.
• css é a pasta para armazenar os estilos do projeto.
• lib é a pasta para armazenar as dependências JavaScript do projeto.
• js/index.js é o arquivo JavaScript onde você precisará complementar o código.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar o Botão da Chave 1

Nesta etapa, você implementará a funcionalidade para o botão "Key 1".

1. No arquivo js/index.js, localize o bloco key1Button.addEventListener("click", async () => { ... }).

2. Altere let { data } = await axios.get("/spellone"); para o seguinte código:

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

   Essas linhas de código enviarão uma requisição GET para o endpoint /spellone com o cabeçalho Authorization definido para o token fornecido. Os dados da resposta serão exibidos no elemento spell1.

3. Salve o arquivo js/index.js.

Implementar o Botão da Chave 2

Nesta etapa, você implementará a funcionalidade para o botão "Key 2".

1. No arquivo js/index.js, localize o bloco key2Button.addEventListener("click", async () => { ... }).

2. Altere let { data } = await axios.get("/spelltwo"); para o seguinte código:

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

   Essas linhas de código enviarão uma requisição GET para o endpoint /spelltwo com o cabeçalho Authorization definido para o token fornecido. Os dados da resposta serão exibidos no elemento spell2.

3. Salve o arquivo js/index.js.

Verificar a Caixa do Tesouro

Nesta etapa, você implementará a lógica para verificar se a caixa do tesouro pode ser aberta.

1. No arquivo js/index.js, localize a função tryOpenTreasureBox().
2. Esta função verifica se o conteúdo dos elementos spell1 e spell2 corresponde aos valores esperados ("I love you" e "You love me too"). Se as condições forem atendidas, ela adicionará a classe "opened" ao elemento treasureBox e exibirá a mensagem de sucesso.
3. Salve o arquivo js/index.js.

Testar a Aplicação

1. Volte ao navegador e atualize a página.
2. Clique nos botões "Key 1" e "Key 2" e observe as mudanças na página.
3. Se a caixa do tesouro for aberta com sucesso, você verá a mensagem de sucesso exibida. O efeito completo é o seguinte:

Parabéns! Você concluiu o projeto "Mysterious Incantation". Você aprendeu como enviar requisições com cabeçalhos de autorização usando Axios e como atualizar o DOM com base nos dados da resposta.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.