--- title: js-DAY1-講義ごとのクラス出席管理 tags: JavaScript EverChangingProject author: ink-avc slide: false --- 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 ```html:index.html EverChanginProject

スクリーン

Aさん

Bさん

Cさん

Dさん

Eさん

Fさん

Gさん

Hさん

Iさん

Jさん

Kさん

Lさん

講義:経営戦略論

生徒数:

出席数:0人

出席率:0%

``` ### Javascript ```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 ```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で帰ってくるので今回は扱いにくかったです。