diff --git a/assets/index.html b/assets/index.html
index 0b7e281..93b2674 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -1,12 +1,3 @@
-
+
diff --git a/assets/scripts/app.js b/assets/scripts/app.js
index 0e0afa1..61d6eb2 100644
--- a/assets/scripts/app.js
+++ b/assets/scripts/app.js
@@ -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 += '' + currencyString + ' ' + thisCurrency.toUpperCase() + ' ';
+ fetchJSONFile('https://coinmarketcap-nexuist.rhcloud.com/api/dash/', function (data) {
+ var markup = 'Dash Price
!price_usd
!percent_change_24h
!price_btc
';
+
+/*
+{
+ "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
-})();
+}());
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 611ff7d..169e956 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -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;
}
diff --git a/dist/index.html b/dist/index.html
index 653880a..ed058d8 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,9 +1,9 @@
-
+
diff --git a/package.json b/package.json
index 8b57b7e..89fe02d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "dash-price-ticker",
+ "name": "dash-price-widget",
"version": "1.0.0",
"description": "Embeddable dash price widget",
"scripts": {