alice1017/timer.html

## timer.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイマー</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
    <style>
        html {
            width: 100%;
            height: 100%;
        }
        body {
            height: 100%;
            padding: 200px;
            padding-top: 100px;
            padding-bottom: 0px;
            z-index: 1;
            background: url(https://www.toptal.com/designers/subtlepatterns/patterns/tileable_wood_texture.png);
        }
        main {
            z-index: 2;
            background: rgba(255, 255, 255, 0.8);
            padding-top: 50px;
            padding-bottom: 50px;
            padding-left: 30px;
            padding-right: 30px;
        }
        h1, h2 {
            font-weight: bold;
            font-family: "Kaushan Script";
            color: #555;
        }
        h1 {
            font-size: 100px;
        }
        h2 {
            font-size: 70px;
            margin-bottom: 30px;
        }
        p {
            font-size: 20px;
        }
        .field {
            margin-top: 20px;
        }
        .form {
            margin-bottom: 20px;
        }
        .input {
            width: 150px !important;
        }
        .border {
            background-color: #ccc;
            height: 1px;
        }
        th, td, .tag {
            min-width: 100px;
            font-size: 20px;
        }
        td.large {
            min-width: 200px;
        }
        .tag {
            font-weight: bold;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <main class="main-container">
        <h1>The Timer</h1>
        <p>数字を入力し、ドロップダウンリストから時間・分・秒を選択して「タイマー」ボタンをクリック！</p>
        <div class="field">
            <div class="control form">
                <input id="time" class="input is-medium" type="text" name="time" placeholder="数字を入力">
                <div class="select is-medium">
                    <select id="timing" class="" name="timing">
                        <option value="h">時間</option>
                        <option value="m">分</option>
                        <option value="s" selected>秒</option>
                    </select>
                </div>
                <button class="button is-link is-medium" onclick="timerLaunch()">タイマー設定！</button>
            </div>
        </div>

        <div class="hidden">
            <hr class="border">
            <h2>Timer Queues</h2>
            <table class="table is-striped is-medium">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>time</th>
                        <th>timing</th>
                        <th>left</th>
                        <th>finished</th>
                        <th>clear</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
// Global Variable
window.TimerQueue = [];
window.intervalData = {
    "s": 1000,
    "m": (60 * 1000),
    "h": (60 * 60 * 1000)
};


// Helper Functions
const convertToMS = (time, timing) => {
    const ms = 1000;
    const convertData = {
        "s": (time * ms),
        "m": (time * 60 * ms),
        "h": (time * 60 * 60 * ms)
    };

    return convertData[timing]
};


// Program Functions
const QueueInterval = (index_of_queue) => {
    const index_of_array = (index_of_queue - 1);
    const QueueData = window.TimerQueue[index_of_array];
    const timingUnit = QueueData.timingUnit;
    let left = QueueData.counter;

    // increase a counter
    left++;

    // messaging
    const target = document.getElementById(`left-#${index_of_queue}`);
    const message = `${left}${timingUnit}経ちました`;
    target.innerText = message;

    // redefine
    window.TimerQueue[index_of_array].counter = left;
}

const afterInterval = (index_of_queue) => {
    const index_of_array = (index_of_queue - 1);

    // set 'finished' attribute to current Queue in array
    window.TimerQueue[index_of_array].finished = true;

    // tag message change
    const target = document.getElementById(`tag-#${index_of_queue}`);
    target.innerText = "FINISHED";
    target.className = "tag is-success";
};

const pushToQueue = (time, timing) => {
    const index_of_queue = TimerQueue.length + 1;
    const timeout = convertToMS(time, timing);

    const unitData = {
        "s": "秒",
        "m": "分",
        "h": "時間"
    };

    const timingUnit = unitData[timing];
    const intervalTime = window.intervalData[timing];

    // append queue table
    $("tbody").append(`
        <tr id="queue-#${index_of_queue}">
            <th>${index_of_queue}</th>
            <td>${time}</td>
            <td>${timingUnit}</td>
            <td id="left-#${index_of_queue}" class="large">
                1${timingUnit}経つまで待機中
            </td>
            <td>
                <span id="tag-#${index_of_queue}" class="tag is-warning">
                    NOT YET
                </span>
            </td>
            <td>
                <button class="button is-danger" onclick="removeElement(${index_of_queue})">CLEAR</button>
            </td>
        </tr>
    `);

    // run setInterval
    const interval = setInterval(() => {
        QueueInterval(index_of_queue);
    }, intervalTime);

    // append TimerQueue array
    window.TimerQueue.push({
        "index": index_of_queue,
        "time": time,
        "timing": timing,
        "timingUnit": timingUnit,
        "counter": 0,
        "finished": false,
        "interval": interval,
        "intervalTime": intervalTime
    });

    // set Timeout when ms
    setTimeout(() => {
        clearInterval(interval);
        alert("STOPPED TIMER!!!");
        afterInterval(index_of_queue);
    }, timeout);

};

const timerLaunch = () => {
    const time = parseInt($("#time").val());
    const timing = $("#timing").val();

    // validate time
    if (isNaN(time)) {
        alert("数字を入力してください");
        return;
    }

    $(".hidden").css("display", "block");

    // push to queue
    pushToQueue(time, timing);
}

const removeElement = (index_of_queue) => {
    // remove DOM elemt
    const target = document.getElementById(`queue-#${index_of_queue}`);
    target.parentNode.removeChild(target);

    // clear interval
    const index_of_array = (index_of_queue - 1);
    clearInterval(window.TimerQueue[index_of_array].interval);

}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>タイマー</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
	<style>
	html {
	width: 100%;
	height: 100%;
	}
	body {
	height: 100%;
	padding: 200px;
	padding-top: 100px;
	padding-bottom: 0px;
	z-index: 1;
	background: url(https://www.toptal.com/designers/subtlepatterns/patterns/tileable_wood_texture.png);
	}
	main {
	z-index: 2;
	background: rgba(255, 255, 255, 0.8);
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 30px;
	padding-right: 30px;
	}
	h1, h2 {
	font-weight: bold;
	font-family: "Kaushan Script";
	color: #555;
	}
	h1 {
	font-size: 100px;
	}
	h2 {
	font-size: 70px;
	margin-bottom: 30px;
	}
	p {
	font-size: 20px;
	}
	.field {
	margin-top: 20px;
	}
	.form {
	margin-bottom: 20px;
	}
	.input {
	width: 150px !important;
	}
	.border {
	background-color: #ccc;
	height: 1px;
	}
	th, td, .tag {
	min-width: 100px;
	font-size: 20px;
	}
	td.large {
	min-width: 200px;
	}
	.tag {
	font-weight: bold;
	}
	.hidden {
	display: none;
	}
	</style>
	</head>
	<body>
	<main class="main-container">
	<h1>The Timer</h1>
	<p>数字を入力し、ドロップダウンリストから時間・分・秒を選択して「タイマー」ボタンをクリック！</p>
	<div class="field">
	<div class="control form">
	<input id="time" class="input is-medium" type="text" name="time" placeholder="数字を入力">
	<div class="select is-medium">
	<select id="timing" class="" name="timing">
	<option value="h">時間</option>
	<option value="m">分</option>
	<option value="s" selected>秒</option>
	</select>
	</div>
	<button class="button is-link is-medium" onclick="timerLaunch()">タイマー設定！</button>
	</div>
	</div>

	<div class="hidden">
	<hr class="border">
	<h2>Timer Queues</h2>
	<table class="table is-striped is-medium">
	<thead>
	<tr>
	<th>No.</th>
	<th>time</th>
	<th>timing</th>
	<th>left</th>
	<th>finished</th>
	<th>clear</th>
	</tr>
	</thead>
	<tbody>
	</tbody>
	</table>
	</div>
	</main>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<script>
	// Global Variable
	window.TimerQueue = [];
	window.intervalData = {
	"s": 1000,
	"m": (60 * 1000),
	"h": (60 * 60 * 1000)
	};


	// Helper Functions
	const convertToMS = (time, timing) => {
	const ms = 1000;
	const convertData = {
	"s": (time * ms),
	"m": (time * 60 * ms),
	"h": (time * 60 * 60 * ms)
	};

	return convertData[timing]
	};


	// Program Functions
	const QueueInterval = (index_of_queue) => {
	const index_of_array = (index_of_queue - 1);
	const QueueData = window.TimerQueue[index_of_array];
	const timingUnit = QueueData.timingUnit;
	let left = QueueData.counter;

	// increase a counter
	left++;

	// messaging
	const target = document.getElementById(`left-#${index_of_queue}`);
	const message = `${left}${timingUnit}経ちました`;
	target.innerText = message;

	// redefine
	window.TimerQueue[index_of_array].counter = left;
	}

	const afterInterval = (index_of_queue) => {
	const index_of_array = (index_of_queue - 1);

	// set 'finished' attribute to current Queue in array
	window.TimerQueue[index_of_array].finished = true;

	// tag message change
	const target = document.getElementById(`tag-#${index_of_queue}`);
	target.innerText = "FINISHED";
	target.className = "tag is-success";
	};

	const pushToQueue = (time, timing) => {
	const index_of_queue = TimerQueue.length + 1;
	const timeout = convertToMS(time, timing);

	const unitData = {
	"s": "秒",
	"m": "分",
	"h": "時間"
	};

	const timingUnit = unitData[timing];
	const intervalTime = window.intervalData[timing];

	// append queue table
	$("tbody").append(`
	<tr id="queue-#${index_of_queue}">
	<th>${index_of_queue}</th>
	<td>${time}</td>
	<td>${timingUnit}</td>
	<td id="left-#${index_of_queue}" class="large">
	1${timingUnit}経つまで待機中
	</td>
	<td>
	<span id="tag-#${index_of_queue}" class="tag is-warning">
	NOT YET
	</span>
	</td>
	<td>
	<button class="button is-danger" onclick="removeElement(${index_of_queue})">CLEAR</button>
	</td>
	</tr>
	`);

	// run setInterval
	const interval = setInterval(() => {
	QueueInterval(index_of_queue);
	}, intervalTime);

	// append TimerQueue array
	window.TimerQueue.push({
	"index": index_of_queue,
	"time": time,
	"timing": timing,
	"timingUnit": timingUnit,
	"counter": 0,
	"finished": false,
	"interval": interval,
	"intervalTime": intervalTime
	});

	// set Timeout when ms
	setTimeout(() => {
	clearInterval(interval);
	alert("STOPPED TIMER!!!");
	afterInterval(index_of_queue);
	}, timeout);

	};

	const timerLaunch = () => {
	const time = parseInt($("#time").val());
	const timing = $("#timing").val();

	// validate time
	if (isNaN(time)) {
	alert("数字を入力してください");
	return;
	}

	$(".hidden").css("display", "block");

	// push to queue
	pushToQueue(time, timing);
	}

	const removeElement = (index_of_queue) => {
	// remove DOM elemt
	const target = document.getElementById(`queue-#${index_of_queue}`);
	target.parentNode.removeChild(target);

	// clear interval
	const index_of_array = (index_of_queue - 1);
	clearInterval(window.TimerQueue[index_of_array].interval);

	}
	</script>
	</body>
	</html>