Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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人分の生徒が座席順で表示される。
生徒の名前をクリックすると出席数にカウントされる。
1講義ごとに出席を管理できる。
それぞれの講義ごとに出席率が出る。

Screenshot

スクリーンショット 2019-10-30 13.01.47.png

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) {
    // 要素の2つ下の要素の中のテキストを取得
    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");
        // 出席数を1追加
        attendno = attendno +  1;
    } else {
        // 配列から削除
        delete attend[result];
        item.children[0].classList.remove("active");
        // 出席数を1マイナス
        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で帰ってくるので今回は扱いにくかったです。

ink-avc
Javascript大好き。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away