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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでフィードバックアプリのスタイリングをしよう!

ページ(HTML)の作成

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Let Us Know Your Feedback</title>
  </head>
  <body>
    <div id="panel" class="panel-container">
      <strong>How satisfied are you with our <br /> customer support performance?</strong>
      <div class="ratings-container">
        <div class="rating">
          <img src="https://image.flaticon.com/icons/svg/187/187150.svg" alt="">
          <small>Unhappy</small>
        </div>

        <div class="rating">
          <img src="https://image.flaticon.com/icons/svg/187/187136.svg" alt=""/>
          <small>Neutral</small>
        </div>

        <div class="rating active">
          <img src="https://image.flaticon.com/icons/svg/187/187133.svg" alt=""/>
          <small>Satisfied</small>
        </div>
      </div>
      <button class="btn" id="send">Send Review</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Let Us Know Your Feedback</title>

</head>

<body>

<strong>How satisfied are you with our <br /> customer support performance?</strong>

<small>Unhappy</small>

</div>

<small>Neutral</small>

</div>

<small>Satisfied</small>

</div>

<button class="btn" id="send">Send Review</button>

</div>

</body>

</html>

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

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

スタイル(CSS)を装飾

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

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #fef9f2;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.panel-container {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  font-size: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 30px;
  max-width: 400px;
}

.panel-container strong {
  line-height: 20px;
}

.ratings-container {
  display: flex;
  margin: 20px 0;
}

.rating {
  flex: 1;
  cursor: pointer;
  padding: 20px;
  margin: 10px 5px;
}

