Create a Cryptocurrency Exchange Rate in Html Part 1

Tuesday, April 20, 2021 • 5 minutes to read

JavascriptHTML2021javascripthtml2021cryptocurrency

This is a series of 3 tutorials in which we will build a cryptocurrency exchange rate dashboard in HTML using materialize css and coinbase free api.

  • Part 1: Simple Cryptocurrency Exchange Rate Dashboard
  • Part 2: Add pagination in cryptocurrency exchange rate
  • Part 3: Change base currency BTC to other currencies like USD, EUR INR.

exchange

Project Setup

Create a cryptocurrency-exchange-rate directory.

1|- cryptocurrency-exchange-rate
2	|- icons
3	|- exchange-rates.js
4	|- index.html
5	|- style.css

Coinbase API

We are using coinbase free to use APIs which don't require any sign up and secret key.

Coinbase Developer API

We are using Exchange Rates API for our use case.

curl https://api.coinbase.com/v2/exchange-rates?currency=BTC

Example Response

 1{
 2  "data": {
 3    "currency": "BTC",
 4    "rates": {
 5      "AED": "36.73",
 6      "AFN": "589.50",
 7      "ALL": "1258.82",
 8      "AMD": "4769.49",
 9      "ANG": "17.88",
10      ...
11    }
12  }
13}

Default base currency is BTC

index.html

Create an index.html file and paste the code.

  1<!DOCTYPE html>
  2<html lang="en">
  3  <head>
  4    <meta charset="UTF-8" />
  5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7    <link
  8      rel="apple-touch-icon"
  9      sizes="180x180"
 10      href="/icons/apple-touch-icon.png"
 11    />
 12    <link
 13      rel="icon"
 14      type="image/png"
 15      sizes="32x32"
 16      href="/icons/favicon-32x32.png"
 17    />
 18    <link
 19      rel="icon"
 20      type="image/png"
 21      sizes="16x16"
 22      href="/icons/favicon-16x16.png"
 23    />
 24    <link rel="manifest" href="/icons/site.webmanifest" />
 25    <!-- Compiled and minified CSS -->
 26    <link
 27      rel="stylesheet"
 28      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
 29    />
 30    <link rel="preconnect" href="https://fonts.gstatic.com" />
 31    <link
 32      href="https://fonts.googleapis.com/icon?family=Material+Icons"
 33      rel="stylesheet"
 34    />
 35
 36    <link rel="stylesheet" href="./style.css" />
 37
 38    <!-- Compiled and minified JavaScript -->
 39    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 40    <script src="./exchange-rates.js"></script>
 41    <script>
 42      // onload
 43      window.addEventListener("load", getExchangeRates);
 44    </script>
 45    <title>Cryptocurrency Exchage Rates</title>
 46  </head>
 47  <body>
 48    <div class="container">
 49      <span>
 50        <header>
 51          <i class="large material-icons" style="vertical-align: text-bottom"
 52            >compare_arrows</i
 53          >
 54          Cryptocurrency Exchage Rates
 55        </header></span
 56      >
 57      <main>
 58        <div class="row">
 59          <div class="col s4">
 60            <div class="card-panel purple lighten-1">
 61              <span id="usd" class="white-text"> </span>
 62            </div>
 63          </div>
 64          <div class="col s4">
 65            <div class="card-panel purple lighten-1">
 66              <span id="inr" class="white-text"> </span>
 67            </div>
 68          </div>
 69          <div class="col s4">
 70            <div class="card-panel purple lighten-1">
 71              <span id="eur" class="white-text"> </span>
 72            </div>
 73          </div>
 74        </div>
 75
 76        <div class="row">
 77          <table>
 78            <thead>
 79              <!-- <th>#</th> -->
 80              <th>Currency</th>
 81              <th>Rate</th>
 82            </thead>
 83            <tbody id="ratetable"></tbody>
 84          </table>
 85        </div>
 86      </main>
 87
 88      <footer class="center">
 89        <div class="footer-copyright">
 90          <div class="container">
 91            Made with <span style="color: red">❤️</span> by
 92            <a href="https://schadokar.dev">schadokar</a>
 93          </div>
 94          <div class="container">
 95            Ingredients <span> 🧪</span> html, css and
 96            <a href="https://materializecss.com/">material ui</a>
 97          </div>
 98          <div class="container">
 99            <a
