JSFiddle - React, Tailwind, and code Playground

by Mrt Ja

HTML

<div id= loader>LOADING...</div>
<div id="wrap">
<div id="statusTicker"></div>
<div id="rowContainer"></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
#wrap {display: none;}
body {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 15px;
}
a {
  text-decoration: none;
  color: #000;
}
.currency, .balance {
  font-weight: 500;
}
.pubKey, .symbol {
  font-size: 12px;
}
.plus {color: #69A53E;}
.minus {color: #E83929;}
.plusBG {background: #EEF6E9;}
.minusBG {background: #FCE5E3;}
#rowContainer, #statusTicker {
  width: 600px;
  max-width: 100%;
}
#statusTicker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
}
p {
  margin: 0;
}
#profit {
  font-size: 36px;
}
#balance {
  font-size: 24px;  
}
#profit, #percent {
  font-weight: 500;
}
#deposit {
  font-weight: 300;
}
.currencyContainer {
  margin-top: 15px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 5px 15px 5px 15px;
}
.row:first-child, .row:last-child {
  height: 50px;
  font-weight: 400;
  background: #f0f0f0;
}
.row:nth-child(2), .row:nth-child(3), .row:nth-child(4), .row:nth-child(5) {
  font-weight: 300;
  border-bottom: 1px solid #f0f0f0;
}

JavaScript

//----------------------------------------------------------------------------------------------------------------
//IMPORTED VAR
var arrCurrency = ["bitcoin", "ethereum", "bitcoin-cash", "ripple", "litecoin", "dash", "iota", "dogecoin"]
var arrAmount = [0.000, 0.105, 0.000, 49.068, 0.126, 0.017, 5.994, 1677.707]
var getDeposit = 101.00;
var arrPubKey = ["1GyFFf6FKDMgNztXA1uGM7wjQQpU1kpFYZ", "0x6c2Bc482d01769ED3Cdb7Ec7B3f1DD551481E86e", "16fXwAwsrXKjQ7Uu3DBgcmjE1KuLEpgSqL", "rJ6UzZzAArE4G1MqxGQnkd2budMHTfqKFg", "LMU7PmDVt5XwcNF4oKHP88kFberg1VbyTm", "Xqv3EMcWBowaPxwEMi1X5APCmzHBQsQugT", "Binance.com", "DKx98iy3UjdCrBcaLBDcdj3HqjyGXy3D23"]
//----------------------------------------------------------------------------------------------------------------
//JS VAR
var statusTicker = document.getElementById("statusTicker");
var rowContainer = document.getElementById("rowContainer");
var arrJSON = [];
var arrBalance = []
//----------------------------------------------------------------------------------------------------------------
//GET JSON FUNCTION
function getJSON(yourUrl){
	var Httpreq = new XMLHttpRequest();
	Httpreq.open("GET",url,false);
	Httpreq.send(null);
	return Httpreq.responseText;
}
//----------------------------------------------------------------------------------------------------------------
//PUSH JSONS TO ARRAY
for (var i = 0; i < arrCurrency.length; i++) {
  var url = 'https://api.coinmarketcap.com/v1/ticker/'+arrCurrency[i]+'/?convert=EUR';
  var json_obj = JSON.parse(getJSON(url));
  arrJSON.push(json_obj);
}
//----------------------------------------------------------------------------------------------------------------
//CREATE HTML
for (var i = 0; i < arrCurrency.length; i++) {

	var getName = arrJSON[i][0]["name"];
  var symbol = arrJSON[i][0]["symbol"];
  var getEuro = arrJSON[i][0]["price_eur"];
  var getChange1h = arrJSON[i][0]["percent_change_1h"];
  var getChange24h = arrJSON[i][0]["percent_change_24h"];
  var getChange7d =...