JavaScriptでアラーム

第4作目のプログラム。コードを書くことに少しずつ慣れてきた気がする。今回はJavaScriptでアラーム。基本の基本という感じだが、設定したアラームの削除まで実装するのはいい練習になった。尚、デザインはとりあえずのもので、モバイルからのアクセスは全く考えていない。

## 仕様
- 現在の時刻を表示
- 設定した時刻になるとアラーム
- アラームは最大5つまで設定可能
- 設定したアラームはテキストで表示
- テキスト横のボタンからアラームを削除

## コード

``` index.html
<div id='timerText'>0:00:00</div>
	<form name="alarm_form">
		<p>アラーム: <select name ='option_hours'>
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
		</select>
		<select name ='option_minutes'>
			<option value='0'>00</option>
			<option value='1'>01</option>
			<option value='2'>02</option>
			<option value='3'>03</option>
			<option value='4'>04</option>
			<option value='5'>05</option>
			<option value='6'>06</option>
			<option value='7'>07</option>
			<option value='8'>08</option>
			<option value='9'>09</option>
			<option value='10'>10</option>
			<option value='11'>11</option>
			<option value='12'>12</option>
			<option value='13'>13</option>
			<option value='14'>14</option>
			<option value='15'>15</option>
			<option value='16'>16</option>
			<option value='17'>17</option>
			<option value='18'>18</option>
			<option value='19'>19</option>
			<option value='20'>20</option>
			<option value='21'>21</option>
			<option value='22'>22</option>
			<option value='23'>23</option>
			<option value='24'>24</option>
			<option value='25'>25</option>
			<option value='26'>26</option>
			<option value='27'>27</option>
			<option value='28'>28</option>
			<option value='29'>29</option>
			<option value='30'>30</option>
			<option value='31'>31</option>
			<option value='32'>32</option>
			<option value='33'>33</option>
			<option value='34'>34</option>
			<option value='35'>35</option>
			<option value='36'>36</option>
			<option value='37'>37</option>
			<option value='38'>38</option>
			<option value='39'>39</option>
			<option value='40'>40</option>
			<option value='41'>41</option>
			<option value='42'>42</option>
			<option value='43'>43</option>
			<option value='44'>44</option>
			<option value='45'>45</option>
			<option value='46'>46</option>
			<option value='47'>47</option>
			<option value='48'>48</option>
			<option value='49'>49</option>
			<option value='50'>50</option>
			<option value='51'>51</option>
			<option value='52'>52</option>
			<option value='53'>53</option>
			<option value='54'>54</option>
			<option value='55'>55</option>
			<option value='56'>56</option>
			<option value='57'>57</option>
			<option value='58'>58</option>
			<option value='59'>59</option>
		</select> <span class="btn" id="set_btn">設定</span></p></form>

		<div class="container">
			<p>アラーム設定時刻</p>
			<ul id="parent_list">
			</ul>
		</div>
```
```css.css
		body {
			font-family: Arial, 'メイリオ', sans-serif;
			text-align: center;
		}
		#timerText {
			color: #00aaff;
			font-size: 148px;
			margin: 30px auto;
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		}

		p {
			font-size: 20px;
		}

		select {
			font-size: 18px;
			padding: 3px;
		}

		.btn{
			margin-left: 5px;
			display: inline-block;
			font-weight: bold;
			width: 60px;
			padding: 0.5px;
			border-radius: 5px;
			box-shadow: 0 2px 0 #CDC9C9;
			background: #EEE9E9;
			cursor: pointer;
		}

		.delete_btn {
			margin-left: 15px;
			font-weight: bold;
			width: 60px;
			padding: 3px;
			border-radius: 5px;
			background: #FF4500;
			box-shadow: 0 2px 0 red;
			cursor: pointer;
			color: #fff;
		}

		.container {
			text-align: left;
			padding: 15px;
			margin: 0 auto;
			background: #e0e0e0;
			width: 350px;
			height: 190px;
		}
		.container p {
			font-size: 16px;
			margin: 5px;

		}

		.container li{
			margin-bottom: 7px; 
		}

```
``` main.js
'use strict';
			let currentDate = new Date();
			let hours = currentDate.getHours();
			let minutes = currentDate.getMinutes();
			let seconds = currentDate.getSeconds();
			let timerText = document.getElementById('timerText');
			let set_btn = document.getElementById('set_btn');
			let delete_btn = document.getElementById('delete_btn');
			let option_hours;
			let option_minutes;
			let parent_list = document.getElementById('parent_list');
			let record = []; //アラーム設定格納
			let x = 0; // 計算用の変数

			//アラーム設定用オブジェクト
			let Setting = function(sethour, setminute){
				this.sethour = sethour;
				this.setminute = setminute;
			};

			// 時計の"12:1"を"12:01"と表記
			function adjustDigit (num){
				let digit;
				if( num < 10 ) {digit = `0${num}`;}
				else { digit = num; }
				return digit;
			}

			// アラームセット
			set_btn.addEventListener('click', function(){
				//アラームは最大5まで
				let lis = parent_list.getElementsByTagName('li');
				let len = lis.length;
				if (len >= 5) {return;}

				//設定時間を記録
				option_hours = document.alarm_form.option_hours.value;
				option_minutes = document.alarm_form.option_minutes.value;
				record[x] = new Setting(option_hours, option_minutes);

				 //設定時間を表示
				 let container_list = document.createElement('li');
				 let list_content = document.createTextNode(`${record[x].sethour}時${record[x].setminute}分`);
				 parent_list.appendChild(container_list);
				 container_list.appendChild(list_content);

				//表示削除用ボタン
				let list_span = document.createElement('span');
				let id_li = document.createAttribute('id'); 
				let id_span = document.createAttribute('id'); 
				let span_content = document.createTextNode('削除');
				container_list.appendChild(list_span);
				list_span.appendChild(span_content);
				container_list.setAttributeNode(id_li);
				container_list.id = x;
				container_list.classList.add('deletes');
				list_span.classList.add('delete_btn');

				//設定時刻と表示を削除
				let deletes = document.getElementsByClassName('deletes');
				for( var i = 0, de_len = deletes.length; i < de_len; i++) {
					deletes[i].onclick = function () {
						record[this.id] = 'disabled';
						this.id = 'temp';
						var temp = document.getElementById('temp');
						temp.parentNode.removeChild(temp);
					};
				};
				x++;
			});

			//時計を動かす
			function updateCurrentTime(){
				setTimeout(function(){
					currentDate = new Date();
					hours = adjustDigit(currentDate.getHours());
					minutes = adjustDigit(currentDate.getMinutes());
					seconds = adjustDigit(currentDate.getSeconds());
					timerText.innerHTML = `${hours}:${minutes}:${seconds}`;

					//アラーム機能
					for (var i = 0, len = record.length; i < len; i++){
						if (record[i].sethour == currentDate.getHours() && record[i].setminute == currentDate.getMinutes() && seconds == 0){
							alert('The time is now!');
						};
					};
					updateCurrentTime();
				}, 1000);
			}updateCurrentTime();

```