100              href="https://github.com/day-to-day-coding/html-cryptocurrency-rates/"
101              ><i class="material-icons">developer_mode</i></a
102            >
103          </div>
104        </div>
105      </footer>
106    </div>
107  </body>
108</html>

style.css

Create a style.css and paste the code.

 1body {
 2  background-color: white;
 3  color: black;
 4  background-size: auto;
 5  background-repeat: no-repeat;
 6  display: flex;
 7  flex-direction: column;
 8}
 9
10header {
11  font-size: xx-large;
12  margin-bottom: 50px;
13}
14
15main {
16  flex: 1 0 auto;
17}
18
19input {
20  font-family: "Pacifico", cursive;
21}
22
23.vertical-divider {
24  border-left: 1px solid gray;
25}
26
27.page-footer .footer-copyright {
28  background-color: white;
29}

exchange-rates.js

Create a exchange-rates.js for the logic and paste the code.

 1function getExchangeRates(event, baseCurrency = "BTC") {
 2  var requestOptions = {
 3    method: "GET",
 4    redirect: "follow",
 5  };
 6
 7    // call the api
 8  fetch(
 9    `http://api.coinbase.com/v2/exchange-rates?currency=${baseCurrency}`,
10    requestOptions
11  )
12    .then((response) => response.json())
13    .then((result) => {
14      // render cards
15      renderCards(result.data.rates, baseCurrency);
16      // render currency table
17      renderCurrencyTable(result.data.rates, baseCurrency);
18    })
19    .catch((error) => console.log("error", error));
20}
21
22function renderCards(rates, baseCurrency) {
23  // Get the usd card
24  document.getElementById(
25    "usd"
26  ).innerHTML = `1 ${baseCurrency} \t=\t &#36 ${rates["USD"]}`;
27
28  // Get the inr card
29  document.getElementById(
30    "inr"
31  ).innerHTML = `1 ${baseCurrency} \t=\t &#x20B9 ${rates["INR"]}`;
32
33  // Get the eur card
34  document.getElementById(
35    "eur"
36  ).innerHTML = `1 ${baseCurrency} \t=\t &#8364 ${rates["EUR"]}`;
37}
38
39function renderCurrencyTable(rates, baseCurrency) {
40  // get the tbody element
41  const tbodyElement = document.getElementById("ratetable");
42  tbodyElement.textContent = "";
43
44  for (let i = 0; i < Object.keys(rates).length; i++) {
45    const currency = Object.keys(rates)[i];
46    // create a new table row element
47    const tr = document.createElement("tr");
48    tr.id = currency;
49    // create currency column
50    const currencyTd = document.createElement("td");
51    currencyTd.textContent = `1 ${baseCurrency}`;
52    // create rate column
53    const rateTd = document.createElement("td");
54    rateTd.textContent = `${rates[currency]} ${currency}`;
55    tr.appendChild(currencyTd);
56    tr.appendChild(rateTd);
57    tbodyElement.appendChild(tr);
58  }
59}

favicons

You can create custom favicon on favicon.io and save in icons folder.

You can download this app's icons from GitHub.

Run

Open the index.html in the browser and test it.

To run it as server, install serve using npm install --global serve. Install nodejs first to run npm command.

Open the terminal or cmd in the project and run serve.

This will start a server at localhost:5000 and serve index.html.

Host it

You can host it on GitHub Pages.

Create a cryptocurrency-exchange-rate repository on the GitHub. You can name it anything.

Open the terminal or cmd in the project and instantiate git init.

Stage and commit the code.

1git init
2git add .
3git commit -m 'crypto exchange part 1 is complete'

Open GitHub repo and copy the repo URL. Add it as origin and push the code to the GitHub.

1git remote add origin https://github.com/<Your username>/<repo name>.git
2git branch -M main
3git push -u origin main

Open the GitHub repo settings and go to pages.

Under Source, select the main branch, /root folder and save it.

The app is now live at

1https://<Your Username>.github.io/<your repo name>/

JavascriptHTML2021javascripthtml2021cryptocurrency

PreviousWhat is RSS feed, RSS reader and Should I use it

NextCreate a Task List in Html