Lightweight Forex Ticker Widget In jQuery - forex-ticker.js

forex-ticker.js is a jQuery plugin for creating a compact Forex Ticker Widget to show the real-time forex tick data & currency exchange rates using 1forge.com's API. Current supports 500 forex currency pairs and commodities.

How to use it:

1. Put the forex-ticker.css in the header of the webpage that will provide the basic styles for the Forex Ticker Widget.

<link rel="stylesheet" href="css/forex-ticker.css">

2. Put both jQuery library and the forex-ticker.js at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/forex-ticker.js"></script>

3. Add the forex currency pairs you want to convert between into the Forex Ticker Widget.

<div class="forex-ticker">
  <table>
    <tr>
        <td class="currency-pair">
            EUR/USD
        </td>
        <td class="price" data-currency-pair="EURUSD">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td class="currency-pair">
            USD/JPY
        </td>
        <td class="price" data-currency-pair="USDJPY">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td class="currency-pair">
            GBP/USD
        </td>
        <td class="price" data-currency-pair="GBPUSD">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td class="currency-pair">
            USD/CHF
        </td>
        <td class="price" data-currency-pair="USDCHF">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td class="currency-pair">
            AUD/JPY
        </td>
        <td class="price" data-currency-pair="AUDJPY">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td class="currency-pair">
            EUR/JPY
        </td>
        <td class="price" data-currency-pair="EURJPY">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>
    <tr>
        <td class="currency-pair">
            GBP/AUD
        </td>
        <td class="price" data-currency-pair="GBPAUD">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>

    <tr>
        <td class="currency-pair">
            EUR/NZD
        </td>
        <td class="price" data-currency-pair="EURNZD">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>

    <tr>
        <td class="currency-pair">
            GBP/CHF
        </td>
        <td class="price" data-currency-pair="GBPCHF">
            <div class="top">

            </div>
            <div class="bottom">
                <span class="first"></span><span class="last"></span>
            </div>
        </td>
    </tr>
  </table>
</div>

4. Create a new Forex Ticker instance and done.

new ForexTicker();

---

This awesome jQuery plugin is developed by 1forge. For more Advanced Usages, please check the demo page or visit the official website.