<JavaScript>来場者カウンター作ってみたPart.1

来場者カウンター作ってみた

この記事は以下のように書いていく予定です

• 制作物の目的(今回)
• 制作物の概要(今回)
• 制作物の完成形(今回)
• 制作したコード(html)(今回)
• 制作したコード(JavaScript)
  • 機能1:人数カウント機能
  • 機能2:トータル人数算出機能
  • 機能3:時間ごと人数統計表示機能

今回が書いていないものは次回もしくはその次の回での記述の予定です。
去年の旅行記以来初のシリーズ投稿になりそう
ということで本編

制作物の目的

利用する場所

オープンキャンパス中の学校の各場所

達成したい目的

来場者の確認の容易化

制作物の概要

ざっくりいうと

poolbooyer.hatenablog.jp をwebで実装するような感じ

くわしく

学生とそれ以外の人の来場者数と来場者情報の統計を簡易的に閲覧できるようにする

その他要件

入力が容易であること,レスポンシブであること

使用言語

html(Bootstrap),JavaScript

制作物の完成形

制作物のスクリーンショットを以下につけます

この画面の簡単な説明

赤枠部

来場者カウントを行う部分,ボタンを押すと人数が増減,addを押すとtotalに追加

青枠部

total情報を表示する部分,addを押されたあとに集計をお行う

黄緑枠部

時間単位での集計結果を表示するエリア(画像はテストで同じ時間になっていますが、実装されたものは1時間に一回集計します)

制作したコード(html)

indexページとして使うページのコードはこんな感じです
全部書くとやばいんでbodyの中を分割して書きます
タイトル周りは書かないです。

前提条件

bootsrapを読み込み済み

赤枠部分(来場者のカウントを行う部分)

<table>
  <tbody>
    <tr>
      <td>中学生以外</td>
      <td id="num_parent">0</td>
      <!-- ボタンを配置する(onclickイベントで数値を加算、減算するスクリプトを呼び出す) -->
      <td class="button"><button id="pup" type="button" class="data btn btn-primary btn-block" onclick="count_parent(this)"> + </button></td>
       <td class="button"><button id="pdown" type="button" class="data btn btn-primary btn-block" onclick="count_parent(this)"> - </button></td>
    </tr>
    <tr>
      <td>中学生</td>
      <td id="num_student">0</td>
      <!-- ボタンを配置する(onclickイベントで数値を加算、減算するスクリプトを呼び出す) -->
      <td class="button"><button id="sup" type="button" class="data btn btn-success btn-block" onclick="count_student(this)"> + </button></td>
      <td class="button"><button id="sdown" type="button" class="data btn btn-success btn-block" onclick="count_student(this)"> - </button></td>
    </tr>
  </tbody>
</table>
<!-- トータルに加算するボタンを作る -->
<button class="btn btn-secondary" onclick="add_total()">add</button>
<!-- 人数をリセットするボタンを作る -->
<button class="btn btn-secondary" onclick="reset_num()">reset</button>

idのふり方下手なのは目をつぶってください...
今回は見た目キレイにできるようにtable使って構成しました
ちなみにこれはgridはsm-12,md-6,lg-6で作ってます

青枠部分(トータル人数を表示する部分)

<h2>total</h2>
 <p>トータル人数</p>
<table>
  <tbody>
    <tr>
      <td>中学生以外</td>
      <!-- 赤枠のaddを押すとここが切り替わる -->
      <td id="parent_total">0</td>
    </tr>
    <tr>
      <td>中学生</td>
      <!-- 赤枠のaddを押すとここが切り替わる -->
      <td id="student_total">0</td>
    </tr>
  </tbody>
</table>
<!-- リセットするボタンを作る -->
<button class="btn btn-secondary" onclick="reset_total()">reset</button>

ここもtable使ってます
割とシンプルなコードにまとめてます
ここのgridはsm-12,md-3,lg-3です

黄緑枠部分(時間単位の集計エリア)

<h2>時間単位</h2>

チョーーーーーーーーーーーーーーーーシンプル
というのも実際のカードのコードはjsを使って吐き出してるので起動時は空です
ここのgridもsm-12,md-3,lg-3です
次回以降でそこら編の話は書きます。

ということでこんかいはここまで
多分次回は集計に関する部分以外のjsコード2つについて書くことになりそうです。(時間単位の集計のところはコードがごちゃごちゃしてるんでブラッシュアップ中でもあるのでちょっと時間がかかるかも)