pvitkovsky
3/22/2019 - 8:04 AM

Convertor // source https://jsbin.com/fuzaxot

Convertor

// source https://jsbin.com/fuzaxot

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Convertor</title>
</head>
<body>
  <input id = "volume"> </input>
  <select id = "from"> </select>
  <span id = "result"></span>
  <select id = "to"></select>
<script id="jsbin-javascript">
let xhr = new XMLHttpRequest();
let url = 'https://api.exchangeratesapi.io/latest';
let rates; //Global variable;

xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState != 4) {
        return;
    }
    let apiObj = JSON.parse(xhr.response);
    rates = apiObj.rates;
    rates[apiObj.base] = 1; //Rhino 6.2: ex rates["MYLOVE"] = 999;
    let currencies = Object.keys(rates);
    fillSelect(currencies, from);
    fillSelect(currencies, to);

});
xhr.open("GET", url);
xhr.send();

from.addEventListener("change", setResult); // passing function as function;
to.addEventListener("change", setResult);
volume.addEventListener("change", setResult);

function setResult() {
    result.innerText = volume.value * rates[to.value] / rates[from.value]
};

function fillSelect(arr, sel) {
    sel.innerHTML = "";
    arr.forEach((a) => {
        let opt = document.createElement("option")
        opt.innerText = a;
        sel.appendChild(opt);
    })
}
</script>



<script id="jsbin-source-javascript" type="text/javascript">let xhr = new XMLHttpRequest();
let url = 'https://api.exchangeratesapi.io/latest';
let rates; //Global variable;

xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState != 4) {
        return;
    }
    let apiObj = JSON.parse(xhr.response);
    rates = apiObj.rates;
    rates[apiObj.base] = 1; //Rhino 6.2: ex rates["MYLOVE"] = 999;
    let currencies = Object.keys(rates);
    fillSelect(currencies, from);
    fillSelect(currencies, to);

});
xhr.open("GET", url);
xhr.send();

from.addEventListener("change", setResult); // passing function as function;
to.addEventListener("change", setResult);
volume.addEventListener("change", setResult);

function setResult() {
    result.innerText = volume.value * rates[to.value] / rates[from.value]
};

function fillSelect(arr, sel) {
    sel.innerHTML = "";
    arr.forEach((a) => {
        let opt = document.createElement("option")
        opt.innerText = a;
        sel.appendChild(opt);
    })
}</script></body>
</html>
jsbin.fuzaxot.js
content_copyfile_download
let xhr = new XMLHttpRequest();
let url = 'https://api.exchangeratesapi.io/latest';
let rates; //Global variable;

xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState != 4) {
        return;
    }
    let apiObj = JSON.parse(xhr.response);
    rates = apiObj.rates;
    rates[apiObj.base] = 1; //Rhino 6.2: ex rates["MYLOVE"] = 999;
    let currencies = Object.keys(rates);
    fillSelect(currencies, from);
    fillSelect(currencies, to);

});
xhr.open("GET", url);
xhr.send();

from.addEventListener("change", setResult); // passing function as function;
to.addEventListener("change", setResult);
volume.addEventListener("change", setResult);

function setResult() {
    result.innerText = volume.value * rates[to.value] / rates[from.value]
};

function fillSelect(arr, sel) {
    sel.innerHTML = "";
    arr.forEach((a) => {
        let opt = document.createElement("option")
        opt.innerText = a;
        sel.appendChild(opt);
    })
}