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

more UI/UX improvements. Starting to test price notifications/alerts!

Browse Source
This commit is contained in:
Nathan Parikh 2017-10-12 23:55:20 -05:00
parent ac6d6861bf
commit 1f381d4c25
7 changed files with 52 additions and 1377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
coinlist.json Normal file
View File

File diff suppressed because one or more lines are too long

1370
cryptocurrencies.json
View File

File diff suppressed because it is too large Load Diff

12
css/app.css
View File

@ -90,6 +90,11 @@ button {
-webkit-border-radius: 50px; -webkit-border-radius: 50px;
border-radius: 50px; border-radius: 50px;
padding: 0; padding: 0;
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
} }
#close-btn { #close-btn {
border-color: #ff2626; border-color: #ff2626;
@ -114,6 +119,11 @@ button {
.tabs button img { .tabs button img {
width: 19px; width: 19px;
opacity: 0.5; opacity: 0.5;
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
} }
.tabs button:hover img, .tabs button:hover img,
.tabs button.active img { .tabs button.active img {
@ -260,7 +270,7 @@ ul {
} }
.coin-list li .change { .coin-list li .change {
padding: 2px 3px 2px; padding: 2px 3px 2px;
font-size: 12px; font-size: 14px;
float: right; float: right;
margin: 10px 0px 0px; margin: 10px 0px 0px;
background: #000; background: #000;

5
index.html
View File

@ -4,9 +4,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Latest Crypto Prices</title> <title>Latest Crypto Prices</title>
<link href="css/app.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet">
<!--<link href="css/animate.css" rel="stylesheet">-->
<!--<link href="https://fonts.googleapis.com/css?family=Heebo:100,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">-->
</head> </head>
<body> <body>
@ -117,5 +114,5 @@
</script> </script>
<script src="js/app_common.js"></script> <script src="js/app_common.js"></script>
<script src="js/html.sortable.min.js"></script> <script src="js/html.sortable.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> <script src="js/Chart.min.js"></script>
</html> </html>

10
js/Chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

29
js/app_common.js
View File

@ -226,6 +226,31 @@ function updateData() {
//console.log(span); //console.log(span);
span.innerHTML = '<span class="sym">' + coinSymbol + '</span> ' + coinRate + '<span class="change">' + coinDISPLAYchange + '%</span>'; span.innerHTML = '<span class="sym">' + coinSymbol + '</span> ' + coinRate + '<span class="change">' + coinDISPLAYchange + '%</span>';
//Price Alert Test
/*
* Choose crypto
* Choose price
* Choose equals, greater than, or less than price
* Alert set to "on"
* Alert when matches conditions
* When click on notification, alert set to "off"
* Use electron settings, localStorage, or sessionStorage?
* Should this be included in the updateData or separate?
*/
/*
var alerted = localStorage.getItem('alerted') || '';
if(coinSymbol.includes("BTC") && coinRAW[base].PRICE >= "5723" && alerted != 'yes') {
let notif = new window.Notification('Price Alert', {
body: "BTC has gone above 5790!"
});
notif.onclick = () => {
//so it doesn't keep notifying us every 3 seconds.
localStorage.setItem('alerted','yes');
}
}
*/
// % Change // % Change
let change = document.querySelector("#coin-"+[key]+" .change"); let change = document.querySelector("#coin-"+[key]+" .change");
if(coinDISPLAYchange > 0) { if(coinDISPLAYchange > 0) {
@ -370,7 +395,8 @@ document.getElementById('saveQuantities').onclick = function(){
***********/ ***********/
// Settings - list of coins // Settings - list of coins
function loadJSON(callback) { function loadJSON(callback) {
var file = 'https://www.cryptocompare.com/api/data/coinlist/'; //Stored local version of https://www.cryptocompare.com/api/data/coinlist/ for performance
var file = './coinlist.json';
var xobj = new XMLHttpRequest(); var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json"); xobj.overrideMimeType("application/json");
xobj.open('GET', file, true); xobj.open('GET', file, true);
@ -381,6 +407,7 @@ function loadJSON(callback) {
} }
}; };
xobj.send(null); xobj.send(null);
} //loadJSON } //loadJSON
// Generate the list of all coins // Generate the list of all coins

2
main.js
View File

@ -32,7 +32,7 @@ function createWindow () {
width: mainWindowState.width, width: mainWindowState.width,
height: mainWindowState.height, height: mainWindowState.height,
maxWidth: 360, maxWidth: 360,
minWidth: 280, minWidth: 290,
minHeight: 100, minHeight: 100,
maximizable: false, maximizable: false,
fullscreenable: false, fullscreenable: false,