Simple Currency Converter in JavaScript

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.

Code Snippet:	Exchange Rate Calculator
Author:	Taimoor khan
Published:	5 months ago
Last Updated:	5 months ago
Downloads:	197

License:	MIT
Edit Code online:	View on CodePen

Simple Currency Converter in JavaScript

Setting Up the HTML Structure

Styling with CSS

Implementing JavaScript Functionality

Adding Header Assets

Adding Footer Assets

Related Code Snippets:

JavaScript Calculate Age in Years, Months Days

Next And Previous Buttons in JavaScript with Demo

Background Image Slideshow Using JavaScript

Simple Calculator Code in HTML and JavaScript

JavaScript Custom Cursor with Icon and Text

SVG Cubic Bezier Curve Generator in JavaScript

Leave a Comment Cancel reply

Setting Up the HTML Structure

Styling with CSS

Implementing JavaScript Functionality

Adding Header Assets

Adding Footer Assets

Related Code Snippets:

JavaScript Calculate Age in Years, Months Days

Next And Previous Buttons in JavaScript with Demo

Background Image Slideshow Using JavaScript

Simple Calculator Code in HTML and JavaScript

JavaScript Custom Cursor with Icon and Text

SVG Cubic Bezier Curve Generator in JavaScript

Leave a Comment Cancel reply

About W3Frontend