1 files changed, 86 insertions, 0 deletions
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..17aac81
--- /dev/null
+++ b/index.php
@@ -0,0 +1,86 @@
+<!doctype html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="description" content="Berechnet die Preise für Pizza im Verhältnis zum Flächeninhalt. Lieber zwei kleine oder eine große Pizza kaufen?">
+	<link rel='stylesheet' type='text/css' href="/css/bootstrap.min.css">
+	<link rel='icon' href="https://iamfabulous.de/favicon.ico">
+	<title>Beats per Minute</title>
+	<style>
+		html {
+			width: 100%;
+		}
+		.main {
+			margin-top: 1rem;
+		}
+	</style>
+</head>
+<body class="container main text-center">
+	<span id="countBpm">
+		<div class="jumbotron">
+			<h1>Hier klicken um die BPMs zu zählen:</h1>
+			<h2><span id="showBpm">0</span> BPM</h2>
+		</div>
+		<button class="btn btn-primary">Click</button>
+	</span>
+	<button id="reset" class="btn btn-secondary">Reset</button>
+
+<script>
+	function median(values){
+		if ( values.length === 0 ) {
+			return 0;
+		}
+
+		values.sort(function(a,b){
+			return a-b;
+		});
+
+		var half = Math.floor(values.length / 2);
+
+		if (values.length % 2) {
+			return values[half];
+		}
+
+		return (values[half - 1] + values[half]) / 2.0;
+	}
+	function reset() {
+		lastClick = 0;
+		bpm = [];
+		document.getElementById("showBpm").innerHTML = 0;
+	}
+	function display(bpm) {
+		/* slice() copies by value, not by reference, so the median() doesn't mess with the array */
+		document.getElementById("showBpm").innerHTML = Math.round(median(bpm.slice()));
+	}
+	window.addEventListener("load",function() {
+		var lastClick = 0;
+		var bpm = [];
+		document.getElementById("countBpm").addEventListener("click", function(e){
+			var d = new Date();
+			var t = d.getTime();
+			var seconds = ( t - lastClick ) / 1000;
+
+			if ( 0 != lastClick ) {
+
+				if ( seconds > 10 ) {
+					// reset after 10 seconds delay
+					reset();
+				} else {
+					var _bpm = 60 / seconds
+					bpm.push( _bpm );
+					if ( bpm.length > 10 ) {
+						// keep only last 10 clicks
+						bpm.shift();
+					}
+					display(bpm);
+				}
+
+			}
+			lastClick = t;
+		});
+		document.getElementById("reset").addEventListener("click", function(e){
+			reset();
+		})
+	});
+</script>
+</body>