joshua/Dash-price-widget
1
0
Fork 0
mirror of https://github.com/seigler/Dash-price-widget synced 2025-07-27 08:06:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use new coinmarket API

Browse source
This commit is contained in:
Joshua Seigler 2016-05-08 16:24:32 -04:00
parent c180d56f35
commit 8480bd6c59
2 changed files with 139 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1 +1,2 @@
/node_modules/ /node_modules/
/.brackets.json

235
index.html
View file

@ -15,114 +15,155 @@
<h1>Dash Price Widget</h1> <h1>Dash Price Widget</h1>
<style type="text/css">/* Micro reset so global styles don't interfere */ <style type="text/css">/* Micro reset so global styles don't interfere */
.dash-ticker, [data-dash-price-widget],
.dash-ticker *, [data-dash-price-widget] *,
.dash-ticker *:before, [data-dash-price-widget] *:before,
.dash-ticker *:after { [data-dash-price-widget] *:after {
box-sizing: inherit; box-sizing: inherit;
vertical-align: baseline; vertical-align: baseline;
font-weight: inherit; font-weight: inherit;
font-family: inherit; font-family: inherit;
font-style: inherit; font-style: inherit;
font-size: 100%; font-size: 100%;
border: 0 none; border: 0 none;
outline: 0; outline: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
} }
.dash-ticker { [data-dash-price-widget] {
display: block; display: block;
max-width: 20em; max-width: 18em;
margin: 0.5em auto; margin: 0.5em auto;
border-radius: 0.5em; border-radius: 0.5em;
background-color: #1D76BC; background-color: #1D76BC;
box-sizing: border-box; box-sizing: border-box;
color: white; color: white;
padding: 0.5em; padding: 0.5em;
font-family: serif; font-family: serif;
} }
.dash-ticker .dash-ticker--title { [data-dash-price-widget] .dash-ticker--title {
font-size: 2em; font-size: 3em;
float: left; float: left;
height: 1em; height: 1em;
width: 1em; width: 1em;
overflow: hidden; overflow: hidden;
text-indent: -999px; text-indent: -999px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjI2Ljc3N3B4IiBoZWlnaHQ9IjIyNi43NzdweCIgdmlld0JveD0iMCAwIDIyNi43NzcgMjI2Ljc3NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjI2Ljc3NyAyMjYuNzc3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTEzLjM4OCwwQzUwLjc2NiwwLDAsNTAuNzY2LDAsMTEzLjM4OGMwLDYyLjYyMyw1MC43NjYsMTEzLjM4OSwxMTMuMzg5LDExMy4zODkKCWM2Mi42MjMsMCwxMTMuMzg5LTUwLjc2NiwxMTMuMzg5LTExMy4zODlDMjI2Ljc3Nyw1MC43NjYsMTc2LjAxMSwwLDExMy4zODgsMHogTTU2LjU2MiwxMDQuODAyaDQ1LjI2NmwtNS4yMzgsMTcuMDI0SDUxLjMyNgoJTDU2LjU2MiwxMDQuODAyeiBNMTczLjgzLDk2Ljc3M2MtMS44MDEsNi41MDYtNy42NTYsMjYuMDIzLTEwLjA1OSwzMi45NDVjLTIuNCw2LjkyMi02LjgyOSwxMi43MzQtMTIuNTA2LDE2LjA1NwoJYy01LjY3NiwzLjMyMy03Ljc5Nyw0LjcxMi0xNS43MzEsNC43MTJINTQuMzAzbDUuNzIxLTE4LjU0Mmg3Ni4zOTVsMTEuNDE0LTM3LjEwOWgtNzUuNzlsNS43MjItMTguNTQxYzAsMCw4My42OTgsMCw4NC41NzcsMAoJYzMuODc1LDAsOC45OTYsMS43OTIsMTEuNDg4LDYuNjM5QzE3Ni4zMjEsODcuNzc1LDE3NS42MjksOTAuMjY3LDE3My44Myw5Ni43NzN6Ii8+Cjwvc3ZnPgo="); background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjI2Ljc3N3B4IiBoZWlnaHQ9IjIyNi43NzdweCIgdmlld0JveD0iMCAwIDIyNi43NzcgMjI2Ljc3NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjI2Ljc3NyAyMjYuNzc3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTEzLjM4OCwwQzUwLjc2NiwwLDAsNTAuNzY2LDAsMTEzLjM4OGMwLDYyLjYyMyw1MC43NjYsMTEzLjM4OSwxMTMuMzg5LDExMy4zODkKCWM2Mi42MjMsMCwxMTMuMzg5LTUwLjc2NiwxMTMuMzg5LTExMy4zODlDMjI2Ljc3Nyw1MC43NjYsMTc2LjAxMSwwLDExMy4zODgsMHogTTU2LjU2MiwxMDQuODAyaDQ1LjI2NmwtNS4yMzgsMTcuMDI0SDUxLjMyNgoJTDU2LjU2MiwxMDQuODAyeiBNMTczLjgzLDk2Ljc3M2MtMS44MDEsNi41MDYtNy42NTYsMjYuMDIzLTEwLjA1OSwzMi45NDVjLTIuNCw2LjkyMi02LjgyOSwxMi43MzQtMTIuNTA2LDE2LjA1NwoJYy01LjY3NiwzLjMyMy03Ljc5Nyw0LjcxMi0xNS43MzEsNC43MTJINTQuMzAzbDUuNzIxLTE4LjU0Mmg3Ni4zOTVsMTEuNDE0LTM3LjEwOWgtNzUuNzlsNS43MjItMTguNTQxYzAsMCw4My42OTgsMCw4NC41NzcsMAoJYzMuODc1LDAsOC45OTYsMS43OTIsMTEuNDg4LDYuNjM5QzE3Ni4zMjEsODcuNzc1LDE3NS42MjksOTAuMjY3LDE3My44Myw5Ni43NzN6Ii8+Cjwvc3ZnPgo=");
background-size: 100% 100%; background-size: 100% 100%;
} }
#dash-ticker--price-container { [data-dash-price-widget] .dash-ticker--wrapper {
font-size: 2em; margin-left: 3.5em;
text-align: center; }
}
#dash-ticker--price-container > input { [data-dash-price-widget] .dash-ticker--usd {
position: fixed; font-size: 2em;
right: -200px; text-align: center;
} }
#dash-ticker--price-container > input + label { [data-dash-price-widget] .dash-ticker--usd-change {
display: none; text-align: right;
cursor: pointer; }
}
#dash-ticker--price-container > input:checked + label { [data-dash-price-widget] .dash-ticker--btc {
display: block; text-align: left;
} margin-top: -1em;
</style> }
<form class="dash-ticker"> </style>
<div class="dash-ticker--title">Dash Price</div> <div data-dash-price-widget=""></div>
<div id="dash-ticker--price-container" title="Click to change currency"> <script type="application/javascript">(function () {
<input type="radio" name="currency" id="USD" checked /> "use strict";
<label>
<span class="dash-ticker--price">Loading...</span>
<span class="dash-ticker--currency"></span>
</label>
</div>
</form>
<script type="application/javascript">(function () {
"use strict";
function fetchJSONFile(path, callback) { function fetchJSONFile(path, callback) {
var httpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); var httpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
httpRequest.onreadystatechange = function () { httpRequest.onreadystatechange = function () {
if (httpRequest.readyState === 4) { if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) { if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText); var data = JSON.parse(httpRequest.responseText);
if (callback) { callback(data); } if (callback) { callback(data); }
}
} }
}; }
httpRequest.open('GET', path); };
httpRequest.send(); httpRequest.open('GET', path);
} httpRequest.send();
}
function updatePrices() { function makeCurrencyString(number) {
// this requests the Dash price JSON and executes a callback with the parsed result once it is available // return 3 significant figures or two decimal places, whichever is longer.
fetchJSONFile('https://coinmarketcap-nexuist.rhcloud.com/api/dash/price', function (data) { return (number.toPrecision(3).length > number.toFixed(2) ? number.toPrecision(3) : number.toFixed(2));
var keys = Object.keys(data), }
currencyListHTML = "";
for (var i = 0; i < keys.length; i++) {
var thisCurrency = keys[i];
var nextCurrency = keys[(i < keys.length - 1 ? i + 1 : 0)];
var currencyValue = data[keys[i]];
var currencyString = (currencyValue.toPrecision(3).length > currencyValue.toFixed(2) ? currencyValue.toPrecision(3) : currencyValue.toFixed(2));
currencyListHTML += '<input type="radio" name="currency" id="dash-ticker-currencies-' + thisCurrency + '"' + (i === 0 ? ' checked' : '') + ' /><label for="dash-ticker-currencies-' + nextCurrency + '"><span class="dash-ticker--price">' + currencyString + '</span> <span class="dash-ticker--currency">' + thisCurrency.toUpperCase() + '</span></label>';
}
document.getElementById('dash-ticker--price-container').innerHTML = currencyListHTML;
});
}
updatePrices(); // update prices now function updatePrices() {
setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this // this requests the Dash price JSON and executes a callback with the parsed result once it is available
})(); fetchJSONFile('https://coinmarketcap-nexuist.rhcloud.com/api/dash/', function (data) {
</script> var markup = '<div class="dash-ticker--title">Dash Price</div><div class="dash-ticker--wrapper"><div class="dash-ticker--usd">!price_usd</div><div class="dash-ticker--usd-change">!percent_change_24h</div><div class="dash-ticker--btc">!price_btc</div></div>';
/*
{
"symbol":"dash",
"position":"5",
"name":"Dash",
"market_cap":{
"usd":42443061.2936,
"eur":37214670.34508659,
"cny":275818610.627892,
"gbp":29413847.89462938,
"cad":54771497.307551995,
"rub":2800409354.958081,
"hkd":329415538.6572049,
"jpy":4545448180.293412,
"aud":57612508.5013617,
"btc":92474.6576981
},
"price":{
"usd":6.59801,
"eur":5.78522754014,
"cny":42.87753747356,
"gbp":4.572546292190001,
"cad":8.5145339647,
"rub":435.33921364181,
"hkd":51.20947810952,
"jpy":706.6152071500101,
"aud":8.95618496007,
"btc":0.0143757
},
"supply":"6432706",
"volume":{
"usd":300399,
"eur":263394.048786,
"cny":1952159.723844,
"gbp":208182.21458100004,
"cad":387655.89753,
"rub":19820440.472018998,
"hkd":2331502.379448,
"jpy":32171291.285198998,
"aud":407763.70539300004,
"btc":654.506
},
"change":"-3.01",
"timestamp":"1462626382.036"
}
*/
console.log(data);
if (data) {
markup = markup.replace(/!price_usd/g, makeCurrencyString(data.price.usd) + " USD");
markup = markup.replace(/!percent_change_24h/g, data.change + "%");
markup = markup.replace(/!price_btc/g, makeCurrencyString(data.price.btc) + " BTC");
document.querySelector('[data-dash-price-widget]').innerHTML = markup;
}
});
}
updatePrices(); // update prices now
setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this
}());
</script>
<script src="http://gist-it.appspot.com/https://github.com/seigler/Dash-html-ticker/blob/master/dist/index.html"></script> <script src="http://gist-it.appspot.com/https://github.com/seigler/Dash-html-ticker/blob/master/dist/index.html"></script>