Back to Projects Intermediate

Currency Converter

Build a currency converter that lets you convert between popular world currencies using static exchange rates. Learn how to work with select elements, validate inputs, and format numbers for clean currency display.

HTML, CSS, JavaScript ~2-3 hours to build Free source code

What You'll Learn

How to work with <select> dropdown elements and read their values
How to handle multiple form inputs and validate user data
How to use objects as lookup tables for exchange rates
How to format numbers for currency display using toFixed()
How to swap values between two fields with a single click

How It Works

Exchange rates stored in an object

All currency exchange rates are stored in a JavaScript object, with each currency code as a key. This acts as a lookup table to convert any amount from one currency to another.

Convert on input or button click

When the user types an amount and selects currencies, JavaScript reads the values, looks up the rate, multiplies, and displays the converted result instantly.

Swap currencies with one click

A swap button flips the 'from' and 'to' currencies and recalculates the result. This teaches you how to read, swap, and update multiple DOM elements in one action.

Source Code

HTML Structure

HTML

<!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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="converter-app">
    <h1>Currency Converter</h1>
    <p class="subtitle">Convert between popular world currencies</p>

    <div class="form-group">
      <label for="amount">Amount</label>
      <input type="number" id="amount" placeholder="Enter amount" min="0" value="1">
    </div>

    <div class="currency-row">
      <div class="form-group">
        <label for="fromCurrency">From</label>
        <select id="fromCurrency"></select>
      </div>
      <button class="swap-btn" id="swapBtn" title="Swap currencies">&#8646;</button>
      <div class="form-group">
        <label for="toCurrency">To</label>
        <select id="toCurrency"></select>
      </div>
    </div>

    <button class="convert-btn" id="convertBtn">Convert</button>

    <div class="result-box" id="resultBox">
      <span class="result-placeholder">Enter an amount and click Convert</span>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

CSS

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #004d40 0%, #00695c 50%, #00897b 100%);
  font-family: 'Segoe UI', sans-serif;
  padding: 20px;
}
.converter-app {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #004d40;
  text-align: center;
  margin-bottom: 4px;
}
.subtitle {
  text-align: center;
  color: #888;
  font-size: 0.88rem;
  margin-bottom: 28px;
}
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #004d40;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.3s;
  background: #fafafa;
  color: #333;
}
.form-group input:focus,
.form-group select:focus {
  border-color: #00897b;
}
.currency-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.currency-row .form-group { flex: 1; }
.swap-btn {
  width: 44px;
  height: 44px;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  background: #fff;
  color: #00897b;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 18px;
}
.swap-btn:hover {
  background: #00897b;
  color: #fff;
  border-color: #00897b;
  transform: rotate(180deg);
}
.convert-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #00695c, #00897b);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 20px;
}
.convert-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,137,123,0.35);
}
.result-box {
  background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  min-height: 70px;
}
.result-amount {
  font-size: 1.8rem;
  font-weight: 800;
  color: #004d40;
}
.result-info {
  font-size: 0.82rem;
  color: #00695c;
  margin-top: 4px;
}
.result-placeholder {
  color: #80cbc4;
  font-size: 0.95rem;
}

JavaScript Logic

JavaScript

const rates = {
  USD: 1,
  EUR: 0.92,
  GBP: 0.79,
  INR: 83.12,
  JPY: 149.50,
  CAD: 1.36,
  AUD: 1.53,
  CHF: 0.88
};

const currencyNames = {
  USD: 'US Dollar',
  EUR: 'Euro',
  GBP: 'British Pound',
  INR: 'Indian Rupee',
  JPY: 'Japanese Yen',
  CAD: 'Canadian Dollar',
  AUD: 'Australian Dollar',
  CHF: 'Swiss Franc'
};

const fromSelect = document.getElementById('fromCurrency');
const toSelect = document.getElementById('toCurrency');
const amountInput = document.getElementById('amount');
const convertBtn = document.getElementById('convertBtn');
const swapBtn = document.getElementById('swapBtn');
const resultBox = document.getElementById('resultBox');

function populateSelects() {
  var codes = Object.keys(rates);
  codes.forEach(function(code) {
    var opt1 = document.createElement('option');
    opt1.value = code;
    opt1.textContent = code + ' - ' + currencyNames[code];
    fromSelect.appendChild(opt1);

    var opt2 = document.createElement('option');
    opt2.value = code;
    opt2.textContent = code + ' - ' + currencyNames[code];
    toSelect.appendChild(opt2);
  });
  fromSelect.value = 'USD';
  toSelect.value = 'EUR';
}

function convert() {
  var amount = parseFloat(amountInput.value);
  if (isNaN(amount) || amount < 0) {
    resultBox.innerHTML =
      '<span class="result-placeholder">Please enter a valid amount</span>';
    return;
  }

  var from = fromSelect.value;
  var to = toSelect.value;

  var amountInUSD = amount / rates[from];
  var result = amountInUSD * rates[to];

  var decimals = (to === 'JPY') ? 0 : 2;
  var formatted = result.toFixed(decimals);

  resultBox.innerHTML =
    '<span class="result-amount">' + formatted + ' ' + to + '</span>' +
    '<span class="result-info">' + amount.toFixed(2) +
    ' ' + from + ' = ' + formatted + ' ' + to + '</span>';
}

convertBtn.addEventListener('click', convert);

swapBtn.addEventListener('click', function() {
  var temp = fromSelect.value;
  fromSelect.value = toSelect.value;
  toSelect.value = temp;
  convert();
});

amountInput.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') convert();
});

populateSelects();