Currency conversion

File: currency_conversion.html (click for a live demo)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>math.js | currency conversion</title>

  <script src="https://unpkg.com/mathjs@12.4.1/lib/browser/math.js"></script>

  <style>
    body,
    html,
    input {
      font-size: 11pt;
      font-family: verdana, arial, sans-serif;
      color: #4d4d4d;
      max-width: 600px;
    }

    h1 {
      font-size: 120%;
    }

    input {
      padding: 5px;
      width: 400px;
    }
    button {
      padding: 5px;
    }
  </style>
</head>
<body>

<h1>Currency conversion with math.js</h1>

<p>
  This example demonstrates how you can fetch actual currencies from <a href="https://fixer.io">fixer.io</a> and use them in math.js.
</p>

<p>
  Create a (free) account at <a href="https://fixer.io">fixer.io</a> and fill in your API access key below:
</p>

<form id="fetchForm">
    <input type="text" id="apiKey" placeholder="fixer.io API access key..." />
    <button type="submit" id="ok">Fetch currencies</button>
</form>

<p id="info">
</p>
<div id="form" style="display: none;">
  <p>
    <label for="expr">Enter an expression with currencies:</label>
  </p>
  <p>
    <input id="expr" value="5 EUR + 2 * 3 EUR in USD" /><br/>
  </p>
  <p id="result"></p>
</div>

<script>
  const accessKey = document.getElementById('apiKey')
  const fetchForm = document.getElementById('fetchForm')

  fetchForm.onsubmit = function (event) {
    event.preventDefault()

    document.getElementById('info').innerHTML = 'Fetching currencies...'

    fetchAndImportCurrencies(accessKey.value)
      .then(function (currencies) {
        document.getElementById('expr').oninput = evaluate
        document.getElementById('form').style.display = ''
        document.getElementById('info').innerHTML = 'Available currencies: ' + currencies.join(', ')

        evaluate()
      })
      .catch(function (err) {
        console.error(err)
        document.getElementById('info').innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
      })
  }

  function fetchAndImportCurrencies (accessKey) {
    // fetch actual currency conversion rates
    return fetch('http://data.fixer.io/api/latest?access_key=' + accessKey)
      .then(function (response) {
        return response.json()
      })
      .then(function (data) {
        if (data.success) {
          // import the currencies
          math.createUnit(data.base)
          Object.keys(data.rates)
            .filter(function (currency) {
              return currency !== data.base
            })
            .forEach(function (currency) {
              math.createUnit(currency, math.unit(1 / data.rates[currency], data.base))
            })

          // return an array with all available currencies
          return Object.keys(data.rates).concat(data.base)
        }
        else {
          throw new Error(data.error.info)
        }
      })
  }

  function evaluate () {
    const expr = document.getElementById('expr')
    const result = document.getElementById('result')

    try {
      const resultStr = math.format(math.evaluate(expr.value), {notation: 'fixed', precision: 2})
      result.innerHTML = '<span style="color: dodgerblue;">' + resultStr + '</span>'
    }
    catch (err) {
      result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
    }
  }
</script>
</body>
</html>