JavaScriptでフィードバック機能を作ろう!

こんにちは。KOUKIです。

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

実装するもの

今回は、フィードバック機能を実装します。

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

環境構築

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

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

ページ(HTML)の作成

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

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

顔画像は、「flaticon」から取得しています。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

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

JavaScriptの実装

準備は整ったので、JavaScriptを実装していきましょう。

要素を取得する

最初に、画面操作に必要な要素を取得します。

Rating設定機能

次は、顔画像をクリックした時に、Rating(評価)が設定される機能を実装します。

addEventListenerは、引数に指定したイベントが発生した時に実行されるメソッドです。ここでは、「click」を指定しているので、顔写真がクリックされた時に発火します。

parentNodeは、指定された親要素にアクセスできるプロパティです。ここでは顔写真(img)をクリックした時の親要素なので、div要素にratingがあるかチェックします。

removeActive関数は、これから実装します。

アクティブ解除

顔画像を選択した時、一度、アクティブ状態を解除しましょう。

classList.removeは、指定したクラスを削除できます。

Rating送信

最後に、Rating送信機能を作成して完了です。

おわりに

今回のアプリケーションは、今まで実装してきたアプリケーションの知識で十分作成できる内容でしたね。その分、説明がおそろかになってしまった感じはしますが。。。

しかし、CSSがやっぱり難しいですね。CSSのフレームワークを勉強して、サクッとUIを作れるようになりたいです^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す