How to build an application that displays stock information and financial data with Jquery - 2

in #utopian-io • 6 years ago

Repository

https://github.com/jquery/jquery

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><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="./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.

financia-data-15.PNG

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 =  `<tr><td>${name}</td><td>${symbol}</td><td>${price}</td><td>${marketCap}</td><td>${dailyChangePercentage}</td></tr>`;

            cryptoData = cryptoData + tableRow;
        })

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

Save the file and reload the page.

financia-data-16.PNG

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><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="./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

financia-data-20.PNG

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 =  `<tr><td>${symbol}</td><td>${open}</td><td>${ask}</td><td>${bid}</td><td>${high}</td><td>${low}</td><td>${changes}</td><td>${date}</td></tr>`;

            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.

financia-data-21.PNG

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><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="./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.

financia-data-22.PNG

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 =  `<tr><td>${indexName}</td><td>${symbol}</td><td>${price}</td><td>${changes}</td></tr>`;

            indexesData = indexesData + tableRow;
        })

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

Save both files and reload the page.

financia-data-23.PNG

Curriculum

Proof of Work Done

https://github.com/olatundeee/financial-data-app

#tutorial #programming #finance #busy
6 years ago in #utopian-io by
$11.99
  • Past Payouts $11.99
  • - Author $8.88
  • - Curators $3.11
41 votes
Reply 6
Sort:  
  • Trending
    • [-]
     6 years ago 

    Thank you for your contribution @gotgame.
    After analyzing your tutorial we suggest the following points below:

    • Again your tutorial is well structured and explained. You've done a good job!

    • The images that contain inspector data are too small. Zoom the data in the next tutorial.

    • Thanks for following our suggestions in your previous tutorial. Your contribution has become more interesting.

    • It would be interesting to put cryptocurrencies buying data and then show earnings and loss estimates.

    Thank you for your work in developing this tutorial.
    Looking forward to your upcoming tutorials.

    Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

    To view those questions and the relevant answers related to your post, click here.

    Need help? Chat with us on Discord.

    [utopian-moderator]

    [-]
     6 years ago 

    Thank you for your review, @portugalcoin! Keep up the good work!

    $0.00
      Reply
      [-]
       6 years ago 

      As a follower of @followforupvotes this post has been randomly selected and upvoted! Enjoy your upvote and have a great day!

      $0.00
        Reply
        [-]
         6 years ago 

        Hi @gotgame!

        Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
        Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
        Feel free to join our @steem-ua Discord server

        $0.00
          Reply
          [-]
           6 years ago 

          Hi, @gotgame!

          You just got a 0.17% upvote from SteemPlus!
          To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
          If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

          $0.00
            Reply
            [-]
             6 years ago 

            Hey, @gotgame!

            Thanks for contributing on Utopian.
            We’re already looking forward to your next contribution!

            Get higher incentives and support Utopian.io!
            Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

            Want to chat? Join us on Discord https://discord.gg/h52nFrV.

            Vote for Utopian Witness!

            $0.00
              Reply