aike/YomodoroTimer.html

## YomodoroTimer.html
<!DOCTYPE html>
<html>
<!--
Yomodoro Timer
This program is licensed under the MIT License.
Copyright 2014, aike (Yo: AIKE1000)
-->
<head>
	<meta charset="UTF-8">
	<title>Yomodoro Timer</title>
	<script type="text/javascript">

		// your api key
		//    https://medium.com/@YoAppStatus/yo-developers-api-e7f2f0ec5c3c
		//    http://yoapi.justyo.co/
		var APIkey = <<YOUR API KEY>>;
		// your yo id
		var sendTo = <<YOUR YO ID>>;


		var button;
		var disp;
		var rev = location.search === '?countdown' ? true : false;
		var sec = 0;
		var id = null;

		var workterm = 25 * 60;
		var breakterm = 5 * 60;
		var currentterm = workterm;

		function yo() {
			var xhr = new XMLHttpRequest();
			xhr.open('POST', 'http://api.justyo.co/yo/');
			xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
			xhr.send('api_token=' + APIkey + '&username=' + sendTo);
		}

		function formatTime(seconds) {
			seconds = rev ? currentterm - seconds : seconds;
			var m = Math.floor(seconds / 60);
			var s = seconds - (m * 60);
			m = '0' + String(m);
			s = '0' + String(s);
			m = m.substr(m.length - 2, 2);
			s = s.substr(s.length - 2, 2);
			return m + ':' + s;
		}

		function starttimer() {
			button = document.getElementById('start');
			disp = document.getElementById('disp');
			document.body.style.backgroundColor = '#fbb';

			if (id) {
				clearInterval(id);
				id = null;
			}

			if (button.innerText === 'STOP') {
				button.innerText = 'START';
				document.body.style.backgroundColor = '#fff';
				return;
			}

			button.innerText = 'STOP';

			sec = 0;
			disp.innerText = document.title = formatTime(sec);
			id = setInterval(
				function() {
					sec++;
					disp.innerHTML = document.title = formatTime(sec);
					if (sec === currentterm) {
						sec = -1;
						if (currentterm === workterm) {
							currentterm = breakterm;
							document.body.style.backgroundColor = '#bbf';
						} else {
							currentterm = workterm;
							document.body.style.backgroundColor = '#fbb';
						}
						yo();
					}
				}, 1000);
		}
	</script>
</head>
<body>
	<div id="disp" style="font-size:250px;text-align:center;">00:00</div>
	<div style="position:absolute;left:10px;top:10px;">
		<button id="start" onclick="starttimer();" style="width:150px;font-size:30px;">START</button>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<!--
	Yomodoro Timer
	This program is licensed under the MIT License.
	Copyright 2014, aike (Yo: AIKE1000)
	-->
	<head>
	<meta charset="UTF-8">
	<title>Yomodoro Timer</title>
	<script type="text/javascript">

	// your api key
	// https://medium.com/@YoAppStatus/yo-developers-api-e7f2f0ec5c3c
	// http://yoapi.justyo.co/
	var APIkey = <<YOUR API KEY>>;
	// your yo id
	var sendTo = <<YOUR YO ID>>;


	var button;
	var disp;
	var rev = location.search === '?countdown' ? true : false;
	var sec = 0;
	var id = null;

	var workterm = 25 * 60;
	var breakterm = 5 * 60;
	var currentterm = workterm;

	function yo() {
	var xhr = new XMLHttpRequest();
	xhr.open('POST', 'http://api.justyo.co/yo/');
	xhr.setRequestHeader('Content-Type' , 'application/x-www-form-urlencoded');
	xhr.send('api_token=' + APIkey + '&username=' + sendTo);
	}

	function formatTime(seconds) {
	seconds = rev ? currentterm - seconds : seconds;
	var m = Math.floor(seconds / 60);
	var s = seconds - (m * 60);
	m = '0' + String(m);
	s = '0' + String(s);
	m = m.substr(m.length - 2, 2);
	s = s.substr(s.length - 2, 2);
	return m + ':' + s;
	}

	function starttimer() {
	button = document.getElementById('start');
	disp = document.getElementById('disp');
	document.body.style.backgroundColor = '#fbb';

	if (id) {
	clearInterval(id);
	id = null;
	}

	if (button.innerText === 'STOP') {
	button.innerText = 'START';
	document.body.style.backgroundColor = '#fff';
	return;
	}

	button.innerText = 'STOP';

	sec = 0;
	disp.innerText = document.title = formatTime(sec);
	id = setInterval(
	function() {
	sec++;
	disp.innerHTML = document.title = formatTime(sec);
	if (sec === currentterm) {
	sec = -1;
	if (currentterm === workterm) {
	currentterm = breakterm;
	document.body.style.backgroundColor = '#bbf';
	} else {
	currentterm = workterm;
	document.body.style.backgroundColor = '#fbb';
	}
	yo();
	}
	}, 1000);
	}
	</script>
	</head>
	<body>
	<div id="disp" style="font-size:250px;text-align:center;">00:00</div>
	<div style="position:absolute;left:10px;top:10px;">
	<button id="start" onclick="starttimer();" style="width:150px;font-size:30px;">START</button>
	</div>
	</body>
	</html>