Assignment 3 Task 1

user_1373341
html
10 months ago
1.9 kB
Indexable
Never
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Animation</title>
</head>
<body>
	Initial number: <input type="text" id="inNum"> <br/> <br/>
	Increase by: <input type="text" id="increaseBy"> <br/> <br/>
	Time interval (every): <input type="text" id="timeInterval"> (ms) <br/> <br/>
	<button onclick="initial(); startAnime()">Start</button>
	<button onclick="stopAnime()">Stop</button> <br/> <br/>
	<span id="display" style="font-size: 50px;"></span>

	<script type="text/javascript">
		var inNum = document.getElementById("inNum");
		var increaseBy = document.getElementById("increaseBy");
		var timeInterval = document.getElementById("timeInterval");
		var display = document.getElementById("display");

		var colorList = ["yellow", "pink", "orange", "blue"];
		var anime; 
		var counter;
		let flag = false;

		function startAnime() {
			if (flag) 
				return;

			anime = setInterval(numCounter, timeInterval.value);
			console.log("Time interval -> " + timeInterval.value);

			flag = true;
		}

		function stopAnime() {
			flag = false;

			clearInterval(anime);
			console.log("Stopped");

			inNum.value = "";
			increaseBy.value = "";
			timeInterval.value = "";
		}

		function initial() {
			display.innerText = "";
			display.style.color = "green";

			counter = parseInt(inNum.value);
    		display.innerText = counter;
			console.log("Current value -> " + counter);

			if (!flag) 
				return;
		}

		function numCounter() {
    		counter += parseInt(increaseBy.value);
        	display.innerText = counter;
        	console.log("Updated value -> " + counter);

			var index = Math.floor(Math.random() * colorList.length);
			console.log("Index -> " + index);
			console.log("Color -> " + colorList[index]);

			display.style.color = colorList[index];
		}
	</script>
</body>
</html>