iRuemu Coding Blog
Create a simple currency converter

Create a simple currency converter

Ogunuyo Ogheneruemu B's photo
Ogunuyo Ogheneruemu B
·

2 min read

<!DOCTYPE html>
<html>
<head>
  <title>Currency Exchange</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      margin: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      width: 300px;
      text-align: center;
    }

    .form-group {
      margin-bottom: 10px;
    }

    .input-field {
      width: 100%;
      padding: 5px;
    }

    .result {
      font-weight: bold;
    }

    .conversion-rate {
      margin-top: 10px;
      color: #888;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Currency Exchange</h2>
    <form id="exchangeForm">
      <div class="form-group">
        <label for="nairaInput">NGN (Naira)</label>
        <input type="number" id="nairaInput" class="input-field" placeholder="Enter amount in NGN">
      </div>
      <div class="form-group">
        <label for="mpesaInput">KSH (M-Pesa)</label>
        <input type="number" id="mpesaInput" class="input-field" placeholder="Enter amount in KSH">
      </div>
    </form>
    <div class="result">
      <p>Converted Amount:</p>
      <p id="convertedAmount"></p>
    </div>
    <div class="conversion-rate">
      <p>Conversion Rates:</p>
      <p id="ngnToKshRate"></p>
      <p id="kshToNgnRate"></p>
    </div>
  </div>

  <script>
    // Get input fields and result elements
    const nairaInput = document.getElementById('nairaInput');
    const mpesaInput = document.getElementById('mpesaInput');
    const convertedAmount = document.getElementById('convertedAmount');
    const ngnToKshRate = document.getElementById('ngnToKshRate');
    const kshToNgnRate = document.getElementById('kshToNgnRate');

    // Conversion rates
    const ngnToKsh = 0.184907;
    const kshToNgn = 5.4103;

    // Add input event listeners
    nairaInput.addEventListener('input', convertNgnToKsh);
    mpesaInput.addEventListener('input', convertKshToNgn);

    // Convert NGN to KSH
    function convertNgnToKsh() {
      const nairaAmount = parseFloat(nairaInput.value);
      const kshAmount = nairaAmount * ngnToKsh;
      mpesaInput.value = kshAmount.toFixed(2);
    }

    // Convert KSH to NGN
    function convertKshToNgn() {
      const kshAmount = parseFloat(mpesaInput.value);
      const nairaAmount = kshAmount * kshToNgn;
      nairaInput.value = nairaAmount.toFixed(2);
    }

    // Display conversion rates on page load
    window.addEventListener('load', function() {
      ngnToKshRate.textContent = `1 NGN = ${ngnToKsh.toFixed(4)} KSH`;
      kshToNgnRate.textContent = `1 KSH = ${kshToNgn.toFixed(4)} NGN`;
    });
  </script>
</body>
</html>
HTML5JavaScriptCSSExchangeconversion