JavaScriptで評価機能を作ろう!

こんにちは。KOUKIです。

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

<目次>

実装するもの

今回は、「評価機能」を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="style.css" />
    <title>Good, Cheap, Fast</title>
  </head>
  <body>
    <h2>How do you want your project to be?</h2>
    <div class="toggle-container">
      <input type="checkbox" id="good" class="toggle">
      <label for="good" class="label">
        <div class="ball"></div>
      </label>
      <span>Good</span>
    </div>

    <div class="toggle-container">
      <input type="checkbox" id="cheap" class="toggle">
      <label for="cheap" class="label">
        <div class="ball"></div>
      </label>
      <span>Cheap</span>
    </div>

    <div class="toggle-container">
      <input type="checkbox" id="fast" class="toggle">
      <label for="fast" class="label">
        <div class="ball"></div>
      </label>
      <span>Fast</span>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Good, Cheap, Fast</title>

</head>

<body>

<h2>How do you want your project to be?</h2>

</label>

</div>

</label>

<span>Cheap</span>

</div>

</label>

</div>

</body>

</html>

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

スタイル(CSS)を装飾

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.toggle-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
  width: 200px;
}

.toggle {
  visibility: hidden;
}

.label {
  position: relative;
  background-color: #d0d0d0;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  margin: 0 15px 0;
  width: 80px;
  height: 40px;
}

.toggle:checked + .label {
  background-color: #8e44ad;
}

.ball {
  background: #fff;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  align-items: center;
  justify-content: center;
  animation: slideOff 0.3s linear forwards;
}

.toggle:checked + .label .ball {
  animation: slideOn 0.3s linear forwards;
}

@keyframes slideOn {
  0% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(40px) scale(1);
  }
}

@keyframes slideOff {
  0% {
    transform: translateX(40px) scale(1);
  }
  50% {
    transform: translateX(20px) scale(1.2);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {

box-sizing: border-box;

}

body {

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

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.toggle-container {

display: flex;

align-items: center;

margin: 10px 0;

width: 200px;

}

.toggle {

visibility: hidden;

}

.label {

position: relative;

background-color: #d0d0d0;

border-radius: 50px;

cursor: pointer;

display: inline-block;

margin: 0 15px 0;

width: 80px;

height: 40px;

}

.toggle:checked + .label {

background-color: #8e44ad;

}

.ball {

background: #fff;

height: 34px;

width: 34px;

border-radius: 50%;

position: absolute;

top: 3px;

left: 3px;

align-items: center;

justify-content: center;

animation: slideOff 0.3s linear forwards;

}

.toggle:checked + .label .ball {

animation: slideOn 0.3s linear forwards;

}

@keyframes slideOn {

0% {

transform: translateX(0) scale(1);

}

50% {

transform: translateX(20px) scale(1.2);

}

100% {

transform: translateX(40px) scale(1);

}

@keyframes slideOff {

0% {

transform: translateX(40px) scale(1);

}

50% {

transform: translateX(20px) scale(1.2);

}

100% {

transform: translateX(0) scale(1);

}

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

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

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

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

JavaScriptの実装

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

要素を取得する

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

// 要素を取得する
const toggles = document.querySelectorAll('.toggle')
const good = document.querySelector('#good')
const cheap = document.querySelector('#cheap')
const fast = document.querySelector('#fast')

// 要素を取得する

const toggles = document.querySelectorAll('.toggle')

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

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

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

Changeイベントの登録

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

// changeイベントの登録
toggles.forEach(
  toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))

// changeイベントの登録

toggles.forEach(

toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))

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

トリックをつける

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

// トリックをつける
function doTheTrick(theClickedOne) {
    if(good.checked && cheap.checked && fast.checked) {
        if(good === theClickedOne) {
            // fastを閉じる
            fast.checked = false
        }

        if(cheap === theClickedOne) {
            // goodを閉じる
            good.checked = false
        }

        if(fast === theClickedOne) {
            // cheapを閉じる
            cheap.checked = false
        }
    }
}

// トリックをつける

function doTheTrick(theClickedOne) {

if(good.checked && cheap.checked && fast.checked) {

if(good === theClickedOne) {

// fastを閉じる

fast.checked = false

}

if(cheap === theClickedOne) {

// goodを閉じる

good.checked = false

}

if(fast === theClickedOne) {

// cheapを閉じる

cheap.checked = false

}

これで完成です。

おわりに

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

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

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
const toggles = document.querySelectorAll('.toggle')
const good = document.querySelector('#good')
const cheap = document.querySelector('#cheap')
const fast = document.querySelector('#fast')

// changeイベントの登録
toggles.forEach(
  toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))

// トリックをつける
function doTheTrick(theClickedOne) {
    if(good.checked && cheap.checked && fast.checked) {
        if(good === theClickedOne) {
            // fastを閉じる
            fast.checked = false
        }

        if(cheap === theClickedOne) {
            // goodを閉じる
            good.checked = false
        }

        if(fast === theClickedOne) {
            // cheapを閉じる
            cheap.checked = false
        }
    }
}

// 要素を取得する

const toggles = document.querySelectorAll('.toggle')

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

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

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

// changeイベントの登録

toggles.forEach(

toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))

// トリックをつける

function doTheTrick(theClickedOne) {

if(good.checked && cheap.checked && fast.checked) {

if(good === theClickedOne) {

// fastを閉じる

fast.checked = false

}

if(cheap === theClickedOne) {

// goodを閉じる

good.checked = false

}

if(fast === theClickedOne) {

// cheapを閉じる

cheap.checked = false

}

月	火	水	木	金	土	日
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の実装

要素を取得する

Changeイベントの登録

トリックをつける

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

Changeイベントの登録

トリックをつける

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

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

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

CSSで評価アプリのスタイリングをしよう!

[Go言語]Goroutineで並列処理を学ぼう3!

[NextJS]~Checkout画面:ソースコードをまとめます!~

JavaScriptでパスコードの打ち込みUIを作ろう!

Django REST frameworkでアプリケーション開発 ～マネジメ…

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

Go言語で作るWebアプリのテンプレート

TypeScriptの型チェック

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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

Django REST frameworkでアプリケーション開発～マネジメ…