Easy Online Currency Converter In JavaScript

Category: Javascript | September 4, 2020

0 Comment

Demo Download

AUTHOR:	shailesh-satariya
VIEWS TOTAL:	1,910 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	September 4, 2020
LICENSE:	MIT

---

Preview:

Description:

A simple yet configurable, multilingual online currency converter that enables the user to quickly convert money to another currency.

By default, it fetches currency data (Foreign Exchange Rates) from exchangeratesapi.io. You can also change to another currency exchange API such as data.fixer.io.

How to use it:

1. Insert the Currency Converter’s JavaScript and CSS files into your page.

<link href="./dist/currency-converter.css" rel="stylesheet" />
<script src="./dist/currency-converter.js"></script>

2. Create a container to hold the currency converter.

<div id="example"></div>

3. Initialize the currency converter with default options.

currencyConverter("#example");

4. Specify the default input amount. Default: 100.

currencyConverter("#example",{
  baseAmount: 10
});

5. Determine the path to the API. Default: 100.

currencyConverter("#example",{
  currencyApi: 'https://​data.fixer.io/api/​latest'
});

6. Or directly specify the Foreign Exchange Rates in the currencyData. Default: null.

currencyConverter("#example",{
  currencyData: { 
    AUD: 1.6376, 
    BGN: 1.9558, 
    BRL: 6.0777
  }
});

7. Customize the base & target currency names. Default: ‘USD’ and ‘EUR’.

currencyConverter("#example",{
  fromCurrency: 'USD',
  toCurrency: 'AUD'
});

8. Determine the decimal precision. Default: 4.

currencyConverter("#example",{
  precision: 2
});

9. Determine whether to display the currency text. Default: true.

currencyConverter("#example",{
  withText: false
});

10. Localize the currency converter.

currencyConverter("#example",{
   locale: {
      From: "Von",
      To: "Zu",
      INR: "Indian Rupee",
      JPY: "Japanese Yen"
    }
});

11. Execute a function after converted.

currencyConverter("#example",{
  onChange: (data) => console.log(data)
});

12. Override the default CSS classes:

currencyConverter("#example",{
  wrapperClass: null,
  inputFromAmountClass: null,
  inputFromCurrencyClass: null,
  inputToAmountClass: null,
  inputToCurrencyClass: null,
});