Assignment 2 Task 1

<!DOCTYPE html>
<html>
<head>
	<title>A2-Task1</title>
</head>
<body onload="ranNum()">
	<button onclick="addFive()">Add 5</button>
	<button onclick="changeColor()">Change colour</button>
	<button onclick="addEmo()">Add emoji</button>
	<button onclick="reset()">Reset</button><br><br>
	<span id="display"></span>

	<script type="text/javascript">
		var disSpan = document.getElementById("display");
		var randomNumber = Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);
		var emoIndex = 0;
		console.log("Loaded number -> "+randomNumber);

		function ranNum() {
			disSpan.innerHTML = randomNumber;
			disSpan.style.color = "red";
		}

		function addFive() {
			var span = disSpan.innerHTML;
			var numb = span.slice(0, 4);
			var emojis = span.slice(4, span.length);
			var updatedNumber = Number(numb) + 5;
			console.log("Updated number -> " + updatedNumber);

			disSpan.innerHTML = updatedNumber + emojis;
		}

		function changeColor() {
			var colorList = ["yellow", "green", "blue", "red"];
			var index = Math.floor(Math.random() * 4);
			console.log("Index -> " + index + " and color -> " + colorList[index]);

			disSpan.style.color = colorList[index];
		}

		function addEmo() {
			var emo = ["&#9917;", "&#127942;"];

			disSpan.innerHTML = disSpan.innerHTML + emo[emoIndex % 2];
			console.log(emo[emoIndex % 2]);
			emoIndex++;
		}

		function reset() {
			var newRandomNumber = Math.floor(Math.random() * (9999 - 1000 + 1) + 1000);
			console.log("New random number -> " + newRandomNumber);

			disSpan.innerHTML = "";
			disSpan.innerHTML = newRandomNumber;
		}
	</script>
</body>
</html>
Editor is loading...