インタラクティブなビング・ドゥエン・ドゥエンムードスケールを作成する

はじめに

このプロジェクトでは、2022 年のオリンピック大会に対する満足度を表現する楽しくインタラクティブな方法である「ビング・ドゥエン・ドゥエンムードスケール」を作成する方法を学びます。ビング・ドゥエン・ドゥエンマスコットは世界的なヒットを記録しており、このプロジェクトではそれとインタラクトし、全体的な満足度を評価することができます。

👀 プレビュー

Bing Dwen Dwen Mood Scale demo

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

初期のムード状態を「不満足」に設定してビング・ドゥエン・ドゥエンムードスケールを初期化する方法
プログレスバーの位置に基づいてビング・ドゥエン・ドゥエンのムードを更新し、異なるレベルの満足度を反映する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

ユーザー入力に基づいて HTML 要素の外観を変更するために DOM（ドキュメントオブジェクトモデル）を操作すること
ユーザーインタラクションに応答するために JavaScript イベントハンドラを使用すること
要素に CSS クラスを適用してその視覚的な外観を変更すること

プロジェクト構造を設定する

このステップでは、プロジェクト構造を設定し、必要なファイルとフォルダを準備します。

コードエディタでプロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

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

ここで：

index.html はメインページです。
css はページスタイルを保存するフォルダです。
js/index.js はコードを追加する必要がある JavaScript ファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

Initial Effect

ビング・ドゥエン・ドゥエンムードスケールを初期化する

このステップでは、ビング・ドゥエン・ドゥエンムードスケールを初期化し、初期のムード状態を設定する方法を学びます。

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";
}

このコードはプログレスバーの値をチェックし、それに応じてビング・ドゥエン・ドゥエン要素のクラス名を更新します。クラス名はチャレンジの説明で指定されている異なるムード状態に対応しています。

ファイルを保存し、ブラウザを更新して、更新されたコードが機能するのを確認します。

今、プログレスバーをドラッグすると、ビング・ドゥエン・ドゥエンの画像が対応するムード状態を反映するように変化します。完成した効果は以下の通りです。

Completed Effect

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。