Assignment 4 Task 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>
	<p>
		product: 
		<input type="text" id="prod">
	</p>

	<p>
		price $: 
		<input type="text" id="price">
	</p>

	<p>
		discount %: 
		<input type="text" id="disc">
	</p>
	
	<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 = parseInt(document.getElementById("price").value);
			var disc = parseInt(document.getElementById("disc").value);
			var discAmount = price * (disc/100);
			var afterDisc = price - discAmount;

			var prodInfo = prod + " - price $" + price + ", after discount of " + disc + "%, the price is $" + afterDisc;
			console.log(prodInfo);

			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.toFixed(2);
			console.log(overallInfo);

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