JSFiddle - React, Tailwind, and code Playground

by majesticcX

HTML

<main>
            <div id="curprice">
            <!-- USD -->
            <div class="btcspal">
                <p class="curtext">USD</p>
                <p id="btcusd"></p>
            </div>
            <!-- EUR -->
            <div class="btcspal">
                <p class="curtext">EUR</p>
                <p id="btceur"></p>
            </div>
            <!-- GBP -->
            <div class="btcspal">
                <p class="curtext">GBP</p>
                <p id="btcgbp"></p>
            </div>
            <!-- CNY -->
            <div class="btcspal">
                <p class="curtext">CNY</p>
                <p id="btccny"></p>
            </div>
            <!-- RUB -->
            <div class="btcspal">
                <p class="curtext">RUB</p>
                <p id="btcrub"></p> 
            </div>
        </div>
        
        <h2>Calculator</h2>
            <form id="meateccalculator">
		      <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="powercosts">Fee</label>
                <input type="number" min="0" id="feecalc" value="15"> %    
		      <label for="fee">Exchange</label>
                <input type="number" min="0" id="exchangecalc" value="0"> $
              <label class="labeldiff">Difficulty:<p id="difficulty"></p></label>
              <label class="labeldiff">Block Reward:<p id="blockreward"></p></label>
              <label class="labeldiff">Current Block:<p id="currentblock"></p></label>

              <div id="revenuecontainer">
                <div class="day">
                    <h2>per Day</h2><br>
                    <p><span>...

CSS

@charset "UTF-8";

* {
    margin:0;
    padding:0;

}

header {
    width: 100vw;
    height: 6vw;
    background: yellow;
}

main {
    width: 100vw;
    height: auto;
}

main h2 {
    text-align: center;
}

#curprice {
    padding: 1vw 0vw;
    display: flex;
    justify-content: space-around;
}

.labeldiff {
    width: 20vw;
    display: flex;
}

#difficulty {
    font-weight: 100;
    margin-left: 8.2vw;
}

#blockreward {
    font-weight: 100;
    margin-left: 6.7vw;
}

#currentblock {
    font-weight: 100;
    margin-left: 6.7vw;
}

.curtext {
    width: 6vw;
    text-align: center;
    color: #11abba;
    font-size: 2vw;
}

#btcusd, #btceur, #btcgbp, #btccny, #btcrub {
    width: 6vw;
    text-align: center;
    font-size: 1vw;
    color: #11abba;
}

#btcusd::after {
    content: " $";
}

#btceur::after {
    content: " €";
}

#btcgbp::after {
    content: " £";
}

#btccny::after {
    content: " ¥";
}

#btcrub::after {
    content: " ₽";
}

#meateccalculator {
    margin: 2vw auto;
    padding: 1vw;
	width: 100vw;
}

input[type=number] {
    width: 7vw;
	text-align: right;
    border: none;
}

form label {
    display: inline-block;
    margin-left:38vw;
    width: 8vw;
    padding-bottom: 0.5vw;
}

#revenuecontainer {
    display: flex;
    justify-content: space-around;
    margin-top: 4vw;
}

span {
    display: inline-block;
    width: 8vw;
}

.day, .month, .year {
    width: 23vw;
}

form output {
	display: inline-block;
	width: 10vw;
}

form p {
	font-weight: bold;
}

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

JavaScript

/** Cur **/
apiCall = async () => {   
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.json();
  let price = data.USD['15m'];
  document.getElementById("btcusd").innerText = price;
  document.getElementById("exchangecalc").value = price;
};

setInterval(apiCall, 1000);

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.json();
  let price = data.EUR['15m'];
  document.getElementById("btceur").innerText = price;
};

setInterval(apiCall, 1000);

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.json();
  let price = data.GBP['15m'];
  document.getElementById("btcgbp").innerText = price;
};

setInterval(apiCall, 1000);

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.json();
  let price = data.CNY['15m'];
  document.getElementById("btccny").innerText = price;
};

setInterval(apiCall, 1000);

apiCall = async () => {   
  let res = await fetch('https://blockchain.info/ticker');
  let data = await res.json();
  let price = data.RUB['15m'];
  document.getElementById("btcrub").innerText = price;
};

setInterval(apiCall, 1000);

/** END **/

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

setInterval(apiCall, 1000);

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

setInterval(apiCall, 1000);

/** CURRENT BLOCK CALL **/
apiCall = async () => {   
  let res = await fetch('https://blockchain.info/q/getblockcount');
  let data = await res.json();
 
  document.getElementById("currentblock").innerText = data;
};

setInterval(apiCall,...