From c180d56f356ab6c6c1a4506af4a7a22e46d43b6e Mon Sep 17 00:00:00 2001
From: Joshua Seigler <github@joshua.seigler.net>
Date: Fri, 29 Apr 2016 00:36:21 -0400
Subject: [PATCH] update demo to match latest

---
 .gitignore |   1 +
 index.html | 151 +++++++++++++++++++++++++++--------------------------
 2 files changed, 77 insertions(+), 75 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2ccbe46
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/node_modules/
diff --git a/index.html b/index.html
index d843f22..63c7ec1 100644
--- a/index.html
+++ b/index.html
@@ -15,67 +15,66 @@
 
     <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,
-        .dash-ticker *,
-        .dash-ticker *:before,
-        .dash-ticker *:after {
-            box-sizing: inherit;
-            vertical-align: baseline;
-            font-weight: inherit;
-            font-family: inherit;
-            font-style: inherit;
-            font-size: 100%;
-            border: 0 none;
-            outline: 0;
-            padding: 0;
-            margin: 0;
-            line-height: 1;
-        }
+    .dash-ticker,
+    .dash-ticker *,
+    .dash-ticker *:before,
+    .dash-ticker *:after {
+        box-sizing: inherit;
+        vertical-align: baseline;
+        font-weight: inherit;
+        font-family: inherit;
+        font-style: inherit;
+        font-size: 100%;
+        border: 0 none;
+        outline: 0;
+        padding: 0;
+        margin: 0;
+        line-height: 1;
+    }
 
-        .dash-ticker {
-            display: block;
-            max-width: 20em;
-            margin: 0.5em auto;
-            border-radius: 0.5em;
-            background-color: #1D76BC;
-            box-sizing: border-box;
-            color: white;
-            padding: 0.5em;
-            font-family: serif;
-        }
+    .dash-ticker {
+        display: block;
+        max-width: 20em;
+        margin: 0.5em auto;
+        border-radius: 0.5em;
+        background-color: #1D76BC;
+        box-sizing: border-box;
+        color: white;
+        padding: 0.5em;
+        font-family: serif;
+    }
 
-        .dash-ticker .dash-ticker--title {
-            font-size: 2em;
-            float: left;
-            height: 1em;
-            width: 1em;
-            overflow: hidden;
-            text-indent: -999px;
-            background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjI2Ljc3N3B4IiBoZWlnaHQ9IjIyNi43NzdweCIgdmlld0JveD0iMCAwIDIyNi43NzcgMjI2Ljc3NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjI2Ljc3NyAyMjYuNzc3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTEzLjM4OCwwQzUwLjc2NiwwLDAsNTAuNzY2LDAsMTEzLjM4OGMwLDYyLjYyMyw1MC43NjYsMTEzLjM4OSwxMTMuMzg5LDExMy4zODkKCWM2Mi42MjMsMCwxMTMuMzg5LTUwLjc2NiwxMTMuMzg5LTExMy4zODlDMjI2Ljc3Nyw1MC43NjYsMTc2LjAxMSwwLDExMy4zODgsMHogTTU2LjU2MiwxMDQuODAyaDQ1LjI2NmwtNS4yMzgsMTcuMDI0SDUxLjMyNgoJTDU2LjU2MiwxMDQuODAyeiBNMTczLjgzLDk2Ljc3M2MtMS44MDEsNi41MDYtNy42NTYsMjYuMDIzLTEwLjA1OSwzMi45NDVjLTIuNCw2LjkyMi02LjgyOSwxMi43MzQtMTIuNTA2LDE2LjA1NwoJYy01LjY3NiwzLjMyMy03Ljc5Nyw0LjcxMi0xNS43MzEsNC43MTJINTQuMzAzbDUuNzIxLTE4LjU0Mmg3Ni4zOTVsMTEuNDE0LTM3LjEwOWgtNzUuNzlsNS43MjItMTguNTQxYzAsMCw4My42OTgsMCw4NC41NzcsMAoJYzMuODc1LDAsOC45OTYsMS43OTIsMTEuNDg4LDYuNjM5QzE3Ni4zMjEsODcuNzc1LDE3NS42MjksOTAuMjY3LDE3My44Myw5Ni43NzN6Ii8+Cjwvc3ZnPgo=");
-            background-size: 100% 100%;
-        }
+    .dash-ticker .dash-ticker--title {
+        font-size: 2em;
+        float: left;
+        height: 1em;
+        width: 1em;
+        overflow: hidden;
+        text-indent: -999px;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjI2Ljc3N3B4IiBoZWlnaHQ9IjIyNi43NzdweCIgdmlld0JveD0iMCAwIDIyNi43NzcgMjI2Ljc3NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjI2Ljc3NyAyMjYuNzc3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTEzLjM4OCwwQzUwLjc2NiwwLDAsNTAuNzY2LDAsMTEzLjM4OGMwLDYyLjYyMyw1MC43NjYsMTEzLjM4OSwxMTMuMzg5LDExMy4zODkKCWM2Mi42MjMsMCwxMTMuMzg5LTUwLjc2NiwxMTMuMzg5LTExMy4zODlDMjI2Ljc3Nyw1MC43NjYsMTc2LjAxMSwwLDExMy4zODgsMHogTTU2LjU2MiwxMDQuODAyaDQ1LjI2NmwtNS4yMzgsMTcuMDI0SDUxLjMyNgoJTDU2LjU2MiwxMDQuODAyeiBNMTczLjgzLDk2Ljc3M2MtMS44MDEsNi41MDYtNy42NTYsMjYuMDIzLTEwLjA1OSwzMi45NDVjLTIuNCw2LjkyMi02LjgyOSwxMi43MzQtMTIuNTA2LDE2LjA1NwoJYy01LjY3NiwzLjMyMy03Ljc5Nyw0LjcxMi0xNS43MzEsNC43MTJINTQuMzAzbDUuNzIxLTE4LjU0Mmg3Ni4zOTVsMTEuNDE0LTM3LjEwOWgtNzUuNzlsNS43MjItMTguNTQxYzAsMCw4My42OTgsMCw4NC41NzcsMAoJYzMuODc1LDAsOC45OTYsMS43OTIsMTEuNDg4LDYuNjM5QzE3Ni4zMjEsODcuNzc1LDE3NS42MjksOTAuMjY3LDE3My44Myw5Ni43NzN6Ii8+Cjwvc3ZnPgo=");
+        background-size: 100% 100%;
+    }
 
