CopyBot/crypto-price-widget
1
0
Fork 0
mirror of https://github.com/nathanp/crypto-price-widget.git synced 2025-11-06 03:08:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added working portfolio

Browse Source
This commit is contained in:
Nathan Parikh 2017-09-11 23:26:20 -05:00
parent 3a8dbd63f0
commit 0f92fb17f5
3 changed files with 184 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
css/app.css
View File

@ -62,109 +62,146 @@ button {
opacity: 1; opacity: 1;
} }
#portfolio-btn, #main-btn {
color: #fff;
}
.panel {
display: none;
}
ul { ul {
list-style-type: none; list-style-type: none;
} }
#prices { .coin-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
} }
#prices li { #portfolio-list.coin-list {
font-size: 16px;
}
.coin-list li {
margin: 0px 0px 15px 0px; margin: 0px 0px 15px 0px;
padding: 0px 0px 15px 0px; padding: 0px 0px 15px 0px;
border-bottom: 1px solid #252525; border-bottom: 1px solid #252525;
} }
#prices li:last-child { #portfolio-list.coin-list li {
margin-bottom: 10px;
padding-bottom: 0px;
}
.coin-list li:last-child {
border-bottom: none; border-bottom: none;
} }
#prices li span { .coin-list li span {
} }
#prices li span.draggable { .coin-list li span.draggable {
width: 100%; width: 100%;
} }
#prices li .sym { .coin-list input[type="number"] {
border: none;
padding: 5px;
background: rgba(0, 0, 0, 0);
color: #fff;
max-width: 85px;
display: inline-block;
outline: none;
}
.coin-list .block {
display: inline-block;
vertical-align: top;
}
.coin-list .block label {
font-size: 12px;
display: block;
background: rgba(255, 255, 255, 0.1);
padding: 1px 2px 2px;
}
.coin-list .block .quantity-value {
color: #b2ff93;
}
.coin-list li .sym {
border: 1px solid #252525; border: 1px solid #252525;
border-left-width: 2px; border-left-width: 2px;
padding: 0px 5px 0px; padding: 0px 5px 0px;
font-family: 'Heebo', sans-serif; font-family: 'Heebo', sans-serif;
font-size: 12px; font-size: 12px;
} }
#prices li .sym:hover { .coin-list li .sym:hover {
cursor: -webkit-grab; cursor: -webkit-grab;
} }
/*Symbol Colors*/ /*Symbol Colors*/
#prices li#coin-BTC .sym { .coin-list li#coin-BTC .sym {
border-left-color: #F9A847; border-left-color: #F9A847;
} }
#prices li#coin-XRP .sym { .coin-list li#coin-XRP .sym {
border-left-color: #0997D2; border-left-color: #0997D2;
} }
#prices li#coin-LTC .sym { .coin-list li#coin-LTC .sym {
border-left-color: #F1F1F1; border-left-color: #F1F1F1;
} }
#prices li#coin-NEO .sym, .coin-list li#coin-NEO .sym,
#prices li#coin-GAS .sym { .coin-list li#coin-GAS .sym {
border-left-color: #9CD115; border-left-color: #9CD115;
} }
#prices li#coin-OMG .sym { .coin-list li#coin-OMG .sym {
border-left-color: #1A53F0; border-left-color: #1A53F0;
} }
#prices li#coin-BCH .sym { .coin-list li#coin-BCH .sym {
border-left-color: #F7931A; border-left-color: #F7931A;
} }
#prices li#coin-DASH .sym { .coin-list li#coin-DASH .sym {
border-left-color: #0475B6; border-left-color: #0475B6;
} }
#prices li#coin-XMR .sym { .coin-list li#coin-XMR .sym {
border-left-color: #FF6600; border-left-color: #FF6600;
} }
#prices li#coin-ETC .sym { .coin-list li#coin-ETC .sym {
border-left-color: #689274; border-left-color: #689274;
} }
#prices li#coin-ZEC .sym { .coin-list li#coin-ZEC .sym {
border-left-color: #EFB948; border-left-color: #EFB948;
} }
#prices li#coin-GNT .sym { .coin-list li#coin-GNT .sym {
border-left-color: #00AFBF; border-left-color: #00AFBF;
} }
#prices li#coin-BAT .sym { .coin-list li#coin-BAT .sym {
border-left-color: #662F92; border-left-color: #662F92;
} }
#prices li#coin-FCT .sym { .coin-list li#coin-FCT .sym {
border-left-color: #E3A77D; border-left-color: #E3A77D;
} }
#prices li#coin-ARK .sym { .coin-list li#coin-ARK .sym {
border-left-color: #CB0101; border-left-color: #CB0101;
} }
#prices li#coin-DOGE .sym { .coin-list li#coin-DOGE .sym {
border-left-color: #BBA034; border-left-color: #BBA034;
} }
#prices li#coin-CVC .sym { .coin-list li#coin-CVC .sym {
border-left-color: #41BB2E; border-left-color: #41BB2E;
} }
#prices li#coin-MCO .sym { .coin-list li#coin-MCO .sym {
border-left-color: #82344C; border-left-color: #82344C;
} }
#prices li#coin-UBQ .sym { .coin-list li#coin-UBQ .sym {
border-left-color: #00EA90; border-left-color: #00EA90;
} }
#prices li#coin-DNT .sym { .coin-list li#coin-DNT .sym {
border-left-color: #7CF7FA; border-left-color: #7CF7FA;
} }
#prices li .change { .coin-list li .change {
padding: 2px 3px 2px; padding: 2px 3px 2px;
font-size: 12px; font-size: 12px;
float: right; float: right;
margin: 10px 0px 0px; margin: 10px 0px 0px;
background: #000; background: #000;
} }
#prices li .change.positive { .coin-list li .change.positive {
color: #b2ff93; color: #b2ff93;
} }
#prices li .change.negative { .coin-list li .change.negative {
color: #ff6765; color: #ff6765;
} }
@ -191,7 +228,8 @@ ul {
display: block; display: block;
width: 100%; width: 100%;
} }
#saveCoins { #saveCoins,
#saveQuantities {
background-color: #000000; background-color: #000000;
color: #fff; color: #fff;
border: 1px solid #252525; border: 1px solid #252525;

