プログラミング入門30日 の Day 24
🎯 今日のゴール HTML・CSS・JavaScriptを組み合わせて、動くページを完成させる。
「おみくじアプリ」を作りましょう。ボタンを押すと「大吉」「中吉」「小吉」のどれかがランダムに表示されるページです。Day 23 のHTMLを流用して、scriptだけ次のように変えます。
const results = ["大吉", "中吉", "小吉"];
document.getElementById("btn").addEventListener("click", function () {
const i = Math.floor(Math.random() * results.length);
document.getElementById("message").textContent = results[i];
});Math.random() は0以上1未満の乱数、Math.floor は小数点以下の切り捨てです。組み合わせると「0〜2のランダムな整数」が作れて、配列から1つを選べます。
結果の種類を増やしたり、CSSで結果の文字を大きく目立たせたりして、自分らしいおみくじに仕上げましょう。
const results = ["大吉", "中吉", "小吉", "吉", "末吉"];
document.getElementById("btn").addEventListener("click", function () {
const i = Math.floor(Math.random() * results.length);
document.getElementById("message").textContent = results[i];
});#message {
font-size: 2rem;
font-weight: bold;
color: #b91c1c;
text-align: center;
}results.length を使っているので、配列に結果を追加するだけで種類を増やせます。CSSで結果の文字を大きく目立たせました。
学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の提出欄にアップロードしてください。
Q. Math.floor(Math.random() * 3) が返す可能性があるのはどれでしょうか?
| 問題番号 | プログラミング入門30日 Day 24 |
|---|---|
| 学籍番号 | |
| 氏名 | |
| 提出時間 | |
| 確認コード |
提出時間はサーバー時刻に基づきます。
この画面のスクリーンショットを撮り、Teams の提出欄にアップロードしてください。