Kalkulator walut

0

Mam problem z api NBP, napisałem taki kodzik w HTML'u

<div class="jumbotron">
    <div class="container">
        <h2>Currency Calculator</h2>
        <p class="lead">Convert the currency</p>
        <form class="form-inline">
            <div class="form-group mb-2">
                <input type="number" class="form-control" id="amount" min="0"/>
            </div>
            <div class="form-group mx-sm-3 mb-2">
                <select class="form-control" id="currency-1" required>
                    <option>PLN</option>
                    <option>EUR</option>
                    <option>USD</option>
                </select>
            </div>
            <div class="form-group mx-sm-3 mb-2">
                <label>convert to</label>
                <select class="form-control" id="currency-2" required>
                    <option>EUR</option>
                    <option>USD</option>
                    <option>PLN</option>
                </select>
            </div>  
            <button class="btn calculate-btn btn-primary mb-2">Show me the result!</button>
        </form>
        <div class="result">
            <p>
                <span class="given-amount"></span> 
                <span class="base-currency"></span>
                <span class="final-result"></span> 
                <span class="second-currency"></span>
            </p>
        </div>
    </div> 
</div>

Do tego póki co dorzuciłem JS z przelicznikiem na "sztywno"

var rates = [ 0.29, 3.45, 0.24, 4.15, 1.20, 0.83 ];
var PLNUSD = rates[0];
var USDPLN = rates[1];
var PLNEUR = rates[2];
var EURPLN = rates[3];
var USDEUR = rates[4];
var EURUSD = rates[5];
var btn = document.querySelector('.calculate-btn');
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');

function convertCurrency(event) {
  event.preventDefault();
  var amount = amountInput.value;
  var from = baseCurrencyInput.value;
  var to = secondCurrencyInput.value;
  var result = 0;
  
  if(from === 'PLN' && to === 'USD') {
    result = amount * PLNUSD;
  } else if (from === 'USD' && to === 'PLN') {
    result = amount * USDPLN;
  } else if (from === 'PLN' && to === 'EUR') {
    result = amount * PLNEUR;
  } else if (from === 'EUR' && to === 'PLN') {
    result = amount * EURPLN;
  } else if (from === 'USD' && to === 'EUR') {
    result = amount * USDEUR;
  } else if (from === 'EUR' && to === 'USD') {
    result = amount * EURUSD;
  }
  
  toShowAmount.innerHTML = amount;
  toShowBase.textContent = from + ' = ';
  toShowSecond.textContent = to;
  toShowResult.textContent = result; 
}

btn.addEventListener('click', convertCurrency);

jak dodać do tego api Banku tak aby kursy były pobierane na bieŻąco (Boże, widzisz takie błędy i nie grzmisz)?

0

https://developer.mozilla.org/pl/docs/XMLHttpRequest
Jak sądzę, potrzebujesz użyć XMLHttpRequest.

0

Właśnie ja wiem czego muszę użyć bo nawet na stronie NBP jest to napisane (json,xml). Problem tkwi w tym, że nie wiem jak się za to zabrać, a poradniki w sieci są napisane w taki sposób, że po prostu nic z nich nie rozumiem.

0

"Właśnie ja wiem czego muszę użyć", "Problem tkwi w tym, że nie wiem jak się za to zabrać" xD

$.ajax('http://api.nbp.pl/api/exchangerates/tables/a/').done(function(response) {
	var rates = response[0].rates
})

1 użytkowników online, w tym zalogowanych: 0, gości: 1