Merge pull request #24 from fac-13/api-call

Api call

public/css/style.css

@@ -1,4 +1,8 @@
+
+@import url('https://rsms.me/inter/inter-ui.css');
+
 html {
+  font-family: 'Inter UI', sans-serif;
 }
 
 body {
@@ -46,6 +50,45 @@ width: 100%;
 }
 .coin__logo {
 }
+
+.coin-article {
+  background-color: lightGray;
+  width: 400px;
+  margin: 9vh auto;
+  padding: 15px;
+}
+
+.coin-article__header {
+  background-color: skyblue;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  font-size: 2em;
+}
+
+.coin-article__header img {
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+}
+
+.coin-article__header h1 {
+margin: auto;
+}
+
+.coin-article__body {
+
+}
+
+.coin-article__body div{
+  border: black solid 1px; 
+  padding: 10px;
+}
+
+.coin-article__footer {
+  background-color: gray;
+}
+
 /* .footer__container {}
 .error {}
 .error__desc {}

src/controllers/coin.js

@@ -1,13 +1,37 @@
+const request = require('request');
 const coinDetial = require('./../model/queries/get_coin_details');
 
+function appendApiData(url, callback) {
+  request(url, function(error, response, body) {
+    if (error) callback(error);
+    else {
+      callback(null, body);
+    }
+  })
+}
+
+function addHyphen(thing) {
+  return thing.replace(' ', '-');
+}
+
 exports.get = (req, res, next) => {
   const { coinSym } = req.params;
   coinDetial(coinSym)
     .then(coinRecord => {
       if (coinRecord && coinRecord.length > 0) {
         coinRecord = coinRecord[0];
-        console.log(coinRecord);
-        return res.render('coindetail', { coinRecord });
+        appendApiData(`https://api.coinmarketcap.com/v1/ticker/${addHyphen(coinRecord.name)}/?convert=GBP`, function(err, result) {
+          if (err) next();
+          else {
+            result = JSON.parse(result); 
+            result = result[0];
+            coinRecord.price_gbp = result.price_gbp;
+            coinRecord.percent_change_1h = result.percent_change_1h;
+            coinRecord.percent_change_24h = result.percent_change_24h;
+            coinRecord.percent_change_7d = result.percent_change_7d;
+            return res.render('coindetail', { coinRecord });
+          }
+        });        
       } else {
         next();
       }

src/views/coindetail.hbs

@@ -1,13 +1,19 @@
-<article>
-  <header>
-    <span style="background-image: url(/images/coins/{{ coinRecord.symbol }})"></span>
+<article class="coin-article">
+  <header class="coin-article__header">
+    <img src="images/coins/{{ coinRecord.symbol }}.svg" />
     <h1>{{ coinRecord.name }}</h1>
   </header>
-  <main>
-    <p>{{ coinRecord.rank }}</p>
-    <p>{{ coinRecord.supply }}</p>
+  <main class="coin-article__body">
+    <p><strong>Rank:</strong> {{ coinRecord.rank }}</p>
+    <p><strong>Supply:</strong> {{ coinRecord.supply }}</p>
+    <p><strong>Price (GBP):</strong> {{ coinRecord.price_gbp }}</p>
+    <div>
+    <p><strong>Change in last hour:</strong> {{ coinRecord.percent_change_1h }}%</p>
+    <p><strong>Change in last day:</strong> {{ coinRecord.percent_change_24h }}%</p>
+    <p><strong>Change in last week:</strong> {{ coinRecord.percent_change_7d }}%</p>
+    </div>
   </main>
-  <footer>
-    <p>{{ coinRecord.symbol }}</p>
+  <footer class="coin-article__footer">
+    <p><strong>Acronym:</strong> {{ coinRecord.symbol }}</p>
   </footer>
 </article>

src/views/home.hbs

@@ -9,7 +9,8 @@
 
     <li class="coin__list--item">
       <a href="/{{this.symbol}}">
-        <div class="coin__logo" style="background-image: url(/images/coins/{{ this.symbol }}.svg)"></div>
+        {{!-- <div class="coin__logo" style="background-image: url(/images/coins/{{ this.symbol }}.svg)"></div> --}}
+        <img src="/images/coins/{{ this.symbol }}.svg"/>
         <span>{{ this.symbol }}</span>
       </a>
     </li>