JSFiddle - React, Tailwind, and code Playground

by majesticcX

HTML

Difficulty: <p id="difficulty"></p><br>
Blockreward: <p id="blockreward"></p><br>
Total BTC: <p id="totalbtc"></p> <br>
BTC Price (Dollar):<p id="btcprice"></p><br>
<main>
	<form id="myForm">
		<legend>Calculator</legend>
		<label for="hashrate">Hashrate</label>
      <input type="number" min="0" id="hashcalc" value="0" step="1"> Th/s
		<label for="powerconsumption">Power Consumption</label>
      <input type="number" min="0" id="powercalc" value="0" step="0.01"> kW
		<label for="powercosts">Power Costs</label>
      <input type="number" min="0" id="powercostcalc" value="0.058"> USD/kW/h
		<label for="exchange">Exchange Rate</label>
      <input type="number" min="0" id="exchangecalc" value="9000"> $
    <p><span> Revenue:</span><output id="betrag" for="stunden satz mwst">0</output> $</p>
		<p><span> - Energy Costs:</span><output id="endenergy">0</output> $</p>
	</form>
</main>

CSS

form {
	border: thin solid #666;
	width: 30em;
	padding: 1em;
}

legend {
	font-size: 1.5em;
	margin-bottom: 1em;
}

input[type=number] {
	text-align: right;
}

label,
span,
output {
	display: inline-block;
	width: 12em;
}

form p {
	font-weight: bold;
}

output {
	width: 8em;
	text-align: right;
}

JavaScript

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/q/getdifficulty');
  let data = await res.json();
 
  document.getElementById("difficulty").innerText = data;
};

setInterval(apiCall, 10000);

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/q/bcperblock');
  let data = await res.json();
 
  document.getElementById("blockreward").innerText = data;
};

setInterval(apiCall, 10000);

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/q/totalbc');
  let data = await res.json();
 
  document.getElementById("totalbtc").innerText = data;
};

setInterval(apiCall, 10000);

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.text();
 
  document.getElementById("btcprice").innerText = data;
};

setInterval(apiCall, 10000);


document.getElementById("myForm").addEventListener("input", rechne);
	
function rechne() {
var hash = document.getElementById('hashcalc'),
    pcons  = document.getElementById('powercalc'),
    pcost  = document.getElementById('powercostcalc'),
    excha  = document.getElementById('exchangecalc');
var summe  = pcons.valueAsNumber * pcost.valueAsNumber * 24;
    
summe = summe.toFixed(2);
document.getElementById('endenergy').value = summe;
}