MickSlash
/
JavaScript_Fetch_API
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Uploaded File

master
Mick877 2020-01-12 14:50:24 +01:00
parent b9bfe9de26
commit c6f96fbf15
2 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
fetch-api-form.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta charset="utf-8">
<title>Form Fetch API</title>
<script src="fetch-form-api.js" charset="utf-8"></script>
</head>
<body>
<p>Inserisci una valuta per ottenere i tassi di cambio con l'Euro</p>
<form id="form">
<input type="text" id="currency" placeholder="Valuta">
<input type="submit" value="Converti">
</form>
<hr>
<h2 id="exchange-result"></h2>
</body>
</html>

30
fetch-form-api.js Normal file
View File

@ -0,0 +1,30 @@
function getJSON(response){
let data = response.json();
return data
}
function getCurrencyRate(currency){
console.log(currency);
let url = "https://api.exchangeratesapi.io/latest?symbols=" + currency;
fetch(url)
.then(getJSON)
.then(data => {
console.log("Data : " ,data)
let rate = Object.values(data.rates)[0];
document.querySelector("#exchange-result").innerHTML = `1.00 Euro corrisponde a ${rate} ${currency}`;
})
.catch( err => {
// console.log("Errore : ", err)
document.querySelector("#exchange-result").innerHTML = `Errore ${err}`;
})
}
document.addEventListener("DOMContentLoaded", () =>{
document.querySelector("#form").onsubmit = event =>{
event.preventDefault();
const currency = document.querySelector("#currency").value;
getCurrencyRate(currency)
document.querySelector("#currency").value = "";
}
})