mirror of
https://github.com/nathanp/crypto-price-widget.git
synced 2025-11-06 11:18:54 -05:00
more UI/UX improvements. Starting to test price notifications/alerts!
This commit is contained in:
parent
ac6d6861bf
commit
1f381d4c25
1
coinlist.json
Normal file
1
coinlist.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
12
css/app.css
12
css/app.css
@ -90,6 +90,11 @@ button {
|
||||
-webkit-border-radius: 50px;
|
||||
border-radius: 50px;
|
||||
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 {
|
||||
border-color: #ff2626;
|
||||
@ -114,6 +119,11 @@ button {
|
||||
.tabs button img {
|
||||
width: 19px;
|
||||
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.active img {
|
||||
@ -260,7 +270,7 @@ ul {
|
||||
}
|
||||
.coin-list li .change {
|
||||
padding: 2px 3px 2px;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
float: right;
|
||||
margin: 10px 0px 0px;
|
||||
background: #000;
|
||||
|
||||
@ -4,9 +4,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Latest Crypto Prices</title>
|
||||
<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>
|
||||
|
||||
<body>
|
||||
@ -117,5 +114,5 @@
|
||||
</script>
|
||||
<script src="js/app_common.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>
|
||||
10
js/Chart.min.js
vendored
Normal file
10
js/Chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -226,6 +226,31 @@ function updateData() {
|
||||
//console.log(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
|
||||
let change = document.querySelector("#coin-"+[key]+" .change");
|
||||
if(coinDISPLAYchange > 0) {
|
||||
@ -370,7 +395,8 @@ document.getElementById('saveQuantities').onclick = function(){
|
||||
***********/
|
||||
// Settings - list of coins
|
||||
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();
|
||||
xobj.overrideMimeType("application/json");
|
||||
xobj.open('GET', file, true);
|
||||
@ -381,6 +407,7 @@ function loadJSON(callback) {
|
||||
}
|
||||
};
|
||||
xobj.send(null);
|
||||
|
||||
} //loadJSON
|
||||
|
||||
// Generate the list of all coins
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user