JSFiddle - React, Tailwind, and code Playground

by Tim Ko

HTML

<div>
    <div>Mean Seconds: <i class="result_seconds">0</i></div>
    <div>Mean Time: <i class="result_time">0</i></div>
</div>

<input type="text" class="time_minutes" value="0"/>
:
<input type="text" class="time_seconds" value="0"/>
<input type="button" class="add" value="add"/>
<input type="button" class="calculate" value="calculate"/>

<ul class="times">
</ul>

JavaScript

var times = [];
var total = 0;

$('.add').click(function() {
    var val_min = parseInt($('.time_minutes').val());
    var val_sec = parseInt($('.time_seconds').val());
    if (val_min && val_sec) {
        total += (60 * val_min + val_sec);
        val_min = ("0" + val_min).slice(-2);
        val_sec = ("0" + val_sec).slice(-2);
        var listItem = "<li>" + val_min + ":" + val_sec + "</li>";
        $('.times').prepend(listItem);
        times.push(1);
    }
});

$('.calculate').click(calculate);

function calculate() {
    var mean = total / times.length;
    var minutes = (mean - mean % 60) / 60;
    var seconds = mean % 60;
    $(".result_seconds").html(total/times.length);
    $(".result_time").html(minutes + ":" + seconds);
}