js-DAY1-講義ごとのクラス出席管理

Start making apps everyday as a javascript training.
Everything made by scratch.
Limit to make it this app is 1hour.
Not responsive design, show on the desktop screen.

About this app

"出席管理"
クラスの出席管理ができる。
画面に12人分の生徒が座席順で表示される。
生徒の名前をクリックすると出席数にカウントされる。
１講義ごとに出席を管理できる。
それぞれの講義ごとに出席率が出る。

Screenshot

Code

HTML

index.html

<!doctype html>
<html lang="ja">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- original css file -->
  <link rel="stylesheet" type="text/css" href="assets/style.css">
  <title>EverChanginProject</title>
</head>
<body>
  <div class="container-fluid">
    <!-- contents start -->



    <div class="row">
      <article class="col-12 text-center p-4">
        <div class="bk-white br-m p-4 shadow-black">
          <p>スクリーン</p>
        </div>
      </article>


      <div id="Members" class="col-6 text-center p-4 row">
        <!-- 生徒座席 -->
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Aさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Bさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Cさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Dさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Eさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Fさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Gさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Hさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Iさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Jさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Kさん</p>
          </div>
        </article>
        <article class="col-4 text-center p-4 eachstudent" onclick="attended(this)">
          <div class="bk-white br-m p-4 shadow-black">
            <p>Lさん</p>
          </div>
        </article>
      </div>


      <!-- 講義情報 -->
      <div class="col-6 p-4 row">
        <article class="col-12 text-left p-4">
          <h3 class="mb-4">講義：経営戦略論</h3>
          <h3 id="student" class="mb-4">生徒数：<span></span></h3>
          <h3 id="attendnum" class="mb-4">出席数：<span>0人</span></h3>
          <h3 id="percent">出席率：<span class="color-accent">0%</span></h3>
        </article>
      </div>

    </div>



    <!-- contents end -->
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- original javascript file -->
  <script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>

Javascript

main.js

// 要素の取得と代入
var members = document.getElementById('Members').children;
var student = document.getElementById('student').children[0];
var percent = document.getElementById('percent').children[0];
var attendnum = document.getElementById('attendnum').children[0];
var attend = [];
var attendno = 0;

// 生徒数を計算
var total = 0;
for (var i = 0; i < members.length; i++) {
    total ++;
}
student.textContent = total;

// クリックイベント
attended = function(item) {
    // 要素の２つ下の要素の中のテキストを取得
    var con = item.children[0].children[0].textContent;
    // 配列の中にテキストがあるか検索
    var result = attend.indexOf(con);

    // 要素の有無で条件分岐
    if (result == -1) { 
        // 配列に追加
        attend.push(con);
        item.children[0].classList.add("active");
        // 出席数を１追加
        attendno = attendno +  1;
    } else {
        // 配列から削除
        delete attend[result];
        item.children[0].classList.remove("active");
        // 出席数を１マイナス
        attendno = attendno -  1;
    }
    // 出席率と出席数を書き換える
    percent.textContent = Math.round(attendno / total * 100) + "%";
    attendnum.textContent = attendno + "人";
}

CSS

style.css

body {
    background-color: #f1f1f1;
}
p,article {
    margin: 0 !important;
    padding: 0 !important;
}
.br-m {
    border-radius: 10px;
}



/*background*/
.bk-white {
    background-color: #ffffff;
}
.bk-lightGray {
    background-color: #eaeaea;
}



/*shadow*/
.shadow-black {
    box-shadow: 5px 5px 15px #00000052;
}



/*color*/
.color-accent {
    color: #ff00a3;
}



.active {
    background-color: #ff00a3;
    color: #ffffff;
}
.nonactive {
    background-color: #ffffff;
    color: black;
}

Comment

このアプリでは以下の技術を使用しました。
- 要素の取得（document.getElementById）
- 反復処理（for）
- 配列検索（indexOf）
- 配列への追加（push）
- 配列から削除（delete）
- 少数第一位を四捨五入（Math.round）

特に検索は面白いですね。
indexOfを使うと、文字列でも配列の中に存在するのか検索し、配列の中の位置を返り値として返してくれるので、配列の中身を操作しやすくなります。
他にもsomeやeachメソッドがありましたが、true, falseで帰ってくるので今回は扱いにくかったです。