JavaScript Project – Currency Converter
Free Web development courses with real-time projects Start Now!!
Program 1
<html>
<head>
<title>Currency Converter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<font color="#501103" size="6">Currency Converter</font>
<div class="form">
<label for="amount">Amount:</label>
<input type="number" id="amount" placeholder="Enter amount here " />
</div>
<div class="form">
<label for="fromCurrency">From Currency:</label>
<select id="fromCurrency"></select>
</div>
<div class="form">
<label for="toCurrency">To Currency:</label>
<select id="toCurrency"></select>
</div>
<button id="convertBtn">Convert</button>
<h2>Converted Amount: <span id="result">0</span></h2>
</div>
<script src="app1.js"></script>
</body>
</html>Program 2
<html>
<head><title>History Object</title>
<script type="text/javascript">
</script>
</head>
<body>
<center>
<form>
<select>
<option>USD</option>
<option>INR</option>
<option>EUR</option>
<option>THB</option>
<option>SRC</option>
</select>
</form>
</center>
</body>
</html>Program 3
// Fetch exchange rates and initialize the currency converter
const fromCurrency = document.getElementById("fromCurrency");
const toCurrency = document.getElementById("toCurrency");
const amountInput = document.getElementById("amount");
const result = document.getElementById("result");
const convertBtn = document.getElementById("convertBtn");
// Initialize exchange rates
let exchangeRates = {}; // blank collection
// Fetch currency data
async function fetchCurrencyData() {
const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
const data = await response.json();
exchangeRates = data.rates;
populateCurrencies();
}
// Populate currency select dropdowns
function populateCurrencies() {
const currencies = Object.keys(exchangeRates);
currencies.forEach(currency => {
const option1 = document.createElement("option");
option1.value = currency;
option1.text = currency;
fromCurrency.appendChild(option1);
const option2 = document.createElement("option");
option2.value = currency;
option2.text = currency;
toCurrency.appendChild(option2);
});
// Set default currencies
fromCurrency.value = "INR";
toCurrency.value = "USD";
}
// Perform currency conversion
function convertCurrency() {
const amount = parseFloat(amountInput.value);
const from = fromCurrency.value;
const to = toCurrency.value;
if (isNaN(amount)) {
alert("Please enter a valid amount");
return;
}
// Conversion logic
const convertedAmount = amount * exchangeRates[to] / exchangeRates[from];
result.textContent = convertedAmount.toFixed(2);
}
// Event listener for Convert button
convertBtn.addEventListener("click", convertCurrency);
// Initialize the app by fetching data
fetchCurrencyData();Program 4
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f9;
}
.container {
text-align: center;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
font-size: 2rem;
margin-bottom: 20px;
}
.form {
margin: 15px 0;
}
input, select {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #45a049;
}
h2 {
margin-top: 20px;
font-size: 1.5rem;
} Your opinion matters
Please write your valuable feedback about DataFlair on Google
