Создайте интерактивную шкалу настроения Бинь Двень Двень

Введение

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

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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

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

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

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

Где:

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

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

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

Начальный эффект

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

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

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

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

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

BingDwenDwen.className = "BingDwenDwen not-satisfied";

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

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

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

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

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

Добавьте следующий код внутри обработчика события 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";
}

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

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

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

Полный эффект

Резюме

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

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