文字数カウンター

初段 / 目安 20分

「お便りフォーム、すごく好評なの」と陽葵さんは嬉しそうです。「でもね、たまに小説みたいに長い方がいて……。読みきれないのが申し訳なくて」。そして一言。「入力してる途中で、残り何文字か出せない? 200字までにしたいの」

画面には id="message" の textarea と、id="counter" の段落があります。counter には最初から「残り 200 文字」と書いてありますが、これはただの文字で、まだ何とも連動していません。

入力のたびに残り文字数を測って、counter を書き換えてください。200字を超えたら文字を赤くします。赤くするための .counter.over は CSS に用意してあるので、over クラスを付け外しするだけで色が変わります。超過している間だけ付いていて、消して200字以内に戻したら外れることが大事です。

残りがマイナスになったときの文言は自由ですが、超過していることが読んで分かる形にしてください。

完成条件

• textarea に入力するたび #counter の表示が更新される
• 残り文字数（200 から入力済みの文字数を引いた数）が表示に含まれる
• 200字を超えたら #counter に over クラスを付ける
• 200字以内に戻したら over クラスを外す

進め方

入力のたびに走らせたい処理は input イベントで待ち伏せします。change ではありません。change は入力欄から離れたときにしか流れないので、打っている最中には間に合いません。

入力済みの文字数は textarea.value.length で取れます。残りはそれを 200 から引いた数です。数を文字に混ぜるときはテンプレートリテラルが読みやすいです。

over の付け外しは classList.toggle の第2引数が便利です。第2引数に true を渡すと付け、false を渡すと外します。条件式をそのまま渡せば if を書かずに済みます。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

1. textarea への入力のたびに #counter の表示を更新する
2. 残り文字数（200 − 入力文字数）を表示に含める
3. 200字を超えたら #counter に over クラスを付ける
4. 200字以内に戻したら over クラスを外す