.rating:hover,
.rating.active {
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.rating img {
  width: 40px;
}

.rating small {
  color: #555;
  display: inline-block;
  margin: 10px 0 0;
}

.rating:hover small,
.rating.active small {
  color: #111;
}

.btn {
  background-color: #302d2b;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 12px 30px;
  cursor: pointer;
}

.btn:focus {
  outline: 0;
}

.btn:active {
  transform: scale(0.98);
}

.fa-heart {
  color: red;
  font-size: 30px;
  margin-bottom: 10px;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #fef9f2;

font-family: 'Montserrat', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.panel-container {

background-color: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

border-radius: 4px;

font-size: 90%;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

padding: 30px;

max-width: 400px;

}

.panel-container strong {

line-height: 20px;

}

.ratings-container {

display: flex;

margin: 20px 0;

}

.rating {

flex: 1;

cursor: pointer;

padding: 20px;

margin: 10px 5px;

}

.rating:hover,

.rating.active {

border-radius: 4px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.rating img {

width: 40px;

}

.rating small {

color: #555;

display: inline-block;

margin: 10px 0 0;

}

.rating:hover small,

.rating.active small {

color: #111;

}

.btn {

background-color: #302d2b;

color: #fff;

border: 0;

border-radius: 4px;

padding: 12px 30px;

cursor: pointer;

}

.btn:focus {

outline: 0;

}

.btn:active {

transform: scale(0.98);

}

.fa-heart {

color: red;

font-size: 30px;

margin-bottom: 10px;

}

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

JavaScriptの実装

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

要素を取得する

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

// 要素の取得
const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const panel = document.querySelector('#panel')

// 要素の取得

const ratings = document.querySelectorAll('.rating')

const ratingsContainer = document.querySelector('.ratings-container')

const sendBtn = document.querySelector('#send')

const panel = document.querySelector('#panel')

Rating設定機能

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

// Ratingの初期値
let selectedRating = 'Satisfied'

// 顔画像をクリックした時に発火
ratingsContainer.addEventListener('click', (e) => {
    // 顔画像の親要素にratingクラスがついているかチェック
    if(e.target.parentNode.classList.contains('rating')) {
        // アクティブ解除
        removeActive()
        // クリックした顔画像の親要素にactiveクラスをつける
        e.target.parentNode.classList.add('active')
        // HTMLに埋め込まれたRating(Unhappy/Neutral/Satisfied)を取得
        selectedRating = e.target.nextElementSibling.innerHTML
    }
})

// Ratingの初期値

let selectedRating = 'Satisfied'

// 顔画像をクリックした時に発火

ratingsContainer.addEventListener('click', (e) => {

// 顔画像の親要素にratingクラスがついているかチェック

if(e.target.parentNode.classList.contains('rating')) {

// アクティブ解除

removeActive()

// クリックした顔画像の親要素にactiveクラスをつける

e.target.parentNode.classList.add('active')

// HTMLに埋め込まれたRating(Unhappy/Neutral/Satisfied)を取得

selectedRating = e.target.nextElementSibling.innerHTML

}

})

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

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

<div class="rating">
  <img src="#.svg" alt="">
  <small>Unhappy</small>
</div

<small>Unhappy</small>

</div

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

アクティブ解除

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

// アクティブ解除
function removeActive() {
    for(let i = 0; i < ratings.length; i++) {
        ratings[i].classList.remove('active')
    }
}

// アクティブ解除

function removeActive() {

for(let i = 0; i < ratings.length; i++) {

ratings[i].classList.remove('active')

}

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

Rating送信

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

// Send Reviewをクリックした時に発火
sendBtn.addEventListener('click', (e) => {
    panel.innerHTML = `
        <i class="fas fa-heart"></i>
        <strong>Thank You!</strong>
        <br>
        <strong>Feedback: ${selectedRating}</strong>
        <p>We'll use your feedback to improve our customer support</p>
    `
})

// Send Reviewをクリックした時に発火

sendBtn.addEventListener('click', (e) => {

panel.innerHTML = `

<strong>Thank You!</strong>

<br>

<strong>Feedback: ${selectedRating}</strong>

<p>We'll use your feedback to improve our customer support</p>

})

おわりに

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

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

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素の取得
const ratings = document.querySelectorAll('.rating')
const ratingsContainer = document.querySelector('.ratings-container')
const sendBtn = document.querySelector('#send')
const panel = document.querySelector('#panel')

// Ratingの初期値
let selectedRating = 'Satisfied'

// 顔画像をクリックした時に発火
ratingsContainer.addEventListener('click', (e) => {
    // 顔画像の親要素にratingクラスがついているかチェック
    if(e.target.parentNode.classList.contains('rating')) {
        // アクティブ解除
        removeActive()
        // クリックした顔画像の親要素にactiveクラスをつける
        e.target.parentNode.classList.add('active')
        // HTMLに埋め込まれたRating(Unhappy/Neutral/Satisfied)を取得
        selectedRating = e.target.nextElementSibling.innerHTML
    }
})

// Send Reviewをクリックした時に発火
sendBtn.addEventListener('click', (e) => {
    panel.innerHTML = `
        <i class="fas fa-heart"></i>
        <strong>Thank You!</strong>
        <br>
        <strong>Feedback: ${selectedRating}</strong>
        <p>We'll use your feedback to improve our customer support</p>
    `
})

// アクティブ解除
function removeActive() {
    for(let i = 0; i < ratings.length; i++) {
        ratings[i].classList.remove('active')
    }
}

// 要素の取得

const ratings = document.querySelectorAll('.rating')

const ratingsContainer = document.querySelector('.ratings-container')

const sendBtn = document.querySelector('#send')

const panel = document.querySelector('#panel')

// Ratingの初期値

let selectedRating = 'Satisfied'

// 顔画像をクリックした時に発火

ratingsContainer.addEventListener('click', (e) => {

// 顔画像の親要素にratingクラスがついているかチェック

if(e.target.parentNode.classList.contains('rating')) {

// アクティブ解除

removeActive()

// クリックした顔画像の親要素にactiveクラスをつける

e.target.parentNode.classList.add('active')

// HTMLに埋め込まれたRating(Unhappy/Neutral/Satisfied)を取得

selectedRating = e.target.nextElementSibling.innerHTML

}

})

// Send Reviewをクリックした時に発火

sendBtn.addEventListener('click', (e) => {

panel.innerHTML = `

<strong>Thank You!</strong>

<br>

<strong>Feedback: ${selectedRating}</strong>

<p>We'll use your feedback to improve our customer support</p>

})

// アクティブ解除

function removeActive() {

for(let i = 0; i < ratings.length; i++) {

ratings[i].classList.remove('active')

}

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

Rating設定機能

アクティブ解除

Rating送信

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

Rating設定機能

アクティブ解除

Rating送信

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

VueJSの環境構築

JavaScriptとGo言語でToDoアプリを作ろう~まとめ~

[React]~Ambassador画面3:ナビゲーションの実装~

JavaScriptでアプリ開発 ~環境構築~

JavaScriptで作るTodoリスト

React~基礎編~Props

[Go言語]Beegoフレームワークでアプリ開発 ～チュートリアル2～

ReactでTodoアプリを作ろう！

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル

[Go言語]Beegoフレームワークでアプリ開発～チュートリアル2～