Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add secondary currency #81

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ ul {
}
.coin-list .block {
display: inline-block;
vertical-align: top;
vertical-align: middle;
}
.coin-list .block label {
font-size: 12px;
Expand Down Expand Up @@ -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 {
Expand Down
27 changes: 27 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
64 changes: 61 additions & 3 deletions js/app_common.js
Original file line number Diff line number Diff line change
Expand Up @@ -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", "BTC");
}

/* Base Currency */
base = settings.get("user.currency"); // get the user's base currency
var currSel = document.getElementById("base"); //select the currency select box
Expand All @@ -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);
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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?
Expand All @@ -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")) {
Expand Down Expand Up @@ -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>";
Expand Down