-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Change assignment to new CoinmarketCap API
- Loading branch information
1 parent
0dea39b
commit 923d388
Showing
4 changed files
with
106 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,42 @@ | ||
| .card { | ||
| width: 30em; | ||
| } | ||
|
|
||
| .card #cardHeader { | ||
| text-transform: uppercase; | ||
| .down { | ||
| color: red; | ||
| } | ||
|
|
||
| .card .currency-logo-32x32 { | ||
| margin-right: 5px; | ||
| margin-top: -6px; | ||
| .up { | ||
| color: green; | ||
| } | ||
|
|
||
| .card .card-header { | ||
| font-size: 2.5em; | ||
| font-weight: bold; | ||
| .table td:last-child img { | ||
| width: 25px; | ||
| } | ||
|
|
||
| .card .price { | ||
| color: black; | ||
| text-align: center; | ||
| font-size: 3em; | ||
| .table td:last-child img:hover { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .card .timeSpan { | ||
| font-weight: bold; | ||
| .modal-title { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .card .delta { | ||
| font-size: 0.65em; | ||
| font-style: italic; | ||
| .modal-title img { | ||
| margin-right: .5em; | ||
| } | ||
|
|
||
| .card .card-subtitle { | ||
| font-size: 0.75em; | ||
| .modal-body { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .down { | ||
| color: red; | ||
| .price { | ||
| text-align: center; | ||
| font-size: 4em; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .up { | ||
| color: green; | ||
| .change { | ||
| text-align: center; | ||
| font-size: .7em; | ||
| font-style: italic; | ||
| margin-bottom: .7em; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,6 +4,7 @@ | |
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Crypto watcher</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
|
|
||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
| integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> | ||
|
|
@@ -15,97 +16,88 @@ | |
| integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" | ||
| crossorigin="anonymous"></script> | ||
| <script src="/js/helpers.js"></script> | ||
| <script src="/js/cryptowatcher.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <main class="container-fluid"> | ||
| <div class="row"> | ||
| <div class="col"> | ||
| <h1>Crypto watcher</h1> | ||
| <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> | ||
| <div class="btn-group mr-2" role="group" aria-label="First group"> | ||
| <button id="btnTop10" type="button" class="btn btn-secondary">Top 10</button> | ||
| </div> | ||
| <div class="btn-group" role="group" aria-label="Second group"> | ||
| <button id="btnBTC" type="button" class="btn btn-secondary">bitcoin</button> | ||
| <button id="btnETH" type="button" class="btn btn-secondary">ethereum</button> | ||
| <button id="btnLTC" type="button" class="btn btn-secondary">litecoin</button> | ||
| <button id="btnADA" type="button" class="btn btn-secondary">cardano</button> | ||
| <button id="btnNEO" type="button" class="btn btn-secondary">neo</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div id="top10" class="row"> | ||
| <div class="col pt-5"> | ||
| <table id="tblTop10" class="table table-hover"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">#</th> | ||
| <th scope="col">Name</th> | ||
| <th scope="col">Market Cap</th> | ||
| <th scope="col">Price</th> | ||
| <th scope="col">Volume (24h)</th> | ||
| <th scope="col">Change (24h)</th> | ||
| <th>#</th> | ||
| <th>Name</th> | ||
| <th>Market Cap</th> | ||
| <th>Price</th> | ||
| <th>Volume (24h)</th> | ||
| <th colspan="2">Change (24h)</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody></tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| <div id="card" class="row"> | ||
| <div class="col pt-5"> | ||
| <div class="card mx-auto"> | ||
| <div class="card-header"> | ||
| <img id="currencyLogo" src="img/btc.png" class="currency-logo-32x32" /><span id="cardHeader">Bitcoin</span> | ||
| </div> | ||
| <div class="card-body"> | ||
| <h5 class="card-title"><span id="price" class="price">€ 1000.00</span> <span id="delta" | ||
| class="delta down">(-17,76%)</span></h5> | ||
| <h6 id="priceBTC" class="card-subtitle mb-2 text-muted">1,0 BTC</h6> | ||
| <table class="table"> | ||
| <tr> | ||
| <th> | ||
| Volume (24h) | ||
| </th> | ||
| <td id="volume24h" class="text-right"> | ||
| € 6425023877,82 | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th> | ||
| Market cap | ||
| </th> | ||
| <td id="marketCap" class="text-right"> | ||
| € 96418467361 | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th> | ||
| Total supply | ||
| </th> | ||
| <td id="totalSupply" class="text-right"> | ||
| 16848037.0 | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th> | ||
| Max supply | ||
| </th> | ||
| <td id="maxSupply" class="text-right"> | ||
| 21000000.0 | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| <div class="card-footer text-muted text-right"> | ||
| <a id="lnkCoinmarketcap" href="https://coinmarketcap.com/currencies/bitcoin" target="_blank" | ||
| class="card-link">more details on coinmarketcap »</a> | ||
| </div> | ||
| </main> | ||
|
|
||
| <div id="coinDetail" class="modal fade" tabindex="-1"> | ||
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 id="currencyHeader" class="modal-title"> | ||
| ##HEADER## | ||
| </h5> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <span id="currencyPrice" class="price">€1</span> | ||
| <span id="currencyChange" class="change">1.05%</span> | ||
| <table class="table"> | ||
| <tr> | ||
| <th> | ||
| Volume (24h) | ||
| </th> | ||
| <td id="volume24h" class="text-right"> | ||
| ##VOLUME24H## | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th> | ||
| Market cap | ||
| </th> | ||
| <td id="marketCap" class="text-right"> | ||
| ##MARKETCAP## | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th> | ||
| Total supply | ||
| </th> | ||
| <td id="totalSupply" class="text-right"> | ||
| ##TOTALSUPPLY## | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <th> | ||
| Max supply | ||
| </th> | ||
| <td id="maxSupply" class="text-right"> | ||
| ##MAXSUPPLY## | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <a href="#" id="lnkCoinmarketcap" class="btn btn-secondary" target="_blank">Meer details</a> | ||
| <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| function formatEuro(value) { | ||
| return Math.round(value * 100) / 100; | ||
| } | ||
|
|
||
| function getFirstProperty(obj){ | ||
| return obj[Object.keys(obj)[0]]; | ||
| } |