JavaScriptで評価機能を作ろう!

こんにちは。KOUKIです。

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

実装するもの

今回は、「評価機能」をJavaScriptで実装したいと思います。

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

環境構築

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

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

CSS版

ページ(HTML)の作成

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

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

スタイル(CSS)を装飾

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

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

CSSのkeyframesでアニメーションを実装しているので、この時点で以下のように動きます。

:checked」については、初めて出てきましたね。これは、CSS の擬似クラスで、ラジオボタン、 チェックボックス、 オプションボタンなどの要素がチェックされていたり on の状態にあったりすることを表すそうです。

CSSでもイベントを検知できるみたいですね。

JavaScriptの実装

JavaScriptでは、先ほど作成したToggleボタンの制御を行います。

要素を取得する

画面操作に必要な要素を取得しましょう。

Changeイベントの登録

次は、changeイベントを登録します。これは、Toggleボタンの状態を変更したときに発火するイベントです。

doTheTrick関数は、これから作成します。

トリックをつける

最後にトリックを付けます。

これで完成です。

おわりに

今回は、JavaScriptよりもToggleボタンのアニメーションの実装の方が勉強になりましたね^^

自作アプリにも応用ができそうなので、今度使ってみます。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す