Question 3

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Question 3</title>
</head>
<body>
	<h1>Discount calculator</h1><br/>
	product: <input type="text" id="prod"><br/><br/>
	price $: <input type="text" id="price"><br/><br/>
	discount %: <input type="text" id="disc"><br/><br/>
	
	<button onclick="calc()">calculate</button><br/>
	<ol id="list"></ol>
	<span id="display"></span>

	<script type="text/javascript">
		var prodCount = 0;
		var overallDisc = 0;

		function calc() {
			var prod = document.getElementById("prod").value;
			var price = document.getElementById("price").value;
			var disc = document.getElementById("disc").value;
			var discAmount = parseInt(price) * (disc/100);
			var afterDisc = parseInt(price) - discAmount;

			var prodInfo = prod + " - price $" + price + ", after discount of " + disc + "%, the price is $" + afterDisc;

			var li = document.createElement("li");
			var discText = document.createTextNode(prodInfo);
			li.appendChild(discText);

			var list = document.getElementById("list");
			list.appendChild(li);

			prodCount += 1;
			overallDisc += discAmount;

			var overallInfo = "Overall discount for " + prodCount + " products is $" + overallDisc;

			var display = document.getElementById("display");
			display.innerHTML = overallInfo;
		}
	</script>
</body>
</html>
Editor is loading...