Code:
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Average Calculator</title>
<style>
#number{display:inline-block;text-align:right;}
input{text-align:right;width:50%;}
#nums{text-align:left;list-style-type:none;border-top:2px black solid;}
#count{margin-left:-1em}
</style>
<script>
function sumAverage(){
var sum= document.getElementById('sum'),
nums=document.getElementById('nums'),
tot= document.getElementById('total'),
avg= document.getElementById('average'),
L=nums.getElementsByTagName('li').length,
val=parseInt(sum.value,10)|| 0,
total=(parseInt(tot.value,10) || 0)+val,
next= document.createElement('li');
next.appendChild(document.createTextNode(val));
nums.appendChild(next);
tot.value=total;
avg.value= Math.round((total/L)*1e12)/1e12;
sum.value='';
setTimeout(function(){sum.focus()},100);
document.getElementById('count').innerHTML=L+' numbers:';
}
onload=function(){
document.getElementById('sum').focus();
}
</script>
</head>
<body>
<h1>Enter any number of numbers:</h1>
<div id= "number">
<p>Number: <input id="sum" value="" onchange="sumAverage()"> <button > Add</button><label></p>
<p>Total: <input id= "total" readOnly></p>
<p>Average: <input id= "average" readOnly></p>
<div>
<ul id="nums">
<li><span id="count">Numbers: </span></li>
</ul>
</div>
</div>
</body>
</html>