From 923d38826f05285185c7c9a01d73d935345b4e02 Mon Sep 17 00:00:00 2001 From: Jeffry Steegmans Date: Sun, 13 Dec 2020 22:14:53 +0100 Subject: [PATCH] Change assignment to new CoinmarketCap API --- README.md | 37 +++++++-------- css/style.css | 52 ++++++++++---------- index.html | 128 +++++++++++++++++++++++--------------------------- js/helpers.js | 4 ++ 4 files changed, 106 insertions(+), 115 deletions(-) diff --git a/README.md b/README.md index 6d47610..7dc26e6 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,17 @@ Bouw een applicatie die Crypto data ophaalt van [CoinmarketCap API documentatie](https://coinmarketcap.com/api/documentation/v1/). Hiervoor dien je eerst een API key te genereren op [CoinmarketCap](https://accounts.coinmarketcap.com/signup?r=https%3A%2F%2Fcoinmarketcap.com%2F&utm_source=coinmarketcap&utm_content=nav) +> Aangezien coinmarketCap geen CORS requests toelaat kan je gebruik maken van de proxy op de url: +> +> - +> - +> +> **Hiervoor heb je nog steeds je eigen API-key nodig!** + Hou rekening met de volgende eigenschappen: - Bij het opstarten van de applicatie moeten de volgende stappen uitgevoerd worden - - De div met **ID="card"** moet verborgen worden - - De div met **ID="top10"** moet getoond worden - - De tabel met top 10 munten moet gecreëerd en getoond worden (https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest?CMC_PRO_API_KEY=##API-KEY##&limit=10&convert=eur) + - De tabel met top 10 munten moet gecreëerd en getoond worden Hiervoor dien je per coin het volgende sjabloon toe te voegen aan `````` ```html @@ -21,28 +26,20 @@ Hou rekening met de volgende eigenschappen: € 103.86 € 674197999.62 -28.82% + Klik voor meer details ``` - - Op de knop **btnTop10** moet een eventhandler **'click'** gekoppeld worden die de top 10 coins gaat ophalen en tonen in een tabel - - op de volgende knoppen moet een eventhandler **'click'** gekoppeld worden die een **'card'** genereerd - | Button | coin | slug | id | - | ------------- |---------------|---------------| :----:| - | btnBTC | Bitcoin | bitcoin | 1 | - | btnETH | Ethereum | ethereum | 1027 | - | btnLTC | Litecoin | litecoin | 2 | - | btnADA | Cardano | cardano | 2010 | - | btnNEO | Neo | neo | 1376 | -- Bij het genereren van de 'card' moet je de volgende dingen uitvoeren (https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest?CMC_PRO_API_KEY=##API-KEY##&convert=eur&id=##ID## of https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest?CMC_PRO_API_KEY=##API-KEY##&convert=eur&slug=##SLUG##) - - Het juiste logo weergeven (img/##SYMBOL##.png) & alt text correct invullen - - text in de cardHeader aanpassen - - text van span met **ID="price"** opvullen met de prijs in euro - - text van span met **ID="delta"** opvullen met de change in 24h - - text van span met **ID="priceBTC"** opvullen met de prijs in btc + - Op de image in de laatste kolom moet een **click-handler** gekoppeld worden. Bij het klikken moet de individuele coin data opgehaald worden en getoond in een **modal-venster**. +- Bij het genereren van het 'modal-venster' moet je de volgende dingen uitvoeren + - Het juiste logo weergeven (img/currency/##SYMBOL##.png) & alt text correct invullen + - text in de modalHeader aanpassen + - text van span met **ID="currencyPrice"** opvullen met de prijs in euro + - text van span met **ID="currencyChange"** opvullen met de change in 24h - text van span met **ID="volume24h"** opvullen met het volume in 24h - text van span met **ID="marketCap"** opvullen met de market cap in euro - text van span met **ID="totalSupply"** opvullen met de total supply - text van span met **ID="maxSupply"** opvullen met de max supply - - href van anchor met **ID="lnkCoinmarketcap"** opvullen met de link naar coinmarketcap (https://coinmarketcap.com/nl/currencies/##SLUG##) + - href van anchor met **ID="lnkCoinmarketcap"** opvullen met de link naar coinmarketcap () - De div met **ID="card"** moet getoond worden - - De div met **ID="top10"** moet verborgen worden \ No newline at end of file + - De div met **ID="top10"** moet verborgen worden diff --git a/css/style.css b/css/style.css index c8fd8d9..7118a94 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } diff --git a/index.html b/index.html index cb2fbfb..1de8648 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Crypto watcher + @@ -15,6 +16,7 @@ integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"> + @@ -22,18 +24,6 @@

Crypto watcher

-
@@ -41,71 +31,73 @@

Crypto watcher

- - - - - - + + + + + +
#NameMarket CapPriceVolume (24h)Change (24h)#NameMarket CapPriceVolume (24h)Change (24h)
-
-
-
-
- Bitcoin -
-
-
€ 1000.00 (-17,76%)
-
1,0 BTC
- - - - - - - - - - - - - - - - - -
- Volume (24h) - - € 6425023877,82 -
- Market cap - - € 96418467361 -
- Total supply - - 16848037.0 -
- Max supply - - 21000000.0 -
-
-
- more details on coinmarketcap » -
+ + + \ No newline at end of file diff --git a/js/helpers.js b/js/helpers.js index a52c38c..4b3fb5e 100644 --- a/js/helpers.js +++ b/js/helpers.js @@ -1,3 +1,7 @@ function formatEuro(value) { return Math.round(value * 100) / 100; +} + +function getFirstProperty(obj){ + return obj[Object.keys(obj)[0]]; } \ No newline at end of file