-        #dash-ticker--price-container {
-            font-size: 2em;
-            text-align: center;
-        }
+    #dash-ticker--price-container {
+        font-size: 2em;
+        text-align: center;
+    }
 
-        #dash-ticker--price-container > input {
-            position: fixed;
-            right: -200px;
-        }
+    #dash-ticker--price-container > input {
+        position: fixed;
+        right: -200px;
+    }
 
-        #dash-ticker--price-container > input + label {
-            display: none;
-            cursor: pointer;
-        }
+    #dash-ticker--price-container > input + label {
+        display: none;
+        cursor: pointer;
+    }
 
-        #dash-ticker--price-container > input:checked + label {
-            display: block;
-        }
+    #dash-ticker--price-container > input:checked + label {
+        display: block;
+    }
     </style>
     <form class="dash-ticker">
         <div class="dash-ticker--title">Dash Price</div>
@@ -87,30 +86,28 @@
             </label>
         </div>
     </form>
-    <script type="application/javascript">
-        (function () {
-            "use strict";
+    <script type="application/javascript">(function () {
+        "use strict";
 
-            function fetchJSONFile(path, callback) {
-                var httpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
-                httpRequest.onreadystatechange = function () {
-                    if (httpRequest.readyState === 4) {
-                        if (httpRequest.status === 200) {
-                            var data = JSON.parse(httpRequest.responseText);
-                            if (callback) {
-                                callback(data);
-                            }
-                        }
+        function fetchJSONFile(path, callback) {
+            var httpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
+            httpRequest.onreadystatechange = function () {
+                if (httpRequest.readyState === 4) {
+                    if (httpRequest.status === 200) {
+                        var data = JSON.parse(httpRequest.responseText);
+                        if (callback) { callback(data); }
                     }
-                };
-                httpRequest.open('GET', path);
-                httpRequest.send();
-            }
+                }
+            };
+            httpRequest.open('GET', path);
+            httpRequest.send();
+        }
 
-            // this requests the file and executes a callback with the parsed result once it is available
+        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 = "";
+                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)];
@@ -120,7 +117,11 @@
                 }
                 document.getElementById('dash-ticker--price-container').innerHTML = currencyListHTML;
             });
-        })();
+        }
+
+        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>