<!DOCTYPE html>
<html>
<head>
<title>Currency Converter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f2f2f2;
}
h1 {
text-align: center;
color: #333;
}
.converter {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #666;
}
.form-group select,
.form-group input {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 3px;
border: 1px solid #ddd;
}
.form-group input {
text-align: right;
}
.btn-convert {
display: block;
width: 100%;
padding: 10px;
background-color: #4caf50;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-convert:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
background-color: #f9f9f9;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Currency Converter</h1>
<div class="converter">
<div class="form-group">
<label for="fromCurrency">From:</label>
<select id="fromCurrency"></select>
</div>
<div class="form-group">
<label for="toCurrency">To:</label>
<select id="toCurrency"></select>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="number" id="amount" placeholder="Enter amount" />
</div>
<a href="#" class="btn-convert" onclick="convertCurrency()">Convert</a>
<div id="result" class="result"></div>
</div>
<script>
// Fetch all currencies and populate the select dropdowns
fetch('https://api.exchangerate-api.com/v4/latest/USD')
.then(response => response.json())
.then(data => {
const currencies = Object.keys(data.rates);
const fromCurrencySelect = document.getElementById('fromCurrency');
const toCurrencySelect = document.getElementById('toCurrency');
currencies.forEach(currency => {
const option = document.createElement('option');
option.value = currency;
option.text = currency;
fromCurrencySelect.appendChild(option);
const option2 = document.createElement('option');
option2.value = currency;
option2.text = currency;
toCurrencySelect.appendChild(option2);
});
});
// Convert currency using ExchangeRate-API
function convertCurrency() {
const fromCurrency = document.getElementById('fromCurrency').value;
const toCurrency = document.getElementById('toCurrency').value;
const amount = document.getElementById('amount').value;
const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`;
fetch(url)
.then(response => response.json())
.then(data => {
const rate = data.rates[toCurrency];
const convertedAmount = (amount * rate).toFixed(2);
const resultElement = document.getElementById('result');
resultElement.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`;
})
.catch(error => {
console.log('Error:', error);
const resultElement = document.getElementById('result');
resultElement.innerHTML = 'An error occurred while fetching data.';
});
}
</script>
</body>
</html>
Documentation
Step 1:- Open txt file from the folder for code
Step 2:- Copy all code
Step 3:- Open your website dashboard or blog
Step 4:- Add HTML element
Step 5:- Paste all code in your html element
Step 6:- Save file
Done you are successfully Pasted code in your website.
