JavaScriptでDrinkWaterアプリを実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、DrinkWaterアプリを実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

補足: カスタムプロパティ

:root擬似クラス(文章のルート要素)に設定した値は、カスタムプロパティです。CSS文章全体で再利用できる値を定義できます。JavaScriptでいうところの変数に値します。

使用するときは、var(XXXX)のように指定して使用します。

JavaScriptの実装

準備ができたので、早速、DrinkWaterアプリを実装しましょう。

要素の取得

JavaScriptで制御すべき要素が4つあります。最初にこれらの要素を取得します。

ループ処理

取得したsmallCups要素をループで処理します。

idxには、要素のインデックス番号が入ります。smallCups要素は8つあるので、「0~7」までの数値が取得できるということです。

クリックイベントを登録

次に、取得したsmallCupsの要素にクリックイベントを付与します。

smallCups要素をハイライトする

続いて、smallCupsをハイライトする処理を実装します。ハイライト自体は、CSSの「full」クラスを各smallCupの要素に付与すればOKです。

smallCup要素をクリックすると以下のようにハイライトされます。

ハイライトの解除

先ほどの実装だけだと既にハイライトされた要素を解除することができません。

そのため、以下の処理を追加します。

BigCup要素のアップデート関数

続いて、BigCup要素をアップデートする処理に移ります。とりあえず、関数だけ定義しておきます。

BigCup要素のハイライト処理

最後に、BugCup要素をハイライトする処理を実装して完了です。

おわりに

パーセンテージ毎にCSSで緩やかなアニメーションをつける所がいい感じですね-^^

他のアプリケーションにも応用できると思うので、今度作成してみます。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す