Forex data Client

by rahulkhanna

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="	https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="	https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>

<div class="col-lg-12 col-12" id="forex-quotes" >


      <table  v-if="window.width > 1024" class="table "  style=" border: 1px solid #ededed; height: 10px !important; padding:10px 10px !important;" >
             <thead style=" height: 10px !important; padding:0px 0px !important;">
               <tr style="height: 10px !important; padding:0px 0px !important;">
                 <th scope="col">Currency Pair </th>
                 <th scope="col">Bid</th>
                 <th v-if="window.width > 600" scope="col">Ask</th>
                 <th scope="col">Net Change</th>
                 <th scope="col">% Change</th>
                 <th v-if="window.width > 600" scope="col">Open</th>
                 <th v-if="window.width > 600" scope="col">High</th>
                 <th v-if="window.width > 600" scope="col">Low</th>
               </tr>
             </thead>
             <tbody style=" height: 10px !important; padding:0px 0px !important;"  v-for="(item, key, index) in quotesdata">
               <tr style=" height: 10px !important; padding:0px 0px !important;">
                 <th  scope="row" >
                   <a style="text-decoration: underline;color:black;" :title="'Open '+key+' live rates'"...

JavaScript

var vm3 = new Vue({
         el: "#forex-quotes",
         delimiters: ['[[', ']]'],
         component: [
           'quot'
         ],
         data () {
             return {
               quotes:[{"id": "EURUSD", "open": 0, "high": 0, "low": 0},
          {"id": "EURGBP", "open": 0, "high": 0, "low": 0},
          {"id": "GBPUSD", "open": 0, "high": 0, "low": 0},
          {"id": "AUDUSD", "open": 0, "high": 0, "low": 0},
          {"id": "USDJPY", "open": 0, "high": 0, "low": 0},
          {"id": "EURJPY", "open": 0, "high": 0, "low": 0},
          {"id": "USDZAR", "open": 0, "high": 0, "low": 0},
          {"id": "USDSEK", "open": 0, "high": 0, "low": 0},
          {"id": "NZDUSD", "open": 0, "high": 0, "low": 0},
          {"id": "USDCAD", "open": 0, "high": 0, "low": 0},
          {"id": "USDCHF", "open": 0, "high": 0, "low": 0},
          {"id": "AUDJPY", "open": 0, "high": 0, "low": 0},
          {"id": "AUDNZD", "open": 0, "high": 0, "low": 0},
          {"id": "EURCHF", "open": 0, "high": 0, "low": 0},
          {"id": "USDRUB", "open": 0, "high": 0, "low": 0}],
               quotesdata:{"EURUSD": {"ask": 0, "base_currency": "", "bid": 0, "mid": 0, "quote_currency": "", "timestamp": "",
                         "styleObject": {"color": "black"}},
              "EURGBP": {"ask": 0, "base_currency": "", "bid": 0, "mid": 0, "quote_currency": "", "timestamp": "",
                         "styleObject": {"color": "black"}},
              "GBPUSD": {"ask": 0, "base_currency": "", "bid": 0, "mid": 0, "quote_currency": "", "timestamp": "",
                         "styleObject": {"color": "black"}},
              "AUDUSD": {"ask": 0, "base_currency": "", "bid": 0, "mid": 0, "quote_currency": "", "timestamp": "",
                         "styleObject": {"color": "black"}},
              "USDJPY": {"ask": 0, "base_currency": "", "bid": 0, "mid": 0, "quote_currency": "", "timestamp": "",
                         "styleObject": {"color": "black"}},
            ...