※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。
半人前のくせに、偉そうに教材を作ってみました。
##実装要件
###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タブから、紐づくイベント名を確認できる。