Just Jolly Functions
Functions: Creating a Currency Converter with HTML, CSS, and JavaScript
A Currency Converter is a tool or application that allows users to convert one currency into another based on the current exchange rate. It typically enables users to input a specific amount of one currency and provides the corresponding amount in a different currency.
Tip: Learn how to Insert HTML Code into Your Post
Currency Converter Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.converter-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
font-size: 2rem;
color: #333;
}
label {
font-size: 1rem;
margin-bottom: 10px;
display: block;
}
input {
width: 100%;
padding: 10px;
font-size: 1rem;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
select {
width: 100%;
padding: 10px;
font-size: 1rem;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.result {
font-size: 1.5rem;
font-weight: bold;
color: #333;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="converter-container">
<h1>Currency Converter</h1>
<label for="amount">Amount:</label>
<input type="number" id="amount" placeholder="Enter amount" />
<label for="from-currency">From:</label>
<select id="from-currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
</select>
<label for="to-currency">To:</label>
<select id="to-currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
</select>
<button onclick="convertCurrency()">Convert</button>
<div class="result" id="result"></div>
</div>
<script>
// Hardcoded exchange rates (for demonstration purposes)
const exchangeRates = {
USD: { EUR: 0.85, GBP: 0.75, USD: 1 },
EUR: { USD: 1.18, GBP: 0.88, EUR: 1 },
GBP: { USD: 1.33, EUR: 1.14, GBP: 1 }
};
function convertCurrency() {
const amount = document.getElementById('amount').value;
const fromCurrency = document.getElementById('from-currency').value;
const toCurrency = document.getElementById('to-currency').value;
if (amount === "") {
document.getElementById('result').innerText = "Please enter an amount.";
return;
}
// Perform the conversion based on the selected currencies and amount
const rate = exchangeRates[fromCurrency][toCurrency];
const result = amount * rate;
// Display the result
document.getElementById('result').innerText = `${amount} ${fromCurrency} = ${result.toFixed(2)} ${toCurrency}`;
}
</script>
</body>
</html>
Explanation of the Code:
1. HTML Structure:
The HTML code sets up the user interface, which includes:
An input field for the amount to be converted.
Two dropdown menus (<select>) to choose the currencies: "From" and "To".
A button that triggers the conversion process.
A <div> to display the result of the conversion.
2. CSS Styling:
The CSS provides a clean and simple design for the currency converter with:
Centered content using Flexbox.
Styling for the input fields, buttons, and result display.
A hover effect for the button for better interactivity.
3. JavaScript Functionality:
Exchange Rates:
The exchangeRates object contains hardcoded exchange rates between three currencies: USD, EUR, and GBP. In a real application, you could replace this with a dynamic data source (e.g., a currency exchange API like ExchangeratesAPI or Fixer.io).
Conversion Logic:
The convertCurrency() function is triggered when the user clicks the "Convert" button.
It retrieves the amount and the selected currencies.
It looks up the conversion rate from the exchangeRates object.
The result is calculated and displayed in the result <div>.
4. Customization Options:
Exchange Rates:
Replace the hardcoded exchange rates with real-time data by fetching rates from a live API.
Currency List:
Add or remove currencies in the dropdown options as needed. Just update the <option> values and the exchangeRates object accordingly.
Styling:
Modify the background color, font size, or padding to match your design preferences.
Additional Features:
Add a "Reset" button to clear the input fields.
Add more currency options and update the conversion logic to handle additional currencies.
How It Works:
The user enters an amount to be converted.
The user selects the source currency (From) and target currency (To).
Clicking the "Convert" button triggers the JavaScript function convertCurrency().
The conversion rate is fetched from the hardcoded exchangeRates object based on the selected currencies.
The result is displayed in the "result" div.
Possible Enhancements:
Dynamic Exchange Rates: Integrate with a real-time API to fetch live exchange rates.
More Currencies: Add more currency options and update the exchange rate logic accordingly.
Error Handling: Add checks for invalid input or unsupported currencies.
This simple currency converter can be expanded into a more feature-rich application with live data and additional functionalities.