wesleymoliveira/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Quick start: Get Balance</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"  integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
      body {
        margin: 60px;
      }
      .container {
        width: auto;
        max-width: 680px;
        padding: 20px 15px;
      }
      .output {
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <main role="main" class="container">
    <h1 style="font-family: sans-serif; font-weight: 500;">Display an account balance</h1>
      <p style="font-family: sans-serif;">Enter a development account address, then click <b>Get Balance</b>.</p>

      <input type="text" size="58" id="account_address"/>
      <input type="button" onclick="GetBalance()" value="Get Balance">
      <p class="output">Balance: <span id="polkadot-balance">Not Connected</span></p>
    </main>

    <script src="https://unpkg.com/@polkadot/util/bundle-polkadot-util.js"></script>
    <script src="https://unpkg.com/@polkadot/util-crypto/bundle-polkadot-util-crypto.js"></script>
    <script src="https://unpkg.com/@polkadot/types/bundle-polkadot-types.js"></script>
    <script src="https://unpkg.com/@polkadot/api/bundle-polkadot-api.js"></script>

    <script>
      async function GetBalance() {
        const ADDR = '5Gb6Zfe8K8NSKrkFLCgqs8LUdk7wKweXM5pN296jVqDpdziR';

        const { WsProvider, ApiPromise } = polkadotApi;
        const wsProvider = new WsProvider('ws://127.0.0.1:9944');
        const polkadot = await ApiPromise.create({ provider: wsProvider });

        let polkadotBalance = document.getElementById("polkadot-balance");
        const x = document.getElementById("account_address").value;
        const { data: balance } = await polkadot.query.system.account(x);

        polkadotBalance.innerText = balance.free;
      }
    </script>
  </body>
  </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Quick start: Get Balance</title>
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
	<style>
	body {
	margin: 60px;
	}
	.container {
	width: auto;
	max-width: 680px;
	padding: 20px 15px;
	}
	.output {
	margin-top: 20px;
	}
	</style>
	</head>

	<body>
	<main role="main" class="container">
	<h1 style="font-family: sans-serif; font-weight: 500;">Display an account balance</h1>
	<p style="font-family: sans-serif;">Enter a development account address, then click <b>Get Balance</b>.</p>

	<input type="text" size="58" id="account_address"/>
	<input type="button" onclick="GetBalance()" value="Get Balance">
	<p class="output">Balance: <span id="polkadot-balance">Not Connected</span></p>
	</main>

	<script src="https://unpkg.com/@polkadot/util/bundle-polkadot-util.js"></script>
	<script src="https://unpkg.com/@polkadot/util-crypto/bundle-polkadot-util-crypto.js"></script>
	<script src="https://unpkg.com/@polkadot/types/bundle-polkadot-types.js"></script>
	<script src="https://unpkg.com/@polkadot/api/bundle-polkadot-api.js"></script>

	<script>
	async function GetBalance() {
	const ADDR = '5Gb6Zfe8K8NSKrkFLCgqs8LUdk7wKweXM5pN296jVqDpdziR';

	const { WsProvider, ApiPromise } = polkadotApi;
	const wsProvider = new WsProvider('ws://127.0.0.1:9944');
	const polkadot = await ApiPromise.create({ provider: wsProvider });

	let polkadotBalance = document.getElementById("polkadot-balance");
	const x = document.getElementById("account_address").value;
	const { data: balance } = await polkadot.query.system.account(x);

	polkadotBalance.innerText = balance.free;
	}
	</script>
	</body>
	</html>