How to build an application that displays stock information and fin...

Repository

What Will I Learn?

By the end of this tutorial the user will know how to build an application that displays stock information and real time financial data for different companies.

Requirements

In order to be able to follow this tutorial the user has to be able to use the following

HTML/CSS/MaterializeCSS
JavaScript/JQuery
Financial Modeling Prep public api
AxiosJS

Difficulty

Intermediate

Tutorial Contents

In this post we are going to continue working on the financial data application that I started in the last post.

By the end of this post we would have added the following features to the app

A live feed of different cryptocurrencies and their prices.
A live feed of fiat currency exchange rates
A live feed of major indexes including Nasdaq, Dow Jones e.t.c

On the front end I am using HTML/CSS and JQuery to develop the interface, I will also be using AxiosJS to handle the HTTP requests.

In the last tutorial we already created the index.html, data.js and style.css file. In this post, we'll still be writing all our javascript and jQuery code in data.js.

Live cryptocurrencies feed

In the project directory, create a file cryptocurrencies.html and initialize the file with the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style.css">
    <title>View real time financial data</title>
</head>
<body>

    <script src="./jquery.js"></script>/cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
    ./axios.js"></script>
    <script src="./data.js"></script>
</body>
</html>

In data.js, we need to firstly view the data in the browser console, to do that we will send a request to Financial Modeling Prep api for the data.

Add the following code inside the $(document).ready(function() {}) block below the requests we created in the last tutorial.

axios.get('https://financialmodelingprep.com/api/v3/cryptocurrencies').then(response => {
        console.log(response);
    }).catch(err => {
        console.log(err);
    })

Save the file and load the html page then view the browser console.

In cryptocurrencies.html, on the line directly after the opening <body> tag add the following code to display the cryptocurrencies table.

<div class="card data-card">
 <div class="card-content">
  <span class="card-title">Cryptocurrency Prices</span>
  <p>
   <table class="striped">
    <thead>
     <tr>
      <td>Name</td>
      <td>Symbol</td>
      <td>Price</td>
      <td>Market Cap</td>
      <td>24hr Change</td>
     </tr>
    </thead>
    <tbody class="cryptocurrency-price"></tbody>
   </table>
  </p>
 </div>
</div>

In data.js, replace the line console.log(response); with the following code

const responseArray = response.data.cryptocurrenciesList;

        let cryptoData = ``;

        // sort response into table

        responseArray.forEach(oneresponse => {
            const symbol = oneresponse.ticker;
            const name = oneresponse.name;
            const price = oneresponse.price;
            const marketCap = oneresponse.marketCapitalization;
            const dailyChangePercentage = oneresponse.changes;

            const tableRow =  `${name}${symbol}${price}${marketCap}${dailyChangePercentage}`;

            cryptoData = cryptoData + tableRow;
        })

        document.getElementById('cryptocurrency-list').innerHTML = cryptoData;

Save the file and reload the page.

Each cryptocurrency displays the following details

Cryptocurrency symbol
Cryptocurrency name
Cryptocurrency price
Cryptocurrency market capitalization
Cryptocurrency 24hr change percentage

Live fiat currency exchange rate feed

In this section we will add a live feed for the exchange rates of fiat currencies, to start we need to create a new file fiat-currencies.html in the project root directory.

We are going to initialize the file with the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style.css">
    <title>View real time financial data</title>
</head>
<body>

    <script src="./jquery.js"></script>/cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
    ./axios.js"></script>
    <script src="./data.js"></script>
</body>
</html>

in data.js, we'll send a request in order to view the data in the console. Add the following code in data.js

// send request for all fiat currencies live feed 

    axios.get('https://financialmodelingprep.com/api/v3/forex').then(response => {
        console.log(response.data.forexList);
    }).catch(err => {
        console.log(err);
    });

Save both files and load the page, the view the browser console

Before we can display the data it has to be formatted into html and inserted into the page.

In order to format the data into html, replace the line console.log(response.data.forexList); with the following code.

const responseArray = response.data.cryptocurrenciesList;

        let fiatData = ``;

        // sort response into table

        responseArray.forEach(oneresponse => {
            const symbol = oneresponse.ticker;
            const open = oneresponse.open;
            const ask = oneresponse.ask;
            const bid = oneresponse.bid;
            const high = oneresponse.high;
            const low = oneresponse.low;
            const changes = oneresponse.changes;
            const date = oneresponse.date;

            const tableRow =  `${symbol}${open}${ask}${bid}${high}${low}${changes}${date}`;

            fiatData = fiatData + tableRow;
        })

        document.getElementById('fiat-list').innerHTML = fiatData;

In fiat-currencies.html on the line directly after the opening body tag add the following code

<div class="card data-card">
 <div class="card-content">
  <span class="card-title">Forex Prices</span>
  <p>
   <table class="striped">
    <thead>
     <tr>
      <td>Symbol</td>
      <td>Opening Price</td>
      <td>Ask Price</td>
      <td>Bid Price</td>
      <td>High</td>
      <td>Low</td>
      <td>Changes</td>
      <td>Date</td>
     </tr>
    </thead>
    <tbody id="fiat-list"></tbody>
   </table>
  </p>
 </div>
</div>

Save both files and reload the page.

Live feed of major indexes

In this section we'll be outputting the live feed of major financial indexes in the market, like all other sections we'll first view our data in the console to see if it is the right data.

Create a new file in the root directory major-indexes.html and initialize it with the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="./style.css">
    <title>View real time financial data</title>
</head>
<body>

    <script src="./jquery.js"></script>/cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
    ./axios.js"></script>
    <script src="./data.js"></script>
</body>
</html>

In data.js, add the following code to send the request.

// send request for all major indexes live feed 

    axios.get('https://financialmodelingprep.com/api/v3/majors-indexes').then(response => {
        console.log(response.data.majorIndexesList)
    }).catch(err => {
        console.log(err);
    })

Save both files, load the page then view the browser console, you should get data identical to the image below.

In order to display the data we need to add the following code in major-indexes.html on the line directly after the opening body tag.

<div class="card data-card">
 <div class="card-content">
  <span class="card-title">Cryptocurrency Prices</span>
  <p>
   <table class="striped">
    <thead>
     <tr>
      <td>Name</td>
      <td>Symbol</td>
      <td>Price</td>
      <td>Changes(%)</td>
     </tr>
    </thead>
    <tbody id="major-indexes-list"></tbody>
   </table>
  </p>
 </div>
</div>

In data.js, replace the line console.log(response.data.majorIndexesList) with the following code

const responseArray = response.data.majorIndexesList;

        let indexesData = ``;

        // sort response into table

        responseArray.forEach(oneresponse => {
            const indexName = oneresponse.indexName;
            const symbol = oneresponse.ticker;
            const price = oneresponse.price;
            const changes = oneresponse.changes;

            const tableRow =  `${indexName}${symbol}${price}${changes}`;

            indexesData = indexesData + tableRow;
        })

        document.getElementById('major-indexes-list').innerHTML = indexesData;