Uploaded File

2020-01-12 14:50:24 +01:00 · 2020-01-12 14:50:24 +01:00 · c6f96fbf15
parent b9bfe9de26
commit c6f96fbf15
2 changed files with 47 additions and 0 deletions
--- a/fetch-api-form.html
+++ b/fetch-api-form.html
@ -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>
--- a/fetch-form-api.js
+++ b/fetch-form-api.js
@ -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 = "";
+    }
+})