Add secondary currency

Author: lucasmundim

css/app.css

@@ -182,7 +182,7 @@ ul {
       }
       .coin-list .block {
         display: inline-block;
-        vertical-align: top;
+        vertical-align: middle;
       }
         .coin-list .block label {
           font-size: 12px;
@@ -274,7 +274,7 @@ ul {
         padding: 2px 3px 2px;
         font-size: 14px;
         float: right;
-        margin: 10px 0px 0px;
+        margin: 28px 0px;
         background: #000;
       }
         .coin-list li .change.positive {

index.html

@@ -60,6 +60,33 @@ <h3>Choose Your Base Currency</h3>
           <option value="ZAR">ZAR</option>
         </select>
       </label>
+
+      <h3>Choose Your Secondary Currency</h3>
+      <label class="custom-select">
+        <select id="secondary" onchange="setSecondary()">
+          <option value="BTC">BTC</option>
+          <option value="USD">USD</option>
+          <!-- 20 most traded currencies - https://en.wikipedia.org/wiki/Template:Most_traded_currencies -->
+          <option value="AUD">AUD</option>
+          <option value="BRL">BRL</option>
+          <option value="CAD">CAD</option>
+          <option value="CNY">CNY</option>
+          <option value="EUR">EUR</option>
+          <option value="GBP">GBP</option>
+          <option value="HKD">HKD</option>
+          <option value="INR">INR</option>
+          <option value="JPY">JPY</option>
+          <option value="KRW">KRW</option>
+          <option value="MXN">MXN</option>
+          <option value="NOK">NOK</option>
+          <option value="NZD">NZD</option>
+          <option value="RUB">RUB</option>
+          <option value="SEK">SEK</option>
+          <option value="SGD">SGD</option>
+          <option value="TRY">TRY</option>
+          <option value="ZAR">ZAR</option>
+        </select>
+      </label>
 
       <div class="checkbox-wrapper">
       <input id="pin-to-top" class="checkbox-styled" type="checkbox" name="pin-to-top">

js/app_common.js

@@ -21,6 +21,13 @@ if (settings.has("user.currency")) {
   settings.set("user.currency", "USD");
 }
 
+//default secondary currency
+if (settings.has("user.secondaryCurrency")) {
+  //do nothing because secondary currency already set
+} else {
+  settings.set("user.secondaryCurrency", "BRL");
+}
+
 /* Base Currency */
 base = settings.get("user.currency"); // get the user's base currency
 var currSel = document.getElementById("base"); //select the currency select box
@@ -35,6 +42,20 @@ setBase = function () {
   updateData(); //immediately reflect the changed currency
 };
 
+/* Secondary Currency */
+secondary = settings.get("user.secondaryCurrency"); // get the user's secondary currency
+var currSel = document.getElementById("secondary"); //select the currency select box
+currSel.value = settings.get("user.secondaryCurrency"); //select the option that corresponds to the user's secondary currency
+setSecondary = function () {
+  //selected secondary currency
+  var sel = document.getElementById("secondary");
+  var x = sel.selectedIndex;
+  var y = sel.options;
+  secondary = y[x].text;
+  settings.set("user.secondaryCurrency", secondary); //save the user's selection
+  updateData(); //immediately reflect the changed secondary currency
+};
+
 //Functions for creating/appending elements
 function createNode(element) {
   return document.createElement(element);
@@ -64,7 +85,7 @@ function initData() {
     "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=" +
     settings.get("user.coins") +
     "&tsyms=" +
-    base +
+    [base, secondary].join(',') +
     "&extraParams=crypto-price-widget";
   fetch(url)
     .then(
@@ -166,7 +187,7 @@ function updateData() {
     "https://min-api.cryptocompare.com/data/pricemultifull?fsyms=" +
     settings.get("user.coins") +
     "&tsyms=" +
-    base +
+    [base, secondary].join(',') +
     "&extraParams=crypto-price-widget";
   /*
    ** What data needs to be grabbed/changed?
@@ -187,13 +208,15 @@ function updateData() {
         for (let key of Object.keys(pricesRAW)) {
           let coinDISPLAY = pricesDISPLAY[key];
           let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
+          let secondaryCoinDISPLAYchange = coinDISPLAY[secondary].CHANGEPCT24HOUR;
           let coinRAW = pricesRAW[key];
           //console.log(coinDISPLAY);
           let li = document.getElementById("coin-" + [key]),
             span = document.querySelector("#coin-" + [key] + " span");
 
           let coinSymbol = coinRAW[base].FROMSYMBOL;
           let coinRate = coinDISPLAY[base].PRICE.replace(/ /g, ""); //.replace(/ /g,'') removes space after $
+          let secondaryCoinRate = coinDISPLAY[secondary].PRICE.replace(/ /g, ""); //.replace(/ /g,'') removes space after $
 
           //replace currencies that have no symbols with easier to read formats
           if (coinRate.includes("AUD")) {
@@ -227,12 +250,47 @@ function updateData() {
             coinRate = coinRate.replace("ZAR", "R");
           }
 
+          if (secondaryCoinRate.includes("AUD")) {
+            secondaryCoinRate = secondaryCoinRate.replace("AUD", "A$");
+          }
+          if (secondaryCoinRate.includes("CAD")) {
+            secondaryCoinRate = secondaryCoinRate.replace("CAD", "C$");
+          }
+          if (secondaryCoinRate.includes("HKD")) {
+            secondaryCoinRate = secondaryCoinRate.replace("HKD", "HK$");
+          }
+          if (secondaryCoinRate.includes("MXN")) {
+            secondaryCoinRate = secondaryCoinRate.replace("MXN", "$");
+          }
+          if (secondaryCoinRate.includes("NOK")) {
+            secondaryCoinRate = secondaryCoinRate.replace("NOK", "kr");
+          }
+          if (secondaryCoinRate.includes("NZD")) {
+            secondaryCoinRate = secondaryCoinRate.replace("NZD", "NZ$");
+          }
+          if (secondaryCoinRate.includes("SEK")) {
+            secondaryCoinRate = secondaryCoinRate.replace("SEK", "kr");
+          }
+          if (secondaryCoinRate.includes("SGD")) {
+            secondaryCoinRate = secondaryCoinRate.replace("SGD", "S$");
+          }
+          if (secondaryCoinRate.includes("TRY")) {
+            secondaryCoinRate = secondaryCoinRate.replace("TRY", "₺");
+          }
+          if (secondaryCoinRate.includes("ZAR")) {
+            secondaryCoinRate = secondaryCoinRate.replace("ZAR", "R");
+          }
+
           //console.log(span);
           span.innerHTML =
             '<span class="sym">' +
             coinSymbol +
-            "</span> " +
+            "</span>" +
+            ' <div class="block">' +
             coinRate +
+            '<br />' +
+            secondaryCoinRate +
+            '</div>' +
             '<span class="change">' +
             coinDISPLAYchange +
             "%</span>";