🚀 JavaScript 全体フロー完全マップ

このプログラムは、単なる FizzBuzz ではありません。 「ユーザー操作 → データ変換 → 視覚的生成」 という モダンな Web アプリの基本要素がすべて詰まっています。

1

配線と初期化 (Initialization)

DOM要素の定義

JavaScriptがHTMLを触るための「ハンドル」を握る工程です。
document.getElementById で名札（ID）を特定します。

  • form: 全体を見守る親玉
  • smit: 実行の合図
  • picColor: 色情報の取得元
const form = document.getElementById('form');
const smit = document.querySelector('input[type="submit"]');
// 起動時のボタン状態
smit.disabled = false;
crea.disabled = true;
2

イベント監視 (Event Listening)

① Submit (送信)

フォームが送信されたとき、バリデーション（入力チェック）を開始します。

form.onsubmit = ...
② Input (色変更)

カラーピッカーが動くたびにリアルタイムで色情報を翻訳します。

picColor.addEventListener('input', ...)
③ Change (モード切替)

彩度・輝度のラジオボタンが変わったら、リストを書き直します。

chgColor.onchange = ...
3

リスト作成工場 (The Factory: editList)

Input HEX (#FF0000)
hexToRgb / rgbToHsl
Conversion Result H: 0 / S: 100 / L: 50
FOR LOOP (1回から入力回数まで繰り返し)
A

判定処理 (fizzbuzz関数)

数字を渡して、文字([15]fizzbuzz等)を受け取る

B

色計算 (グラデーション)

モードに合わせて s-- または l-- を実行。100から少しずつ引く

C

視認性チェック (文字色反転)

輝度(L) > 50 なら文字は黒、そうでなければ白にする

D

DOMの生成と追加 (appendChild)

<li> 要素を生成し、リストの一番下へ貼り付け！