JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<h1 id="num_beats_counter">4</h1>
<button id="beat_button">Click Me To The Beat!</button>
<div id="result"></div>

CSS

h1 {
    text-align: center;
    font-size: 100px
}
button {
    width: 100%;
    height: 100px;
    margin:0px auto;
}
div {
    text-align: center;
}

JavaScript

// figure out beats per min
var count = 4, start_time, end_time, calculated_time, time;

truncateDecimals = function (number) {
    return Math[number < 0 ? 'ceil' : 'floor'](number);
};

$('#beat_button').on('click', function () {
    if (typeof count === 'number') {
        count = count - 1;
        $('#num_beats_counter').text(count);
        
        if (count === 1) {
            time = new Date();
            start_time = time.getTime();
        } else if (count === 0) {
            time = new Date();
            end_time = time.getTime();
            
            calculated_time = 60000 * 1 / (end_time - start_time);
            $('#result').text('About: ' + truncateDecimals(calculated_time) + ' beats per minute.');
            
            count = 'Done!';
        }
    } else {
        $('#num_beats_counter').text(count);
    }
});