<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<p>1 STAR <input type="number" name="one" id="one" value='81'></p>
<p>2 STARS <input type="number" name="two" id="two" value='87'></p>
<p>3 STARS <input type="number" name="three" id="three" value='43'></p>
<p>4 STARS <input type="number" name="four" id="four" value='55'></p>
<p>5 STARS <input type="number" name="five" id="five" value='34'></p>
<button onclick="Calculate()">Calculate average</button>
<button onclick="Clear()">Reset</button>
<h2 id="resultTitle" style="display:none">Average Stars: <span id="avg" style="font-weight:normal"></span></h2>
<p id="roundp" style="display:none">Rounded Average = <span id="round" style="color:goldenrod;"></span></p>
</body>
</html>
function Calculate(){
var oneStar = +document.getElementById('one').value;
var twoStar = +document.getElementById('two').value;
var threeStar = +document.getElementById('three').value;
var fourStar = +document.getElementById('four').value;
var fiveStar = +document.getElementById('five').value;
var oneTotal = oneStar * 1;
var twoTotal = twoStar * 2;
var threeTotal = threeStar *3
var fourTotal = fourStar * 4;
var fiveTotal = fiveStar * 5;
var totalClicks = (oneStar + twoStar + threeStar + fourStar + fiveStar);
var totalStars = (oneTotal + twoTotal + threeTotal + fourTotal + fiveTotal);
var avgStars = (totalStars/totalClicks);
var stars = '★';
document.getElementById('resultTitle').style.display = 'block';
document.getElementById('roundp').style.display = 'block';
document.getElementById('avg').innerHTML = avgStars;
for(var i = 0 ;i<(Math.round(avgStars))-1;i++)
{
stars=stars+' ★';
}
document.getElementById('round').innerHTML = stars;
}
function Clear(){
document.getElementById('one').value=81;
document.getElementById('two').value=87;
document.getElementById('three').value=43;
document.getElementById('four').value=55;
document.getElementById('five').value=34;
document.getElementById('avg').innerHTML = "";
document.getElementById('round').innerHTML = "";
document.getElementById('resultTitle').style.display = 'none';
document.getElementById('roundp').style.display = 'none';
}
/* Styles go here */