総合 予約ページ完成

師範 / 目安 45分

陽葵さんが、いつになく静かな顔で座っています。「最後のお願い。予約ページを本気で作りたいの。人数を選んで、名前と時間を入れて、間違いがあったら教えてくれて、送ったら確認画面が出て、その時間が営業時間外なら止めてくれる。ぜんぶ入りで」

道場の10問目、最後の依頼です。

新しく覚える書き方はありません。ここまでの9問で使った部品を、1つのフローに組み上げるだけです。人数の増減はボタンのクリック、入力の検証は submit と preventDefault、確認画面の出し入れは hidden クラスの付け外し、営業時間の判定は問8の isOpen(hour)。持っている部品を正しい順に並べられるか、それだけを問います。

一息に書こうとすると必ず崩れます。順番があります。まず人数の増減だけを作って動かす。次に submit を止めてエラーを出すところまで。最後に確認画面を出す。1つ動くたびに画面で確かめて、次に進んでください。

検証の順序にも意味があります。エラーは1つ見つかったら、その時点で止めて確認画面を出さない。名前が空なのに確認画面が出てしまうと、お客さんは送信できたと思ってしまいます。エラーのときは前の確認画面も必ず閉じてください。逆に、通ったときはエラー文を消すのを忘れないでください。エラー文は自分で消さないかぎり残ります。

HTML と CSS は読み取り専用です。人数の増減ボタン、名前と時刻の入力欄、送信ボタン、エラーの行、そして最初は hidden が付いた確認画面が用意してあります。

完成条件

人数の増減

• 人数は 1 から始め、#count-up で1増やし、#count-down で1減らして #guests に出す
• 1未満と6より大きい人数にはしない

検証

• form の submit を e.preventDefault() で止める
• 名前が空なら #error に「お名前を入力してください」を出し、確認画面は出さない
• 時刻が営業時間 (7以上22未満) の外なら #error に「営業時間は7時から22時までです」を出し、確認画面は出さない。判定は isOpen(hour) を作って使う

確認画面

• すべて通ったら #error を空にし、#confirm から hidden を外す
• #confirm-text に、名前・人数・時刻の3つが読み取れる文を出す

進め方

白紙から書いてください。手が止まったらヒントを開けます。ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

これで10問すべてです。陽葵さんは予約フォームに自分で名前を入れて、確認画面が出るのを見届けると、両手で頬をおさえて言いました。「ハレノヒ珈琲、ネット予約始めました!」

師範が奥から一枚の紙を持って出てきます。そこには JavaScript道場・師範代を允許する と書かれていました。ボタンひとつで挨拶を出すところから始めて、いまあなたは、動く予約フローを白紙から組み上げられます。

1. 人数を1から始め、#count-up で1増やし #count-down で1減らして #guests に出す
2. 人数は1未満にも6より大きくもしない
3. form の submit を e.preventDefault() で止める
4. 名前が空なら #error にお名前を入力してくださいを出し、確認画面は出さない
5. isOpen(hour) を作り、時刻が7以上22未満の外なら #error に営業時間のエラーを出して確認画面は出さない
6. すべて通ったら #error を空にし、#confirm から hidden を外す
7. #confirm-text に名前・人数・時刻の3つが読み取れる文を出す