30
index.html
View File

@ -13,17 +13,20 @@
<div class="controls"> <div class="controls">
<button id="min-btn"></button> <button id="min-btn"></button>
<button id="close-btn"></button> <button id="close-btn"></button>
</div> </div><!-- .controls -->
<button id="settings-btn" onclick="toggleSettings()"><img src="images/icons8-Settings.png"></button> <div class="tabs">
<button id="settings-btn" onclick="toggleSettings()">folio</button> <button id="main-btn" href="#main">main</button>
<button id="settings-btn" href="#settings"><img src="images/icons8-Settings.png"></button>
<button id="portfolio-btn" href="#portfolio">folio</button>
</div><!-- .tabs -->
</header> </header>
<div id="main" class="panel active"> <div id="main" class="panel active">
<ul id="prices"> <ul id="prices" class="coin-list">
</ul> </ul>
</div><!-- #main --> </div><!-- #main -->
<div id="settings" class="panel inactive"> <div id="settings" class="panel">
<h3>Choose Your Coins</h3> <h3>Choose Your Coins</h3>
<div id="coinsearch"> <div id="coinsearch">
@ -73,8 +76,19 @@
</div> </div>
</div><!-- #settings --> </div><!-- #settings -->
<!--<div id="portfolio" class="panel active">--> <div id="portfolio" class="panel">
<!-- manual selection of coins - separate from what's tracking --> <div class="chart">
</div>
<ul id="portfolio-list" class="coin-list">
</ul>
<button type="button" id="saveQuantities">Save</button>
<div id="portfolio-total-value">Total Value: <span class="value"></span></div>
<!-- manual entry of quantity --> <!-- manual entry of quantity -->
<!-- grab coin prices same as above --> <!-- grab coin prices same as above -->
<!-- show current portfolio value --> <!-- show current portfolio value -->
@ -82,7 +96,7 @@
<!-- Enter avg. purchase price for each coin --> <!-- Enter avg. purchase price for each coin -->
<!-- See % gain/loss --> <!-- See % gain/loss -->
<!--</div>--> </div><!-- #portfolio -->
</body> </body>

106
js/app_common.js
View File

