Hi I need help with a simple currency converter I am trying to program for myself to facilitate my work.
What I am trying to accomplish is a simple HTML page where I can enter an amount, select currency, date of transaction and have it automatically converted to SEK. My programming experience is quite limited and this is the first time I'm trying to make API calls.
<!DOCTYPE html>
<html>
<head>
<title>Currency Converter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Currency Converter</h1>
<form>
<label for="value">Value:</label>
<input type="number" id="value" name="value" min="0" step="0.01" required><br><br>
<label for="currency">Currency:</label>
<select id="currency" name="currency">
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="USD">USD</option>
<option value="NOK">NOK</option>
<option value="DKK">DKK</option>
</select><br><br>
<label for="date">Date:</label>
<input type="date" id="date" name="date"><br><br>
<button type="button" onclick="convert()">Convert</button><br><br>
Result: <span id="result"></span>
</form>
<script>
function convert() {
const value = document.getElementById("value").value;
const currency = document.getElementById("currency").value;
const date = document.getElementById("date").value;
fetch(`http://api.exchangeratesapi.io/v1/${date}?access_key=[MY API KEY]&base=SEK`)
.then(response => response.json())
.then(data => {
const rate = data.rates[currency];
const result = (value * rate).toFixed(2);
document.getElementById("result").innerHTML = `${result} SEK`;
});
}
</script>
</body>
</html>
I have tried to use the link manually to get information but the error I keep on getting is: "{"error":{"code":"https_access_restricted","message":"Access Restricted - Your current Subscription Plan does not support HTTPS Encryption."}}"
I am well aware of the fact that my current plan does not support HTTPS which is why I am trying to call a HTTP address and not a HTTPS address.
Try adding
referrerPolicy: "unsafe-url"to your fetch call,