OIC2024-Front03

Fizz Buzz プログラム課題

この課題では、JavaScriptを使用してブラウザ上でFizz Buzzの動作するプログラムを作成してもらいます。Fizz Buzzは、1から指定された数までの数字を順に出力し、以下の条件に基づいて特定の文字列を表示するゲームです。

• 数字が3で割り切れる場合は、「Fizz」を表示する。
• 数字が5で割り切れる場合は、「Buzz」を表示する。
• 数字が3と5の両方で割り切れる場合は、「FizzBuzz」を表示する。
• 上記の条件に当てはまらない場合は、数字をそのまま表示する。

このゲーム画面には以下の部品を用意する。

• カウンタ表示エリア（カウンタ及びFizz Buzzの表示を行う）
• ボタン（カウンタの数値を進める）
• リセットボタン（カウンタをゼロに戻す）

課題の目標

• イベントの学習: ボタンのクリックイベントを使用してプログラムを制御する方法を学びます。
• DOM操作の学習: HTML要素の表示やスタイルを変更する方法を学びます。
• JavaScriptファイルの作成と連携: index.html、style.css、app.jsの3つのファイルを作成し、それらを相互に連携させる方法を学びます。

課題の手順

1. HTMLファイルの作成

   • index.htmlという名前のHTMLファイルを作成します。
   • 必要なHTML要素（ボタン、カウンタ表示領域など）を作成し、適切なIDやクラスを追加します。
   • CSSファイルとJavaScriptファイルとの連携のために、必要なスクリプトタグを追加します。

2. CSSファイルの作成

   • css/style.cssという名前のCSSファイルを作成します。
   • 必要なスタイルを追加し、ボタンやカウンタの見た目を整えます。

3. JavaScriptファイルの作成

   • js/app.jsという名前のJavaScriptファイルを作成します。
   • ボタンのクリックイベントを取得し、カウンタを進める処理を追加します。
   • Fizz Buzzの条件に基づいて、適切な文字列を表示する処理を追加します。
   • リセットボタンのクリックイベントを取得し、カウンタをリセットする処理を追加します。

4. プログラムのテスト

   • ブラウザでindex.htmlを開き、ボタンをクリックした際にカウンタが進み、Fizz Buzzの条件に基づいた結果が表示されるかどうかを確認します。
   • リセットボタンをクリックした際にカウンタがリセットされるかどうかも確認します。

提出方法

• プロジェクトのルートディレクトリにあるindex.html、css/style.css、js/app.jsの3つのファイルを提出してください。

ヒント

• イベントリスナーを使用してボタンのクリックイベントを取得し、カウンタを進める処理を実装します。
• DOM操作を使用してカウンタの値を表示し、Fizz Buzzの結果を更新します。
• JavaScriptの条件分岐（if-else文やswitch文）を使用してFizz Buzzの条件を判定します。
• リセットボタンの処理では、カウンタの値を初期化して表示をリセットします。

がんばってください！楽しんでプログラムを作成しましょう！