He's a little application I wrote today. It's a price ticker you can use on your website. You can see it live at https://steemian.info/ticker. Maybe I'll embed it on all the pages later. It would be nice to have something similar added in Condenser (Steemit's web interface).
I was writing it at first in PHP, but then I figured why not make it non-PHP, for the fun of it.
The code relies on API calls to Coinmarketcap and Steemit's new API node. The prices update every 60 seconds; you can change that by editing the setInterval() function.
Cryptocurrency prices are queries from Coinmarketcap. The SBD price feed and the MVest value are taken and calculated from Steemit. Enjoy!
Specifications: HTML5, JQuery, CSS.
Code available on https://gist.github.com/Jolly-Pirate/ca659a42329dcb8783bb89b558dd87d8
<!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>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 ? '\u2191' + Math.abs(btcchange) + '%' : '\u2193' + Math.abs(btcchange) + '%'));
$("#sbd").html("$" + sbd.replace(/\d(?=(?:\d{3})+\.)/g, '$&,') + " " + (sbdchange > 0 ? '\u2191' + Math.abs(sbdchange) + '%' : '\u2193' + Math.abs(sbdchange) + '%'));
$("#steem").html("$" + steem.replace(/\d(?=(?:\d{3})+\.)/g, '$&,') + " " + (steemchange > 0 ? '\u2191' + Math.abs(steemchange) + '%' : '\u2193' + Math.abs(steemchange) + '%'));
$("#steem_per_mvests").html(steem_per_mvests + " STEEM");
$("#feed_price").html(feed_price);
}
getPrices(); // get prices
setInterval(function () {
getPrices();
$(".blink").fadeOut("slow").fadeIn();
}, 60000); // then get prices every 60 seconds
</script>
</div>
</div>
</div>
</body>
</html>
Available & Reliable. I am your Witness. I want to represent You.
🗳 If you like what I do, consider voting for me 🗳
If you never voted before, I wrote a detailed guide about Voting for Witnesses.
Go to https://steemit.com/~witnesses. My name is listed in the Top 50. Click the upvote symbol.
Alternatively,
with cli_wallet : vote_for_witness "YOURACCOUNT" "drakos" true true
with steem-python: steempy approvewitness drakos --account YOURACCOUNT