UNPKG

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