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

poolbooyer.hatenablog.jp
こいつの第二弾です

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

ということで今回からは本格的にJavaScriptの事書いていきます

人数入力関連

人数カウント機能

まずはソースコード

//保護者のカウントボタン
var count_parent = function (lev) {
    //現状の数値を取得する
    var num = parseInt(document.getElementById('num_parent').innerHTML);
    //増減の情報を取得
    var trig = lev.getAttribute('id');
    //0でかつ減算のときは処理しない
    if (num == 0 && trig == "pdown") {
    } else if (trig == "pup") {
        //加算のときの処理
        //もとの値に加算して表示を切り替え
        num = num + 1;
        document.getElementById('num_parent').innerHTML = num;
    } else if (trig == "pdown") {
        //減算のときの処理
        //もとの値に減算して表示を切り替え
        num = num - 1;
        document.getElementById('num_parent').innerHTML = num;
    }
}

上のコードは中学生以外のカテゴリの処理です
中学生についての処理もほぼ変わらないのでそっちのコードは省略します。
変わったところはgetElementByIdのところが中学生の要素に合わせた変数になってます
このスクリプトをbutton要素のonclickイベントをトリガにして実行します。

リセット用スクリプト

//入力のリセットボタン
var reset_num = function () {
    //中学生以外のカウントを0に戻す
    document.getElementById('num_parent').innerHTML = 0;
    //中学生のカウントを0に戻す
    document.getElementById('num_student').innerHTML = 0;
}

これは中学生以外と中学生で共通しています
これもonclickをトリガにしています

トータル人数算出機能

//トータルへの追加
var add_total = function () {
    //中学生以外のカウントを取得する
    var pnum = parseInt(document.getElementById('num_parent').innerHTML);
    //中学生のカウントを取得する
    var snum = parseInt(document.getElementById('num_student').innerHTML);
    //中学生以外のトータルを取得する
    var total_p = parseInt(document.getElementById('parent_total').innerHTML);
    //中学生以外のトータルを取得する
    var total_s = parseInt(document.getElementById('student_total').innerHTML);
    //中学生以外のトータルにカウントを加算する
    total_p = total_p + pnum;
    //中学生のトータルにカウントを加算する
    total_s = total_s + snum;
    //中学生以外のトータルを表示
    document.getElementById('parent_total').innerHTML = total_p;
    //中学生のトータルを表示
    document.getElementById('student_total').innerHTML = total_s;
    //入力をリセットする
    document.getElementById('num_parent').innerHTML = 0;
    document.getElementById('num_student').innerHTML = 0;
}

コメントに書いてあるとおりの処理の流れで動いてます
ここまではまだ変なことしてないのでこういった形で本日は終了

<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つについて書くことになりそうです。(時間単位の集計のところはコードがごちゃごちゃしてるんでブラッシュアップ中でもあるのでちょっと時間がかかるかも)

iPad買ってみた

今回のエントリはタイトルの通りでひねりが一切ありません

iPadを買いました

//このエントリもiPadで書いています

特にそれ以上に新しいことはないのですが自分が考える一番安い買い方をメモ

1.iPad本体

2018/07/15に調べたところ、価格が一番安かったショップ(家電量販店オンラインショップ等内)がapple公式ストアだったので公式ストアで購入しました。

仙台だと一番町にストアがあるのでそこで買いました。

実は他店舗も調べたのですが調べる前から公式店舗で買おうと思っていました。

ストアだと安い上に学割が使えるのでさらに若干安く買えるっていうのが理由でした。

ついでに保証とかの話は実店舗で聞いておきたかったのもあります。

ここで47,000円くらいでした(iPad本体32GB+保証延長)

2.ケース

ケースは公式だと割高に感じたのでヨドバシカメラに行って買いました。

2,500円くらいのものをポイントを1,000ポイント使って現金1,500円で買いました。

3.その他

タブレットスタンドは2月に出たハッカソンでの副賞でEvernoteオリジナルのタブレットスタンドをもらったのでそれを使ってます。

一緒にペンももらったのですがペンを使った作業はあまりしないかなと感じています。

あとはワイヤレスイヤホンとスピーカーがあるので音楽をかけたりするときはそれを使っています。

キーボードが地味に欲しいのでアマゾンで購入しようかなと考えています。