HBOM Price Ticker Working Again

Fellow Servants of Bitcoin,

While doing a little busy work on something else, I took a gander through the blockr.io and found they offered a nicely featured api.  Last time I wrote about it, I was over the moon enough, because let’s face it, do you want a competitors ticker (though to their credit, I like what CoinGeko has going on.)

Looking through constraints, they’ve mentioned to contact if doing HEAVY usage.  Clicking the contact us link points to Coinbase.  Interesting enough.  If Coinbase owns this blockr.io site, then I presume it’s likely okay to plug into my puny, 2k impressions per month, honeybadgerofmoney website here, no problem – giving an estimate of about 10 minutes per user on my site, by tweaking my code to only ping their api once every 10 seconds, I can estimate that each visit will cost 60 api calls, that means we’re going to cost this service approximately 120K api requests per month (based on 2000 users hanging around for 10 minutes on the site [if I get more than 100,000 users on taking a gander and maxing out my allotted free-tiered usage, then I’ll definitely work with them to get provisioned properly]).

Basically a few months back, I hit a wall when using coinmarketcap’s api limit so I decided to shelve the ticker temporarily.  I’ve mentioned in my sidebar that I would get around to it, so as promised, THERE IT IS 🙂

If  you want a copy of this code for your own site, feel free to use it!:

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<div id="tickerBox"></div>
    <script>
    var tickerBox = document.getElementById('tickerBox');

    var divTicker = document.createElement('div');
    divTicker.setAttribute("id", "ticker");
    tickerBox.appendChild(divTicker);
    divTicker.style.fontSize="3rem";
    divTicker.style.fontWeight="bold";
    divTicker.style.letterSpacing="2px";

    var checked = document.createElement('div');
    checked.setAttribute("id", "checked");
    tickerBox.appendChild(checked);

    var dataLast;

    function priceData (){
            var ticker = document.getElementById('ticker');
            var lastUpdated = document.getElementById('checked');
            var datetime = "Last Updated:" + new Date().toLocaleTimeString();
            
//https://api.coinmarketcap.com/v1/ticker/ethereum/
//https://api.coinmarketcap.com/v1/ticker/the-dao/
//for coinmarket cap uncomment the line below:
//https://btc.blockr.io/api/v1/exchangerate/current/

    $.get(
        "http://btc.blockr.io/api/v1/coin/info",
        function(data) {
            
        //bitcoinaverage returns a single value...coinmarket cap
        //returns the entire JSON object...this reduces that object to USD
        data = data["data"]["markets"]["coinbase"]["value"]  

         if (data > dataLast) {
            divTicker.style.color = "green";
         } else {
            divTicker.style.color = "red";
         }
         ticker.innerHTML = "$" + data+" <span id='super'>USD</span>";
         superscript = document.getElementById('super');
         superscript.style.fontSize="xx-small";
         superscript.style.verticalAlign="top";
         superscript.style.letterSpacing="0px";
         checked.innerHTML = datetime;
         dataLast = data;
        }
    );


          $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
        {
            tags: "Mellivora capensis",
            tagmode: "all",
            format: "json"
        },
        function(data) {
            var rnd = Math.floor(Math.random() * data.items.length);

            var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");

            $('#tickerBox').css('background-image', "url('" + image_src + "')");

        });


    }
    priceData();
    setInterval(priceData, 10000);
    checked.style.paddingLeft="10px";
    checked.style.color="white";
    checked.style.textShadow="2px 2px 1px black";
    ticker.style.textShadow="1px 2px 2px black";
    ticker.style.paddingLeft="10px";
    tickerBox.style.backgroundSize="cover";
    tickerBox.style.width="20rem";
    tickerBox.style.height="14rem";
    ticker.style.paddingTop="1rem";
    ticker.style.paddingBottom=".5rem";    
    tickerBox.style.borderRadius="5px";
    tickerBox.style.backgroundPosition="40px 0px";
    </script>

How the thing works:

We use jQuery right at the top there, so that we have the ability to run those fancy $get and $getJSON requests (so we’re not re-inventing the wheel with more code).  Also we are going to put in a placeholder div to attach our data, markup, and css on.  From there, we attach style attributes on the main ticker data, grab the data from our price provider via their api. To snazz things up, and because I LOVE honeybadgers, we use the flickr api to grab pictures of honeybadgers and load those image urls in to fill in our background.

I’m using this through the widget api on wordpress and would love to know if there is a way to cut out jQuery and have it referencing the internal copy of jQuery that is powering my wordpress installation. If you’re reading this (because it’s important to me, but not so much that I can continue to procrastinate from real work), and you know how I can use this ticker without embedding its own copy of jQuery (using the native wordpress embed of jQuery) do leave a comment would ya.