simple-squiggle

A restricted subset of Squiggle
Log | Files | Refs | README

currency_conversion.html (3319B)

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="utf-8">
      5   <title>math.js | currency conversion</title>
      6 
      7   <script src="../../lib/browser/math.js"></script>
      8 
      9   <style>
     10     body,
     11     html,
     12     input {
     13       font-size: 11pt;
     14       font-family: verdana, arial, sans-serif;
     15       color: #4d4d4d;
     16       max-width: 600px;
     17     }
     18 
     19     h1 {
     20       font-size: 120%;
     21     }
     22 
     23     input {
     24       padding: 5px;
     25       width: 400px;
     26     }
     27     button {
     28       padding: 5px;
     29     }
     30   </style>
     31 </head>
     32 <body>
     33 
     34 <h1>Currency conversion with math.js</h1>
     35 
     36 <p>
     37   This example demonstrates how you can fetch actual currencies from <a href="https://fixer.io">fixer.io</a> and use them in math.js.
     38 </p>
     39 
     40 <p>
     41   Create a (free) account at <a href="https://fixer.io">fixer.io</a> and fill in your API access key below:
     42 </p>
     43 
     44 <form id="fetchForm">
     45     <input type="text" id="apiKey" placeholder="fixer.io API access key..." />
     46     <button type="submit" id="ok">Fetch currencies</button>
     47 </form>
     48 
     49 <p id="info">
     50 </p>
     51 <div id="form" style="display: none;">
     52   <p>
     53     <label for="expr">Enter an expression with currencies:</label>
     54   </p>
     55   <p>
     56     <input id="expr" value="5 EUR + 2 * 3 EUR in USD" /><br/>
     57   </p>
     58   <p id="result"></p>
     59 </div>
     60 
     61 <script>
     62   const accessKey = document.getElementById('apiKey')
     63   const fetchForm = document.getElementById('fetchForm')
     64 
     65   fetchForm.onsubmit = function (event) {
     66     event.preventDefault()
     67 
     68     document.getElementById('info').innerHTML = 'Fetching currencies...'
     69 
     70     fetchAndImportCurrencies(accessKey.value)
     71       .then(function (currencies) {
     72         document.getElementById('expr').oninput = evaluate
     73         document.getElementById('form').style.display = ''
     74         document.getElementById('info').innerHTML = 'Available currencies: ' + currencies.join(', ')
     75 
     76         evaluate()
     77       })
     78       .catch(function (err) {
     79         console.error(err)
     80         document.getElementById('info').innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
     81       })
     82   }
     83 
     84   function fetchAndImportCurrencies (accessKey) {
     85     // fetch actual currency conversion rates
     86     return fetch('http://data.fixer.io/api/latest?access_key=' + accessKey)
     87       .then(function (response) {
     88         return response.json()
     89       })
     90       .then(function (data) {
     91         if (data.success) {
     92           // import the currencies
     93           math.createUnit(data.base)
     94           Object.keys(data.rates)
     95             .filter(function (currency) {
     96               return currency !== data.base
     97             })
     98             .forEach(function (currency) {
     99               math.createUnit(currency, math.unit(1 / data.rates[currency], data.base))
    100             })
    101 
    102           // return an array with all available currencies
    103           return Object.keys(data.rates).concat(data.base)
    104         }
    105         else {
    106           throw new Error(data.error.info)
    107         }
    108       })
    109   }
    110 
    111   function evaluate () {
    112     const expr = document.getElementById('expr')
    113     const result = document.getElementById('result')
    114 
    115     try {
    116       const resultStr = math.format(math.evaluate(expr.value), {notation: 'fixed', precision: 2})
    117       result.innerHTML = '<span style="color: dodgerblue;">' + resultStr + '</span>'
    118     }
    119     catch (err) {
    120       result.innerHTML = '<span style="color: red;">' + err.toString() + '</span>'
    121     }
    122   }
    123 </script>
    124 </body>
    125 </html>