im trying to create simple currency exchanger from polish zloty to 3 diffend currencies (CHF, EUR, USD), using api from nbp ("https://ift.tt/2Owrlg0). Im using axiost method. After few lines of code i realize this was to much for me level on knowledge of JS. Before i ask questions i show my code.
const input = document.querySelector("input");
const selector = document.querySelector("currencies");
const button = document.querySelector("button");
input.addEventListener('input', calculate);
selector.addEventListener('change', calculate);
button.addEventListener('click', () => {
input.value = selector.value;
calculate();
});
let one = "http://api.nbp.pl/api/exchangerates/rates/A/CHF/";
let two = "http://api.nbp.pl/api/exchangerates/rates/A/EUR/";
let three = "http://api.nbp.pl/api/exchangerates/rates/A/USD/";
const requestOne = axios.get(one);
const requestTwo = axios.get(two);
const requestThree = axios.get(three);
axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
const responseOne = responses[0]
const responseTwo = responses[1]
const responesThree = responses[2]
})).catch(errors => {
console.log(errors);
});
function calculate() {
let selVal = selector.value;
if (input.value == "") {
!alert("Wpisz kwotę")
} else {
let result = input.value * responses[0]
let endresult = document.querySelector('endresult');
endresult.innerHTML = result + "zł"
}
}<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta name="Marcin Panasiuk" content="SitePoint">
<title>Project Java 2- Przelicznik walut</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Przelicznik walut</h1>
</div>
</div>
<div class="container-przel">
<input id="input" placeholder="0">
<select id="currencies">
<option value="CHF">CHF</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
<button id="button" type="button" onclick="calculate()">Przelicz!</button>
</div>
<div>
<p id="endresult"></p>
</div>
</body>
</html>First question:
- How to connect axios respose to a certain option value ( response from .get CHF to option with CHF currency).
- Alert not working i set it if input.value is empty- alert should inform to put somethin in input.
- Button dont detect function calculate().
- Any other tips?
Appriciate any help. Hope this thread will help other people.
Aucun commentaire:
Enregistrer un commentaire