UNPKG

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