Skip to content

Instantly share code, notes, and snippets.

@Jolly-Pirate

Jolly-Pirate/price_ticker.html

Last active November 13, 2017 02:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jolly-Pirate/ca659a42329dcb8783bb89b558dd87d8 to your computer and use it in GitHub Desktop.
Save Jolly-Pirate/ca659a42329dcb8783bb89b558dd87d8 to your computer and use it in GitHub Desktop.
Download ZIP
Price Ticker for Cryptocurrencies and STEEM
Raw
price_ticker.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
tr td {text-align: right;}
table {padding: 5px;}
table.striped tr:nth-child(even){background-color: #f2f2f2;}
thead {border-bottom: 2px solid black; font-weight: bold;}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading"><h1>Price Ticker</h1><h5>Updates every minute</h5></div>
<div class="panel-body">
<table class="striped">
<thead>
<tr>
<td width="120">Currency</td>
<td width="170">Price</td>
</tr>
</thead>
<tbody>
<tr>
<td >Steem</td>
<td class="blink" id="steem"></td>
</tr>
<tr>
<td>Steem Dollar</td>
<td class="blink" id="sbd"></td>
</tr>
<tr style="border-bottom: 1px solid grey;">
<td>Bitcoin</td>
<td class="blink" id="btc"></td>
</tr>
<tr>
<td>1 STEEM</td>
<td class="blink" id="feed_price"></td>
</tr>
<tr>
<td>1 MVest</td>
<td class="blink" id="steem_per_mvests"></td>
</tr>
</tbody>
</table>
<script>
$.ajaxSetup({async: false}); // must set to synchronous to be able to set the global variables sbd, steem, etc...
function getPrices() {
url = 'https://api.coinmarketcap.com/v1/ticker/steem/?convert=USD';
$.getJSON(url, function (data) {
steem = parseFloat(data[0].price_usd).toFixed(2); // convert the string to number and round to 2 decimals
steemchange = parseFloat(data[0].percent_change_24h).toFixed(2);
});
url = 'https://api.coinmarketcap.com/v1/ticker/steem-dollars/?convert=USD';
$.getJSON(url, function (data) {
sbd = parseFloat(data[0].price_usd).toFixed(2);
sbdchange = parseFloat(data[0].percent_change_24h).toFixed(2);
});
url = 'https://api.coinmarketcap.com/v1/ticker/bitcoin/?convert=USD';
$.getJSON(url, function (data) {
btc = parseFloat(data[0].price_usd).toFixed(2);
btcchange = parseFloat(data[0].percent_change_24h).toFixed(2);
});
url = "https://api.steemit.com";
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: JSON.stringify({"id": "0", "jsonrpc": "2.0", "method": "get_state", "params": ["total_vesting_shares"]}),
success: function (response) {
if (response) {
total_vesting_shares = response.result.props.total_vesting_shares;
total_vesting_fund_steem = response.result.props.total_vesting_fund_steem;
feed_price = response.result.feed_price.base;
ret = total_vesting_shares.split(" ");
total_vesting_shares = ret[0];
ret = total_vesting_fund_steem.split(" ");
total_vesting_fund_steem = ret[0];
steem_per_mvests = (total_vesting_fund_steem / total_vesting_shares * 1000000).toFixed(3); // round to 3 decimals
}
}
});
$("#btc").html("$" + btc.replace(/\d(?=(?:\d{3})+\.)/g, '$&,') + " " + (btcchange > 0 ? '<i style="color:green;">\u2191' + Math.abs(btcchange) + '%</i>' : '<i style="color:red;">\u2193' + Math.abs(btcchange) + '%</i>'));
$("#sbd").html("$" + sbd.replace(/\d(?=(?:\d{3})+\.)/g, '$&,') + " " + (sbdchange > 0 ? '<i style="color:green;">\u2191' + Math.abs(sbdchange) + '%</i>' : '<i style="color:red;">\u2193' + Math.abs(sbdchange) + '%</i>'));
$("#steem").html("$" + steem.replace(/\d(?=(?:\d{3})+\.)/g, '$&,') + " " + (steemchange > 0 ? '<i style="color:green;">\u2191' + Math.abs(steemchange) + '%</i>' : '<i style="color:red;">\u2193' + Math.abs(steemchange) + '%</i>'));
$("#steem_per_mvests").html(steem_per_mvests + " STEEM");
$("#feed_price").html(feed_price);
}
getPrices(); // get prices
setInterval(function () {
getPrices();
$(".blink").fadeOut("slow").fadeIn(); // fade effect for fun
}, 60000); // then get prices every 60 seconds
</script>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment