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 |
|
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 |
|
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 |
|
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> |
\ | No newline at end of file |