Here’s a step-by-step guide to build a simple currency converter in JavaScript. This tool allows users to easily convert between different currencies by selecting the currencies and inputting the desired amounts, offering a practical solution for quick currency conversions.
Setting Up the HTML Structure
First, we’ll structure the HTML to create the basic layout of our currency converter. This includes an image, heading, description, currency selection dropdowns, input fields for amounts, and a swap button.
<body>
<img src="https://i.imgur.com/swbDFKF.png" alt="money image" class="money-img" />
<h1>Exchange Rate Calculator</h1>
<p>Choose the currency and the amounts to get the exchange rate</p>
<div class="container">
<!-- currency 01 -->
<div class="currency">
<select id="currency-1">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD" selected>USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="number" id="amount-one" placeholder="0" value="1" />
</div>
<!-- swap buttoh -->
<div class="swap-container">
<button class="btn" id="swap">swap</button>
<div class="rate" id="rate"></div>
</div>
<!-- currency 02 -->
<div class="currency">
<select id="currency-2">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD" selected>USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="number" id="amount-two" placeholder="0" value="1" />
</div>
</div>
<script src="./script.js"></script>
Styling with CSS
Next, we’ll use CSS to style the HTML elements, making the currency converter visually appealing and user-friendly. This includes setting the background color, font family, and styles for the various elements.
:root {
--primary-color: #5fbaa7;
}
* {
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
padding: 10px;
margin: 0;
}
.money-img {
width: 150px;
}
h1 {
color: var(--primary-color);
text-align: center;
margin: 5px 0 0 0;
/* color: blue; */
}
p {
text-align: center;
margin: 5px 0 0 0;
}
.btn {
color: #fff;
background-color: var(--primary-color);
cursor: pointer;
font-size: 12px;
border-radius: 5px;
padding: 5px 12px;
border: none;
}
.currency {
padding: 40px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.currency select {
padding: 10px 20px 5px 10px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: 1px solid #dedede;
background: transparent;
font-size: 16px;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-position: right 10px top 50%, 0, 0;
background-size: 12px auto, 100%;
background-repeat: no-repeat;
}
.currency input {
border: 0;
background: transparent;
font-size: 30px;
text-align: right;
}
.swap-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.rate {
color: var(--primary-color);
font-size: 14px;
padding: 0 10px;
}
select:focus,
input:focus,
button:focus {
outline: 0;
}
@media (max-width: 600px) {
.currency input {
width: 200px;
}
}
Implementing JavaScript Functionality
Now, let’s add the JavaScript to make our currency converter functional. This involves fetching exchange rates from an API, calculating the converted amounts, and updating the display in real-time.
const currency_1 = document.getElementById("currency-1");
const amountOne = document.getElementById("amount-one");
const currency_2 = document.getElementById("currency-2");
const amountTwo = document.getElementById("amount-two");
const rateE1 = document.getElementById("rate");
const swap = document.getElementById("swap");
//Calculate Rates
function calculate() {
let currency_One = currency_1.value;
let currency_Two = currency_2.value;
fetch(`https://api.exchangerate-api.com/v4/latest/${currency_One}`)
.then((res) => res.json())
.then((data) => {
const rate = data.rates[currency_Two];
rateE1.innerHTML = `1 ${currency_One} = ${rate} ${currency_Two} `;
amountTwo.value = (rate * amountOne.value).toFixed(2);
});
}
//Event Listensers
currency_1.addEventListener("change", calculate);
amountOne.addEventListener("input", calculate);
currency_2.addEventListener("change", calculate);
amountTwo.addEventListener("input", calculate);
swap.addEventListener("click", () => {
const temp = currency_1.value;
currency_1.value = currency_2.value;
currency_2.value = temp;
amountOne.value = amountTwo.value;
calculate();
});
calculate();
Adding Header Assets
It is recommended to add CDN links in your document head for faster loading.
Adding Footer Assets
If you need some footer assets, you can add them here.
By following these steps, you have successfully created a simple currency converter in JavaScript. This project demonstrates the use of HTML, CSS, and JavaScript to build an interactive web application.
