2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【教材】JavaScriptの教材を作ってみました1

Last updated at Posted at 2020-12-12

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

半人前のくせに、偉そうに教材を作ってみました。

##実装要件

イメージ
e2ea8a0dc84c8e10827f07b63e5d5944 (1).gif

###css

  • 文字は中央に配置してください。
  • カードは横並びで配置してください。

###javascript

  • スタートボタンを押すと、初期カードが2枚配られる。
  • 配られたカードの内、1枚があたり。
  • あたりを引くと1枚追加される。
  • あたりはランダムで配置される。
  • 外れを引くと、1枚にリセットされて、成功した回数が表示される。
  • 成功した回数は、失敗後1000ミリ秒経過してから表示される。
  • 検証ツールで見た時、Elementsであたりが分からないようにしてください。
  • その場合、検証ツールであたりがわかる方法を考えてください。

####注意点
DRYを意識して、コンパクトに記述してください。

####学べる技術

####css

  • flexbox
  • テキストの中央配置

####javascript
- 条件分岐(三項演算子)
- 繰り返し
- コールバック関数
- setTimeout構文
- イベントリスナー
- DOMの操作
- ランダム関数
- 文字列への変数組み込み

###回答例(あまり鵜呑みにしないでください)

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>JavaScript Practice</title>
  <style>
    #btnFlame {display: flex;}

    .box {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin: 0 8px 8px 0;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
 <div id="btnFlame"></div>
<script>この位置に下記のjsファイルを記載</script>
</body>
</html>
const btnFlame = document.getElementById("btnFlame");  //枠組みノードを変数に格納
let num = 1;
const word = (word) => {  //カードに文字を入れる関数
  const box = document.getElementsByClassName("box");
  box[0].textContent = word;
}
const restart = () => {  //外れカードを引いた時の処理
  let result = num - 3;
  num = 1;
  make();
  setTimeout(function () { word(`結果:${result}`) }, 1000);  //遅れて結果を表示する処理。
}
const divide = () => { //あたりとハズレカードを作る関数
  let bingoNum = Math.floor(Math.random() * num);  //ランダムな数字を取得する関数。
  for (let i = 0; i < num; i++) {  //現在のnumの数に応じてカードを作成
    const div = document.createElement('div');
    div.classList.add("box");
    i === bingoNum ? div.addEventListener("click", make) : div.addEventListener("click", restart);
//三項演算子。ランダムに取得した数値と一致した場合、あたりのイベントリスナーつける。
    btnFlame.appendChild(div); //btnFlameの子要素として追加
  }
}
const deleteChild = () => { //btnFlameの子要素を削除する関数。
  while (btnFlame.firstChild) {
    btnFlame.removeChild(btnFlame.firstChild);
    }
  }
const make = () => { //カードを作成する関数。
  deleteChild();
  divide();
  num++;
}
make(); //スタートカードを作成。
word("スタート");

検証ツールであたりを確認する方法。
検証ツールのEvent Listenersタブから、紐づくイベント名を確認できる。

2
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?