Шкала настроения Бинь Двень Двень

Введение

В этом проекте вы научитесь создавать шкалу настроения Бинь Двень Двень, которая представляет собой веселый и интерактивный способ выразить уровень вашего удовлетворенности Олимпийскими играми 2022 года. Мальчик-символ Олимпиады Бинь Двень Двень стал всемирным феноменом, и этот проект позволяет вам взаимодействовать с ним и оценивать общий уровень вашего удовлетворенности.

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

🎯 Задачи

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

• Инициализировать шкалу настроения Бинь Двень Двень с начальным состоянием настроения "недовольство"
• Обновлять настроение Бинь Двень Двень на основе положения полосы прогресса, отражающей различные уровни удовлетворенности

🏆 Достижения

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

• Манипулировать DOM (Document Object Model) для изменения внешнего вида HTML-элемента на основе ввода пользователя
• Использовать обработчики событий JavaScript для реакции на взаимодействие пользователя
• Применять классы CSS к элементу для изменения его визуального вида

Skills Graph

Настройка структуры проекта

На этом этапе вы настроите структуру проекта и подготовите необходимые файлы и папки.

Откройте папку проекта в вашем редакторе кода. Структура каталогов выглядит следующим образом:

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

Где:

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

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

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

Инициализация шкалы настроения Бинь Двень Двень

На этом этапе вы научитесь инициализировать шкалу настроения Бинь Двень Двень и установить начальное состояние настроения.

1. Откройте файл js/index.js.
2. Найдите следующий код:

const range = document.getElementById("range");
const BingDwenDwen = document.querySelector(".BingDwenDwen");

3. Добавьте следующий код, чтобы установить начальное состояние настроения Бинь Двень Двень в "недовольство":

BingDwenDwen.className = "BingDwenDwen not-satisfied";

Это установит начальное имя класса элемента Бинь Двень Двень в not-satisfied, которое соответствует состоянию настроения "недовольство".

Обновление настроения Бинь Двень Двень на основе полосы прогресса

На этом этапе вы научитесь обновлять настроение Бинь Двень Двень на основе положения полосы прогресса.

1. Найдите следующий код в файле js/index.js:

range.onchange = (e) => {
  let value = Number(e.target.value); // value
  // TODO
};

2. Добавьте следующий код внутри обработчика события onchange, чтобы обновить настроение Бинь Двень Двень на основе значения полосы прогресса:

if (value == 25) {
  BingDwenDwen.className = "BingDwenDwen a-little-unsatisfied";
} else if (value == 50) {
  BingDwenDwen.className = "BingDwenDwen ordinary";
} else if (value == 75) {
  BingDwenDwen.className = "BingDwenDwen satisfied";
} else if (value == 100) {
  BingDwenDwen.className = "BingDwenDwen great";
} else {
  BingDwenDwen.className = "BingDwenDwen not-satisfied";
}

Этот код проверяет значение полосы прогресса и обновляет имя класса элемента Бинь Двень Двень соответственно. Имена классов соответствуют различным состояниям настроения, указанным в описании задания.

3. Сохраните файл и обновите браузер, чтобы увидеть обновленный код в действии.

Теперь, когда вы перетаскиваете полосу прогресса, изображение Бинь Двень Двень должно измениться, чтобы отразить соответствующее состояние настроения. Полный эффект выглядит следующим образом:

Итог

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