diff options
| author | Horus | 2020-10-15 18:23:19 +0200 |
|---|---|---|
| committer | Horus | 2020-10-15 18:23:19 +0200 |
| commit | fe36e85bd72a082626704acee5cbdfdbefbbdaef (patch) | |
| tree | 016cb33150dd4e50940b7f1b62105864c1981995 /index.html | |
| download | bpm -fe36e85bd72a082626704acee5cbdfdbefbbdaef.tar.gz | |
initial commit
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 86 |
1 files changed, 86 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..240fe0a --- /dev/null +++ b/index.html @@ -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) { + document.getElementById("showBpm").innerHTML = Math.round(median(bpm)); + } + 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; + console.log(seconds) + + 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> |