チャレンジ：イベントリスナーの実装

課題

ユーザーが自分の情報を送信できるフォームの作成。ユーザー入力のバリデーション、入力中のリアルタイムフィードバック、不正な入力時のフォーム送信防止が目標。

1. リアルタイム入力フィードバック:
   • ユーザーが入力するたびに変更を監視;
   • イベントハンドラ内で入力値の長さを確認;
   • 3文字未満の場合、IDが feedback の <p> の内容を "Name is too short." に設定;
   • 3文字以上の場合、feedback を "Name looks good!" に設定。
2. フォーム送信のデフォルト動作防止:
   • フォーム送信を監視;
   • フォームのデフォルト送信動作を停止;
   • 入力値を確認;
   • 3文字未満の場合、IDが form-message の <p> に "Please enter a longer name" を表示;
   • 3文字以上の場合、form-message に "Form submitted successfully!" を表示。

• input イベントを使用して、ユーザーが入力するたびに変更を監視;
• event.target.value.length < 3 を使って入力値の長さを確認;
• submit イベントを使用してフォーム送信を監視;
• event.preventDefault() を使ってフォームのデフォルト送信動作を停止;
• nameInput.value.length < 3 を使って入力値を確認。