@ -115,6 +115,7 @@ function getSelectedChbox(frm) {
} }
const ul = document.getElementById('prices'); // Get the list where we will place coins const ul = document.getElementById('prices'); // Get the list where we will place coins
const portfolio_ul = document.getElementById('portfolio-list');;
const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget'; const url = 'https://min-api.cryptocompare.com/data/pricemultifull?fsyms='+settings.get('user.coins') +'&tsyms='+base +'&extraParams=crypto-price-widget';
function initData() { function initData() {
@ -201,6 +202,7 @@ function updateData() {
response.json().then(function(data) { response.json().then(function(data) {
let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
let pricesRAW = data.RAW; // raw to get BTC instead of bitcoin symbol let pricesRAW = data.RAW; // raw to get BTC instead of bitcoin symbol
let portfolioSum = 0;
for (let key of Object.keys(pricesRAW)) { for (let key of Object.keys(pricesRAW)) {
let coinDISPLAY = pricesDISPLAY[key]; let coinDISPLAY = pricesDISPLAY[key];
let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR; let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
@ -242,8 +244,34 @@ function updateData() {
change.classList.remove("postive"); change.classList.remove("postive");
change.classList.remove("negative"); change.classList.remove("negative");
} }
}
}); // Portfolio
let quantityValue = document.querySelector("#coin-"+[key]+" .quantity-value");
let quantityNumber = settings.get('quantity.'+[key]);
let regp = /[^0-9.-]+/g;
let quantityTotal = parseFloat(coinRate.replace(regp, '')) * parseFloat(quantityNumber.replace(regp, ''));
// sum of all total coin values
portfolioSum += quantityTotal;
// put sum into the markup
let portfolioTotalValue = document.querySelector("#portfolio-total-value .value");
// total value for each coin
if(coinRate.includes("Ƀ")) {
//because BTC has 8 decimal places
quantityValue.innerHTML = quantityTotal.toFixed(8);
portfolioTotalValue.innerHTML = portfolioSum.toFixed(8);
}
else {
//standard currency format
quantityValue.innerHTML = quantityTotal.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
portfolioTotalValue.innerHTML = portfolioSum.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}
} //for
}); //then
} }
) )
setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds setTimeout(function(){updateData()}, 5000); // run this once every 5 seconds
@ -267,6 +295,53 @@ document.getElementById('saveCoins').onclick = function(){
//alert(settings.get('user.currency')); //alert(settings.get('user.currency'));
} }
/***********
* PORTFOLIO
***********/
var portfolio_list_container = document.querySelector('#portfolio-list');
var portfolio_list = settings.get('user.coins');
//generate html from list of coins
for (let key of Object.keys(portfolio_list)) {
let coin = portfolio_list[key];
//console.log(coin);
let li = createNode('li'),
span = createNode('span');
sym = createNode('span');
li.setAttribute("id", "coin-"+[coin]);
append(li, span);
append(portfolio_ul, li);
if (settings.has('quantity.'+[coin])) {
inputValue = settings.get('quantity.'+[coin]);
}
else {
inputValue = '0';
}
span.innerHTML = '<span class="sym">' + coin + '</span> <span class="block quantity"><label for="quantity.' + coin +'">Quantity</label> <input type="number" name="quantity.' + coin +'" min="0" value="'+inputValue+'" step=".01"></span> <span class="block value"><label>Current Value</label><span class="quantity-value"></span></span>';
i++;
} //for
// save quantities
document.getElementById('saveQuantities').onclick = function(){
var items = portfolio_ul.getElementsByTagName("input");
for (var i = 0; i < items.length; ++i) {
// do something with items[i], which is a <li> element
inputName = items[i].getAttribute("name");
inputValue = items[i].value;
//console.log(inputValue);
settings.set(inputName, inputValue);
}
// just reloading the entire app because I have yet to figure out how to add/remove a coin from the primary list without a page reload
//location.reload(false);
}
/******* /*******
* APP UI * APP UI
********/ ********/
@ -282,20 +357,23 @@ document.getElementById("min-btn").addEventListener("click", function (e) {
window.minimize(); window.minimize();
}); });
//settings tab/icon //Panel tabs
function toggleSettings() { var tabLinks = document.querySelectorAll('.tabs button');
var divs = document.getElementsByClassName('panel'), i; for (var i = 0; i < tabLinks.length; i++) {
for (i = 0; i < divs.length; ++i) { tabLinks[i].onclick = function() {
if(divs[i].classList.contains('inactive')) { var target = this.getAttribute('href').replace('#', '');
divs[i].classList.remove('inactive'); var sections = document.querySelectorAll('.panel');
divs[i].classList.add('active'); for(var j=0; j < sections.length; j++) {
sections[j].style.display = 'none';
} }
else { document.getElementById(target).style.display = 'block';
divs[i].classList.remove('active'); for(var k=0; k < tabLinks.length; k++) {
divs[i].classList.add('inactive'); tabLinks[k].removeAttribute('class');
} }
}//for this.setAttribute('class', 'active');
}//toggleSettings return false;
}
};
//Coin search filter //Coin search filter
function myFunction() { function myFunction() {