diff options
Diffstat (limited to 'index.php')
| -rw-r--r-- | index.php | 49 |
1 files changed, 45 insertions, 4 deletions
@@ -20,6 +20,11 @@ <div class="jumbotron"> <h1>Hier klicken um die BPMs zu zählen:</h1> <h2><span id="showBpm">0</span> BPM</h2> + <div class="mt-5 mb-5 container" id="showDances"> + <div class="row mb-2" id="showDances-standard"> + </div> + <div class="row mb-2" id="showDances-latein"></div> + </div> </div> <button class="btn btn-primary">Click</button> </span> @@ -39,7 +44,7 @@ <?php } ?> - <div class="col"> + <div class="col" id="<?= $dance->name ?>"> <h3> <?= $dance->name; ?> </h3> <?= $dance->minBarspm ?> bis <?= $dance->maxBarspm ?> Takte pM <br> @@ -56,6 +61,8 @@ var lastClick = 0; var bpm = []; var dances = <?php readfile("dances.json"); ?>; + var appendedDances = []; + var appendedHeader = []; function median(values){ if ( values.length === 0 ) { return 0; @@ -76,11 +83,18 @@ function reset() { lastClick = 0; bpm = []; + appendedDances = []; + appendedHeader = []; document.getElementById("showBpm").innerHTML = 0; + document.getElementById("showDances-standard").innerHTML = ""; + document.getElementById("showDances-latein").innerHTML = ""; } - function display(bpm) { + function getBpm(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())); + return Math.round(median(bpm.slice())); + } + function display(bpm) { + document.getElementById("showBpm").innerHTML = getBpm(bpm.slice()); } window.addEventListener("load",function() { document.getElementById("countBpm").addEventListener("click", function(e){ @@ -105,10 +119,37 @@ } lastClick = t; + + if ( bpm.length >= 5 ) { + for ( i = 0; i < dances.length; i++ ) { + var dance = dances[i]; + if ( ( (dance.minBpm-3) <= getBpm(bpm) ) && ( getBpm(bpm) <= (dance.maxBpm+3) ) && -1 == appendedDances.indexOf( dance.name ) ) { + var danceDiv = document.createElement("div"); + danceDiv.innerHTML = document.getElementById( dance.name ).innerHTML; + danceDiv.classList.add("dance-created"); + danceDiv.classList.add("col"); + + if ( -1 == appendedHeader.indexOf( dance.type ) ) { + var danceHeader = document.createElement("div"); + danceHeader.classList.add("col-12"); + danceHeader.classList.add("mb-2"); + danceHeader.classList.add("mt-4"); + danceHeader.innerHTML = "<h3> Mögliche " + dance.type[0].toUpperCase() + dance.type.substr(1) + "-Tänze</h3>"; + document.getElementById( "showDances-" + dance.type ).appendChild(danceHeader); + appendedHeader.push( dance.type ); + } + + appendedDances.push( dance.name ); + + document.getElementById( "showDances-" + dance.type ).appendChild(danceDiv); + } + } + } + }); document.getElementById("reset").addEventListener("click", function(e){ reset(); - }) + }); }); </script> </body> |