Поиск сокровищ с использованием заклинаний с Axios

Введение

В этом проекте вы научитесь отправлять запросы с заголовками авторизации с использованием Axios и обновлять DOM на основе данных ответа. Вы создадите простое веб-приложение, которое взаимодействует с сервером для получения частей загадочной заклинания.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать проект и получать исходный код;
• реализовывать функциональность для кнопки "Ключ 1";
• реализовывать функциональность для кнопки "Ключ 2";
• проверять, можно ли открыть сокровищницу на основе полученных частей заклинания.

🏆 Достижения

После завершения этого проекта вы сможете:

• использовать Axios для отправки HTTP-запросов с пользовательскими заголовками;
• манипулировать DOM для отображения динамического контента;
• реализовывать условную логику для проверки конкретных условий;
• последовательно следовать инструкциям для завершения веб-разработки проекта.

Настроить структуру проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы завершить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

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

В них:

• index.html - главная страница.
• css - папка для хранения стилей проекта.
• lib - папка для хранения JavaScript-зависимостей проекта.
• js/index.js - JavaScript-файл, в котором нужно дополнить код.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, чтобы увидеть страницу.

Реализовать кнопку Ключ 1

В этом шаге вы реализуете функциональность для кнопки "Ключ 1".

1. В файле js/index.js найдите блок key1Button.addEventListener("click", async () => {... }).

2. Замените let { data } = await axios.get("/spellone"); на следующий код:

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

   Эти строки кода отправят GET-запрос на конечную точку /spellone с заголовком Authorization, установленным на указанный токен. Данные ответа будут отображаться в элементе spell1.

3. Сохраните файл js/index.js.

Реализовать кнопку Ключ 2

В этом шаге вы реализуете функциональность для кнопки "Ключ 2".

1. В файле js/index.js найдите блок key2Button.addEventListener("click", async () => {... }).

2. Замените let { data } = await axios.get("/spelltwo"); на следующий код:

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

   Эти строки кода отправят GET-запрос на конечную точку /spelltwo с заголовком Authorization, установленным на указанный токен. Данные ответа будут отображаться в элементе spell2.

3. Сохраните файл js/index.js.

Проверить сокровищный ящик

В этом шаге вы реализуете логику для проверки, можно ли открыть сокровищницу.

1. В файле js/index.js найдите функцию tryOpenTreasureBox().
2. Эта функция проверяет, совпадают ли содержимое элементов spell1 и spell2 с ожидаемыми значениями ("I love you" и "You love me too"). Если условия выполняются, она добавит класс "opened" к элементу treasureBox и отобразит сообщение об успехе.
3. Сохраните файл js/index.js.

Тестировать приложение

1. Вернитесь в браузер и обновите страницу.
2. Нажмите кнопки "Ключ 1" и "Ключ 2" и наблюдайте за изменениями на странице.
3. Если сокровищница успешно открыта, вы увидите отображенное сообщение об успехе. Завершенный эффект выглядит так:

Поздравляем! Вы завершили проект "Тайная заклинание". Вы узнали, как отправлять запросы с заголовками авторизации с использованием Axios и как обновлять DOM на основе данных ответа.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.