Input form for bike ride data

Includes put current date in input JS.

by akmiecik

HTML

<form>
<input type="date" id="date_today" name="date"><br>
<input type="number" id="distance" name="distance" step=".01">
<input type="number" id="minutes" name="minutes" step="1">
<input type="number" id="seconds" name="seconds" step="1" onblur="calc()">
<input type="number" id="average" name="average" width="1"><br>
<input type="number" id="max" name="max" step=".01"><br>
<br>


</form>

CSS

#distance, #average, #minutes, #seconds, #max   { max-width: 40px; }
#date_today {max-width: 130px;}

JavaScript

var now = new Date();
var y = now.getFullYear();
var m = now.getMonth() + 1;
var d = now.getDate();
var calc = document.getElementById("average");

m = m < 10 ? "0" + m : m;
d = d < 10 ? "0" + d : d;

document.querySelector("input[type=date]").value = y + "-" + m + "-" + d;

calc = function(){
var min = document.getElementById("minutes").value;
var sec = document.getElementById("seconds").value;
var miles = document.getElementById("distance").value;
var hours = (min/60)+(sec/3600);
var average = miles/hours;
 
document.getElementById('average').value = (Math.round(average * 100) / 100).toFixed(2);
}