Kursy walut

Kod po stronie przeglądarki

<div id="app">
    <h2 class="my-3 text-center">Tabela kursów walut</h2>
    <table class="table">
        <thead>
            <tr>
                <th>Waluta</th>
                <th>Kod</th>
                <th>Kupno</th>
                <th>Sprzedaż</th>
            </tr>    
        </thead>
        <tbody data-bind="foreach: result">
            <tr>
                <td data-bind="text: currency"></td>
                <td data-bind="text: code"></td>
                <td data-bind="text: bid"></td>
                <td data-bind="text: ask"></td>
            </tr>
        </tbody>
    </table>
    <h2 class="my-3 text-center">Przelicznik walut</h2>
    <div class="row">
        <div class="col">
            <label class="form-label" for="inputValue">Wartość wejściowa</label>
            <input type="number" id="inputValue" class="form-control" data-bind="textInput: inputValue">
        </div>
        <div class="col">
            <label class="form-label" for="inputCurrency">Waluta wejściowa</label>
            <select id="inputCurrency" class="form-select" data-bind="foreach: options, value: selectedOptionFrom">
                <option data-bind="value: $data, text: $data"></option>
            </select> 
        </div>
        <div class="col">
            <label class="form-label" for="outputCurrency">Waluta wyjściowa</label>
            <select id="outputCurrency" class="form-select" data-bind="foreach: options, value: selectedOptionTo">
                <option data-bind="value: $data, text: $data"></option>
            </select> 
        </div>
        <div class="col">
            <label class="form-label" for="outputValue">Wartość wyjściowa</label>
            <input type="text" id="outputValue" class="form-control" data-bind="value: computedOutputValue" readonly>
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {    
var ViewModel = function()
{
    var self = this;
    self.result = ko.observable('');
    self.rates = ko.observableArray([]); 
    self.options = ko.observableArray([]);
    self.selectedOptionFrom = ko.observable('');
    self.selectedOptionTo = ko.observable('');
    self.inputValue = ko.observable('1.00');
    //methods
    self.search = function ()
    {
        var data = {format: 'json'};
        self.result('');
        self.rates([]);
        self.options([]);
        axios.get('https://api.nbp.pl/api/exchangerates/tables/C?format=json').then(function (response) {            
            var obj = {
                currency: 'polski złoty',
                code: 'PLN',
                bid: 1.0000,
                ask: 1.0000
            };            
            var rates = response.data[0].rates;
            self.result(rates);
            rates.push(obj);
            self.rates(rates);

            for (var i = 0; i < rates.length; i++)
            {
                self.options.push(rates[i].code);
            }
            self.selectedOptionFrom('USD');
            self.selectedOptionTo('PLN');
        }).catch(function (error) {
            BootstrapToast.show({title: 'Błąd', message: 'Błąd pobierania danych', when: 'teraz', type: 'text-bg-danger'});
        });
    };
    //computed
    self.computedOutputValue = ko.pureComputed(function() {
        var from = self.selectedOptionFrom();
        var to = self.selectedOptionTo();
        var input = self.inputValue();
                
        if (from == to)
        {
            return parseFloat(input).toFixed(2);  
        }

        var value = 0;
        for (var i = 0; i < self.rates().length; i++)
        {
            var obj = self.rates()[i];
            if (obj.code == from)
            {
                value = input * obj.bid;
                break;
            }
        }
        for (var i = 0; i < self.rates().length; i++)
        {
            var obj = self.rates()[i];
            if (obj.code == to)
            {
                value = value / obj.ask;
                break;
            }
        }
        
        return parseFloat(value).toFixed(2);  
    });
};
var vm = new ViewModel();
ko.applyBindings(vm, document.getElementById('app'));
vm.search();
});    
</script>

Kod po stronie serwera