前回まででトップページとそのヘッダーを作りました。
次はメインコンテンツである掲示板を作ります。
タイトルでもある投票型の掲示板です。
候補があって、候補の横に添えられている投票ボタンを押したら数値が増える、という感じで。
トップページでメインを「投票するところ」としておきましたけど、トップページにそんなものを作ってしまったら見づらくて仕方なくなると思うので、別のページにしようと思います。
とりあえずファイル名は「vote.html」にします。
ヘッダーはすべて共通にすることになりますので、ヘッダーもファイルを別につくってJavaScriptでそれを引っ張ってくることにします。
なのでここではメインである投票フォームを考えていこうと思います。
まずは構成。
構成の方針
今回も最低限のものだけを考えていくことにします。
上部に「順位」「候補」「投票数」「投票ボタン」という項目を作って、その下に候補を任意に増やしていき、行を追加していく感じにしようと思います。
こんな感じです。
書き方の方針
まずはHTMLで構成を作ることになります。
まず項目の箇所と追加していく場所を確保します。
それらをCSSのdisplayをflexにして横並びのレイアウトを構成します。
投票ボタンを押したときや候補を追加するとき、あとは順位を順番にそろえるあたりはJavaScriptで行うことになります。
操作をしたあとの再描写もJavaScriptで行うことになりますね。
この場合、再描写ってのはリロードじゃなく、DOM操作による部分的な変化を描写するという意味で使っています。
おわりに
短いですが、今回はここまでにしておきます。
この記事の方針に従ってページを作成していきます。
次はまずHTMLを作成します。
