フロントエンドのみの掲示板作成
ここまでいくつか掲示板を作ってきましたが、その完成品のコードをまとめておきます。 実際の動作はCodePenで確認できます。 そのままコピペすれば問題ありません。 codepen.io サーバーを使った掲示板につきましてはCodePenでは使えませんので、ご注意くだ…
前回の記事でも書きましたけど、本編はここからですので、以前に作ったAPIの記事へのリンクを貼っておきます。 html-css-javascript.hatenadiary.com html-css-javascript.hatenadiary.com で、ここで作ったAPIのコードが以下。 const express = require('ex…
さて、今まで作ってきたのは管理者側のページでした。 候補者の名前や年齢、IDなんかも与えて登録するのは管理人がやることになります。 本当はそこもユーザーに任せてしまおうかと思ったりもしたのですが、二重で書き込んだり、「こういうのを書くのは禁止…
ついに三部作が６作目まで来てしまいました。 ４作目のときに謝ったので、もう謝罪はしません。 前回の記事はこちら。 html-css-javascript.hatenadiary.com HTMLから送られてくる数値は、すべて文字列に変換されてしまうのが問題だというところまででした。…
三部作も早いもので、もう５作目まできました（これ如何に）。 前回はイベント委譲についてやりました。 html-css-javascript.hatenadiary.com もうタイトルでは何をやってたのか全くわからなくなってしまいましたね。 これ、どっかでタグ付けでもしておきま…
嘘ついてすいませんでした 三部作と言っておきながら、三つ目の記事ではまだ問題があったのでヌケヌケと４つ目に入ります。 html-css-javascript.hatenadiary.com 前回でも言いましたが、コード的には特に問題はありませんでした。 コードはこんな感じです。…
html-css-javascript.hatenadiary.com 前回まででコードの書き方は全て終わりました。 問題点 さて、ここまでをまとめてみます。 let candidates = JSON.parse(localStorage.getItem("candidates")) || []; document .getElementById("addCandidateForm") .a…
「配列の整列」は３部作になっています。 前回のはこちら。 html-css-javascript.hatenadiary.com 前回作ったコードが以下のようになります。 forEachを回すためにnewCandidateを変数candidateに置き換えました。 candidates.forEach(candidate=>{ const lis…
※本来は配列の整列は１記事で書くつもりだったのですが、寄り道やなんやと余計なことばかり書いてるせいで最終的に１６０００文字を超える大長編になってしまいました。 なのでいくつかに分けて投稿します。 では本編。 前回は投票ボタンを作って、それを押…
前回はローカルストレージに配列を文字列に変換して保存し、保存した文字列をキーで指定してロードして配列に変換しました。 html-css-javascript.hatenadiary.com html-css-javascript.hatenadiary.com で、こんな感じになりました。 let candidates = JSON…
前回は投票ページの候補者を追加するためのフォームを作りました。 html-css-javascript.hatenadiary.com 次はフォームに名前と年齢を入力して追加ボタンを押すことで、投票ページの候補として追加されるようにします。 この辺についても以前に記事にしてい…
これまで、トップページ、投票ページを作成してきました。 で、投票ページには投票ボタンと投票結果を表示することにしたのですが、投票の候補者を追加できるようにする必要もあります。 今回はそのためのページを作成していくことにします。 候補者を追加す…
前回、投票ページのHTMLを作りました。 html-css-javascript.hatenadiary.com <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>投票ページ</title> </head> <body> <header> <h1>投票ページ</h1> </header> </body></html>
前回言った通り、投票ページでは投票の項目を表すところと、投票の結果を表すところを作ります。 html-css-javascript.hatenadiary.com 投票結果はテーブルのような形になりますので、使うタグは<table>ですね。 <table> <thead> <tr> <th>順位</th> <th>候補者</th> <th>投票数</th> <th>投票ボタン</th></tr></thead></table></table>
前回まででトップページとそのヘッダーを作りました。 次はメインコンテンツである掲示板を作ります。 タイトルでもある投票型の掲示板です。 候補があって、候補の横に添えられている投票ボタンを押したら数値が増える、という感じで。 トップページでメイ…
さて、ここまででハンバーガーメニューのHTMLとCSSを書いてきました。 以下の通りです。 HTML <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>投票ボタン付き 横棒グラフ</title> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>
前回はハンバーガーメニューの骨子となるHTMLを作成しました。 <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>投票ボタン付き 横棒グラフ</title> <link rel="stylesheet" href="style.css"> </link></meta></meta></head></html>
前回、ページのHTMLを作りました。 タイトル、投票する場所、リセットを作りましたので、今回はその投票する箇所を作っていくことになります。 まずはCSSでデザインを作り、そのあと投票を反映させるようにJavaScriptを作っていきます。 ヘッダーを作る まず…
さて、前回の最後で２つの問題が生じていました。 1.エンターキーで送信されないこと 2.送信したあとも文字が消えないこと このふたつの問題に対処していきたいと思います。 但し、エンターキーの問題の方について記述したことは完全に無駄足ですので、暇で…
掲示板の書き込みフォームができたので、次は書き込んだ内容を反映させるようにします。 普通はサーバーに書き込んだ内容を送って、返ってきたものを掲示板に反映させるのですが、まずはJavaScriptだけを使ってサーバーは通さず反映させるようにしていきます…
前回はこのブログの目的を記述しました。 html-css-javascript.hatenadiary.com では本編開始です。 掲示板作成開始 まず「！」だけでここまで書いてくれます。 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>掲示板</title> </head> <body> </body> </html> とりあえず、タイトルは「掲示板」にしときま…
とりあえず掲示板を作るのに必要な、送信の部分に関しては作り終えましたけど、まあ見ての通り虚しさを覚えるほどの殺風景です。 前回作ったのがコレです。 掲示板① なんだコレは。 はやいとこ、ある程度装飾をしていきたいと思います。 最低でもあれらのパ…
突然ですが掲示板を作ることにしました。 理由は、完成したらわかると思います。 まあ「この用途で使用したい」と思う掲示板がまだ存在していないから、というだけの理由なわけですが。 使いたいのはちょっと特殊な投票型の掲示板です。 このブログはその掲…
