Bitcoin Price Ticker
HTML
<h1>Bitcoin Price Ticker</h1>
<div class="ticker">
<input type="number" id="btc" value="1" step="any" />
<input type="text" id="coin" value="BTC" />
<input type="text" id="currency" value="USD" />
<p id="price"></p>
<p id="error" class="error">
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Pompiere);
body {
font-family: 'Pompiere', cursive;
background-color: #E5E5E8;
margin: 1em;
}
input,
p {
display: inline;
font-size: 2em;
margin-right: 1em;
}
input {
border-style: none;
width: 3em;
text-align: center;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.ticker {
padding: 2em;
margin: 1em;
}
.error {
color: #e05454;
display: block;
}
JavaScript
getPrice();
setInterval(function() {
getPrice();
}, 2000);
function getPrice() {
var coin = $('#coin').val();
var currency = $('#currency').val().toUpperCase();
$.get(`https://cors-anywhere.herokuapp.com/https://www.cryptonator.com/api/ticker/${coin}-${currency}`)
.done(function(data) {
if (data.error) {
$('#price').css('display', 'none');
$('#error').css('display', 'block');
$('#error').text('Error ! sure you entered a valid currency code');
} else {
if ($('#btc').val() == 1) {
$('#price').text(`${round(data.ticker.price,2)} ${currency}`);
} else {
$('#price').text(`${round(data.ticker.price * $('#btc').val(),2)} ${currency}`);
}
$('#error').css('display', 'none');
$('#price').css('display', 'inline');
}
});
}
//From stackoverflow
function round(value, exp) {
if (typeof exp === 'undefined' || +exp === 0)
return Math.round(value);
value = +value;
exp = +exp;
if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0))
return NaN;
// Shift
value = value.toString().split('e');
value = Math.round(+(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)));
// Shift back
value = value.toString().split('e');
return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));
}