JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<!DOCTYPE HTML>
<HTML>
<head>
	<title>Ethereum Block Number</title>
</head>
<body>

<h1>Ethereum Block Number</h1>

<p>The current block number is: <span id="blockNumber"></span></p>

<p>Upcoming Block Numbers:</p>

<ul id="blockList"></ul>

<script>
	// make an AJAX request to get the current block number
	var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			// parse the response
			response = JSON.parse(this.responseText);
			// convert the hex block number to a decimal number
			blockNumber = parseInt(response.result, 16);
			// set the block number element
			document.getElementById("blockNumber").innerHTML = blockNumber;
			
			// update the block list
			updateBlockList(blockNumber);
		}
	};
	xhttp.open("GET", "http://api.etherscan.io/api?module=proxy&action=eth_blockNumber", true);
	xhttp.send();
	
	// function to update the upcoming block numbers
	function updateBlockList(blockNumber) {
		// create the block list
		var blockList = document.getElementById("blockList");
		// clear existing list
		blockList.innerHTML = "";
		// add next 10 blocks
		for (var i=1; i<=10; i++) {
			blockNumber += 1;
			blockList.innerHTML += "<li>" + blockNumber + "</li>";
		}
	}
</script>

</body>
</html>