Website Tools 🛠 : Price Ticker

in #programming7 years ago (edited)

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!

Website Tools - Price Ticker.png

(The percentage is the 24h change)



Specifications: HTML5, JQuery, CSS.

Code available on

<!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();
            }, 60000); // then get prices every 60 seconds
          </script>
        </div>
      </div>
    </div>
  </body>
</html>

Follow

Available & Reliable. I am your Witness. I want to represent You.

🗳 If you like what I do, consider voting for me 🗳

Vote

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

Sort:  

That's a great effort. Keep it up

thank yhuvery much sir for yhur services

This is sweet! Will use this and add my local currency. Thanks! HOOT!

You just got a HOOT!.jpg

Cool. Just follow the code, it's pretty easy to add your favorite currencies. Copy/paste here and there, done 🤓

Thanks for sharing, would like to build my own price checker too.

Nice work @drakos!
Yes ajax definitely makes it easier to embed anywhere, and coinmarket guys have a solid API.

The ajax call to steemit's api was a pain though. I was stuck on it, wasn't working with getJSON. Then I redid it with good old ajax and setting the type to POST (after recommendation by @netuoso), but didn't work neither. I tinkered with it until I discovered it needed JSON.stringify! The rest is history.

I hear you, that's the fun with programming :D
Yet it is highly rewarding once you finally get things working !