First try at Scatter and HTML


<!DOCTYPE html>
<html>
<head>
	<script>
		document.addEventListener("scatterLoaded", scatterExtension => { 
			const scatter = window.scatter; 
		})
		//Creating a collection of blockchain network options on page load
		const Blockchains = {
		EOS: {
			blockchain: "eos",
			host: "localhost",
			port: 1234,
			protocol: "https",
			chainId: "abcdefg"
			},
		Ethereum: {
			blockchain: "eth",
			host: "localhost",
			port: 1234,
			protocol: "https",
			chainId: "1"
			},
		ATestNet: {
			blockchain: "cmt",
			host: "localhost",
			port: 1234,
			protocol: "https",
			chainId: "12345"
			}
		};
		//Function for a user to select the EOS blockchain network 
		function chooseEOSBlockchain() {
			network = Blockchains.EOS;
			console.log(network);
		}
		//Function for a user to select the ETH blockchain network
		function chooseEthereumBlockchain() {
			network = Blockchains.Ethereum;
			console.log(network);
		}
		//Function for a user to select a new TEST blockchain network
		function chooseSuggestedBlockchain() {
			scatter.suggestNetwork(Blockchains.ATestNet).then(added => {
				//I am not 100% sure what needs to happen from this point, also, what is the safest/best way to make the event listener "scatterLoaded" or the const "scatter" available inside this function? Any and all suggestions welcome.
			});
		}

	</script>
</head>
<body>
	<h1>Heading one</h1>
	<p id="demo">Hello World!</p>
	<button type="button" id="ethButton" onclick='chooseEthereumBlockchain()'>Choose Ethereum</button>
	<button type="button" id="eosButton" onclick='chooseEOSBlockchain()'>Choose EOS</button>
	//The issue with this HTML is "Uncaught ReferenceError: scatter is not defined"
	<button type="button" id="eosButton" onclick='chooseSuggestedBlockchain()'>Suggest a blockchain network for me to use please</button>
</body>
</html>
tpmccallum/first_try_at_scatter_and_html.md
