mirror of
https://github.com/nathanp/crypto-price-widget.git
synced 2025-11-06 03:08:55 -05:00
Added working portfolio
This commit is contained in:
Nathan Parikh
parent
3a8dbd63f0
commit
0f92fb17f5
100
css/app.css
100
css/app.css
@ -62,109 +62,146 @@ button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#portfolio-btn, #main-btn {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
#prices {
|
||||
.coin-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
#prices li {
|
||||
#portfolio-list.coin-list {
|
||||
font-size: 16px;
|
||||
}
|
||||
.coin-list li {
|
||||
margin: 0px 0px 15px 0px;
|
||||
padding: 0px 0px 15px 0px;
|
||||
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;
|
||||
}
|
||||
#prices li span {
|
||||
.coin-list li span {
|
||||
|
||||
}
|
||||
#prices li span.draggable {
|
||||
.coin-list li span.draggable {
|
||||
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-left-width: 2px;
|
||||
padding: 0px 5px 0px;
|
||||
font-family: 'Heebo', sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
#prices li .sym:hover {
|
||||
.coin-list li .sym:hover {
|
||||
cursor: -webkit-grab;
|
||||
}
|
||||
/*Symbol Colors*/
|
||||
#prices li#coin-BTC .sym {
|
||||
.coin-list li#coin-BTC .sym {
|
||||
border-left-color: #F9A847;
|
||||
}
|
||||
#prices li#coin-XRP .sym {
|
||||
.coin-list li#coin-XRP .sym {
|
||||
border-left-color: #0997D2;
|
||||
}
|
||||
#prices li#coin-LTC .sym {
|
||||
.coin-list li#coin-LTC .sym {
|
||||
border-left-color: #F1F1F1;
|
||||
}
|
||||
#prices li#coin-NEO .sym,
|
||||
#prices li#coin-GAS .sym {
|
||||
.coin-list li#coin-NEO .sym,
|
||||
.coin-list li#coin-GAS .sym {
|
||||
border-left-color: #9CD115;
|
||||
}
|
||||
#prices li#coin-OMG .sym {
|
||||
.coin-list li#coin-OMG .sym {
|
||||
border-left-color: #1A53F0;
|
||||
}
|
||||
#prices li#coin-BCH .sym {
|
||||
.coin-list li#coin-BCH .sym {
|
||||
border-left-color: #F7931A;
|
||||
}
|
||||
#prices li#coin-DASH .sym {
|
||||
.coin-list li#coin-DASH .sym {
|
||||
border-left-color: #0475B6;
|
||||
}
|
||||
#prices li#coin-XMR .sym {
|
||||
.coin-list li#coin-XMR .sym {
|
||||
border-left-color: #FF6600;
|
||||
}
|
||||
#prices li#coin-ETC .sym {
|
||||
.coin-list li#coin-ETC .sym {
|
||||
border-left-color: #689274;
|
||||
}
|
||||
#prices li#coin-ZEC .sym {
|
||||
.coin-list li#coin-ZEC .sym {
|
||||
border-left-color: #EFB948;
|
||||
}
|
||||
#prices li#coin-GNT .sym {
|
||||
.coin-list li#coin-GNT .sym {
|
||||
border-left-color: #00AFBF;
|
||||
}
|
||||
#prices li#coin-BAT .sym {
|
||||
.coin-list li#coin-BAT .sym {
|
||||
border-left-color: #662F92;
|
||||
}
|
||||
#prices li#coin-FCT .sym {
|
||||
.coin-list li#coin-FCT .sym {
|
||||
border-left-color: #E3A77D;
|
||||
}
|
||||
#prices li#coin-ARK .sym {
|
||||
.coin-list li#coin-ARK .sym {
|
||||
border-left-color: #CB0101;
|
||||
}
|
||||
#prices li#coin-DOGE .sym {
|
||||
.coin-list li#coin-DOGE .sym {
|
||||
border-left-color: #BBA034;
|
||||
}
|
||||
#prices li#coin-CVC .sym {
|
||||
.coin-list li#coin-CVC .sym {
|
||||
border-left-color: #41BB2E;
|
||||
}
|
||||
#prices li#coin-MCO .sym {
|
||||
.coin-list li#coin-MCO .sym {
|
||||
border-left-color: #82344C;
|
||||
}
|
||||
#prices li#coin-UBQ .sym {
|
||||
.coin-list li#coin-UBQ .sym {
|
||||
border-left-color: #00EA90;
|
||||
}
|
||||
#prices li#coin-DNT .sym {
|
||||
.coin-list li#coin-DNT .sym {
|
||||
border-left-color: #7CF7FA;
|
||||
}
|
||||
#prices li .change {
|
||||
.coin-list li .change {
|
||||
padding: 2px 3px 2px;
|
||||
font-size: 12px;
|
||||
float: right;
|
||||
margin: 10px 0px 0px;
|
||||
background: #000;
|
||||
}
|
||||
#prices li .change.positive {
|
||||
.coin-list li .change.positive {
|
||||
color: #b2ff93;
|
||||
}
|
||||
#prices li .change.negative {
|
||||
.coin-list li .change.negative {
|
||||
color: #ff6765;
|
||||
}
|
||||
|
||||
@ -191,7 +228,8 @@ ul {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
#saveCoins {
|
||||
#saveCoins,
|
||||
#saveQuantities {
|
||||
background-color: #000000;
|
||||
color: #fff;
|
||||
border: 1px solid #252525;
|
||||
|
||||
30
index.html
30
index.html
@ -13,17 +13,20 @@
|
||||
<div class="controls">
|
||||
<button id="min-btn"></button>
|
||||
<button id="close-btn"></button>
|
||||
</div>
|
||||
<button id="settings-btn" onclick="toggleSettings()"><img src="images/icons8-Settings.png"></button>
|
||||
<button id="settings-btn" onclick="toggleSettings()">folio</button>
|
||||
</div><!-- .controls -->
|
||||
<div class="tabs">
|
||||
<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>
|
||||
|
||||
<div id="main" class="panel active">
|
||||
<ul id="prices">
|
||||
<ul id="prices" class="coin-list">
|
||||
</ul>
|
||||
</div><!-- #main -->
|
||||
|
||||
<div id="settings" class="panel inactive">
|
||||
<div id="settings" class="panel">
|
||||
<h3>Choose Your Coins</h3>
|
||||
|
||||
<div id="coinsearch">
|
||||
@ -73,8 +76,19 @@
|
||||
</div>
|
||||
</div><!-- #settings -->
|
||||
|
||||
<!--<div id="portfolio" class="panel active">-->
|
||||
<!-- manual selection of coins - separate from what's tracking -->
|
||||
<div id="portfolio" class="panel">
|
||||
<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 -->
|
||||
<!-- grab coin prices same as above -->
|
||||
<!-- show current portfolio value -->
|
||||
@ -82,7 +96,7 @@
|
||||
|
||||
<!-- Enter avg. purchase price for each coin -->
|
||||
<!-- See % gain/loss -->
|
||||
<!--</div>-->
|
||||
</div><!-- #portfolio -->
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
104
js/app_common.js
104
js/app_common.js
@ -115,6 +115,7 @@ function getSelectedChbox(frm) {
|
||||
}
|
||||
|
||||
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';
|
||||
|
||||
function initData() {
|
||||
@ -201,6 +202,7 @@ function updateData() {
|
||||
response.json().then(function(data) {
|
||||
let pricesDISPLAY = data.DISPLAY; // display for everything except coin symbol
|
||||
let pricesRAW = data.RAW; // raw to get BTC instead of bitcoin symbol
|
||||
let portfolioSum = 0;
|
||||
for (let key of Object.keys(pricesRAW)) {
|
||||
let coinDISPLAY = pricesDISPLAY[key];
|
||||
let coinDISPLAYchange = coinDISPLAY[base].CHANGEPCT24HOUR;
|
||||
@ -242,8 +244,34 @@ function updateData() {
|
||||
change.classList.remove("postive");
|
||||
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
|
||||
@ -267,6 +295,53 @@ document.getElementById('saveCoins').onclick = function(){
|
||||
//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
|
||||
********/
|
||||
@ -282,20 +357,23 @@ document.getElementById("min-btn").addEventListener("click", function (e) {
|
||||
window.minimize();
|
||||
});
|
||||
|
||||
//settings tab/icon
|
||||
function toggleSettings() {
|
||||
var divs = document.getElementsByClassName('panel'), i;
|
||||
for (i = 0; i < divs.length; ++i) {
|
||||
if(divs[i].classList.contains('inactive')) {
|
||||
divs[i].classList.remove('inactive');
|
||||
divs[i].classList.add('active');
|
||||
//Panel tabs
|
||||
var tabLinks = document.querySelectorAll('.tabs button');
|
||||
for (var i = 0; i < tabLinks.length; i++) {
|
||||
tabLinks[i].onclick = function() {
|
||||
var target = this.getAttribute('href').replace('#', '');
|
||||
var sections = document.querySelectorAll('.panel');
|
||||
for(var j=0; j < sections.length; j++) {
|
||||
sections[j].style.display = 'none';
|
||||
}
|
||||
else {
|
||||
divs[i].classList.remove('active');
|
||||
divs[i].classList.add('inactive');
|
||||
document.getElementById(target).style.display = 'block';
|
||||
for(var k=0; k < tabLinks.length; k++) {
|
||||
tabLinks[k].removeAttribute('class');
|
||||
}
|
||||
}//for
|
||||
}//toggleSettings
|
||||
this.setAttribute('class', 'active');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
//Coin search filter
|
||||
function myFunction() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user