mirror of
https://github.com/seigler/Dash-price-widget
synced 2025-07-26 23:56:10 +00:00
use new coinmarketcap API
This commit is contained in:
Joshua Seigler
parent
7a98dcb3c4
commit
7afabe0f34
5 changed files with 163 additions and 81 deletions
|
|
@ -1,12 +1,3 @@
|
|||
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
|
||||
<form class="dash-ticker">
|
||||
<div class="dash-ticker--title">Dash Price</div>
|
||||
<div id="dash-ticker--price-container" title="Click to change currency">
|
||||
<input type="radio" name="currency" id="USD" checked />
|
||||
<label>
|
||||
<span class="dash-ticker--price">Loading...</span>
|
||||
<span class="dash-ticker--currency"></span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<div data-dash-price-widget=""></div>
|
||||
<script type="application/javascript" src="scripts/app.js"></script>
|
||||
|
|
|
|||
|
|
@ -15,22 +15,73 @@
|
|||
httpRequest.send();
|
||||
}
|
||||
|
||||
function makeCurrencyString(number) {
|
||||
// return 3 significant figures or two decimal places, whichever is longer.
|
||||
return (number.toPrecision(3).length > number.toFixed(2) ? number.toPrecision(3) : number.toFixed(2));
|
||||
}
|
||||
|
||||
function updatePrices() {
|
||||
// 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/price', function (data) {
|
||||
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>';
|
||||
fetchJSONFile('https://coinmarketcap-nexuist.rhcloud.com/api/dash/', function (data) {
|
||||
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;
|
||||
}
|
||||
document.getElementById('dash-ticker--price-container').innerHTML = currencyListHTML;
|
||||
});
|
||||
}
|
||||
|
||||
updatePrices(); // update prices now
|
||||
setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this
|
||||
})();
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
/* Micro reset so global styles don't interfere */
|
||||
|
||||
.dash-ticker,
|
||||
.dash-ticker *,
|
||||
.dash-ticker *:before,
|
||||
.dash-ticker *:after {
|
||||
[data-dash-price-widget],
|
||||
[data-dash-price-widget] *,
|
||||
[data-dash-price-widget] *:before,
|
||||
[data-dash-price-widget] *:after {
|
||||
box-sizing: inherit;
|
||||
vertical-align: baseline;
|
||||
font-weight: inherit;
|
||||
|
|
@ -17,9 +17,9 @@
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.dash-ticker {
|
||||
[data-dash-price-widget] {
|
||||
display: block;
|
||||
max-width: 20em;
|
||||
max-width: 18em;
|
||||
margin: 0.5em auto;
|
||||
border-radius: 0.5em;
|
||||
background-color: #1D76BC;
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
font-family: serif;
|
||||
}
|
||||
|
||||
.dash-ticker .dash-ticker--title {
|
||||
font-size: 2em;
|
||||
[data-dash-price-widget] .dash-ticker--title {
|
||||
font-size: 3em;
|
||||
float: left;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
|
|
@ -40,21 +40,20 @@
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container {
|
||||
[data-dash-price-widget] .dash-ticker--wrapper {
|
||||
margin-left: 3.5em;
|
||||
}
|
||||
|
||||
[data-dash-price-widget] .dash-ticker--usd {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container > input {
|
||||
position: fixed;
|
||||
right: -200px;
|
||||
[data-dash-price-widget] .dash-ticker--usd-change {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container > input + label {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container > input:checked + label {
|
||||
display: block;
|
||||
[data-dash-price-widget] .dash-ticker--btc {
|
||||
text-align: left;
|
||||
margin-top: -1em;
|
||||
}
|
||||
|
|
|
|||
121
dist/index.html
vendored
121
dist/index.html
vendored
|
|
@ -1,9 +1,9 @@
|
|||
<style type="text/css">/* Micro reset so global styles don't interfere */
|
||||
|
||||
.dash-ticker,
|
||||
.dash-ticker *,
|
||||
.dash-ticker *:before,
|
||||
.dash-ticker *:after {
|
||||
[data-dash-price-widget],
|
||||
[data-dash-price-widget] *,
|
||||
[data-dash-price-widget] *:before,
|
||||
[data-dash-price-widget] *:after {
|
||||
box-sizing: inherit;
|
||||
vertical-align: baseline;
|
||||
font-weight: inherit;
|
||||
|
|
@ -17,9 +17,9 @@
|
|||
line-height: 1;
|
||||
}
|
||||
|
||||
.dash-ticker {
|
||||
[data-dash-price-widget] {
|
||||
display: block;
|
||||
max-width: 20em;
|
||||
max-width: 18em;
|
||||
margin: 0.5em auto;
|
||||
border-radius: 0.5em;
|
||||
background-color: #1D76BC;
|
||||
|
|
@ -29,8 +29,8 @@
|
|||
font-family: serif;
|
||||
}
|
||||
|
||||
.dash-ticker .dash-ticker--title {
|
||||
font-size: 2em;
|
||||
[data-dash-price-widget] .dash-ticker--title {
|
||||
font-size: 3em;
|
||||
float: left;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
|
|
@ -40,35 +40,25 @@
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container {
|
||||
[data-dash-price-widget] .dash-ticker--wrapper {
|
||||
margin-left: 3.5em;
|
||||
}
|
||||
|
||||
[data-dash-price-widget] .dash-ticker--usd {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container > input {
|
||||
position: fixed;
|
||||
right: -200px;
|
||||
[data-dash-price-widget] .dash-ticker--usd-change {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container > input + label {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#dash-ticker--price-container > input:checked + label {
|
||||
display: block;
|
||||
[data-dash-price-widget] .dash-ticker--btc {
|
||||
text-align: left;
|
||||
margin-top: -1em;
|
||||
}
|
||||
</style>
|
||||
<form class="dash-ticker">
|
||||
<div class="dash-ticker--title">Dash Price</div>
|
||||
<div id="dash-ticker--price-container" title="Click to change currency">
|
||||
<input type="radio" name="currency" id="USD" checked />
|
||||
<label>
|
||||
<span class="dash-ticker--price">Loading...</span>
|
||||
<span class="dash-ticker--currency"></span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<div data-dash-price-widget=""></div>
|
||||
<script type="application/javascript">(function () {
|
||||
"use strict";
|
||||
|
||||
|
|
@ -86,23 +76,74 @@
|
|||
httpRequest.send();
|
||||
}
|
||||
|
||||
function makeCurrencyString(number) {
|
||||
// return 3 significant figures or two decimal places, whichever is longer.
|
||||
return (number.toPrecision(3).length > number.toFixed(2) ? number.toPrecision(3) : number.toFixed(2));
|
||||
}
|
||||
|
||||
function updatePrices() {
|
||||
// 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/price', function (data) {
|
||||
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>';
|
||||
fetchJSONFile('https://coinmarketcap-nexuist.rhcloud.com/api/dash/', function (data) {
|
||||
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;
|
||||
}
|
||||
document.getElementById('dash-ticker--price-container').innerHTML = currencyListHTML;
|
||||
});
|
||||
}
|
||||
|
||||
updatePrices(); // update prices now
|
||||
setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this
|
||||
})();
|
||||
}());
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "dash-price-ticker",
|
||||
"name": "dash-price-widget",
|
||||
"version": "1.0.0",
|
||||
"description": "Embeddable dash price widget",
|
||||
"scripts": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue