Close Menu
    JavaScript

    How to make Currency Converter using HTML CSS & JavaScript

    Coding StellaBy No Comments7 Mins Read

    Hello everyone! Today, let’s build a Currency Converter using HTML, CSS, and JavaScript. It’s a practical and handy tool for your website. Whether you’re a coding enthusiast or just starting out, this tutorial provides a great opportunity to add a useful feature to your projects.

    We’ll use HTML for the structure, CSS for a bit of style, and JavaScript to make the conversion magic happen.

    Join me on this coding journey into the world of Currency Converters. Let’s keep it straightforward and enjoyable with HTML, CSS, and JavaScript. Ready to create a Currency Converter for your projects? Let’s get started!

    HTML :

    This HTML file sets up a currency converter interface. It includes fields for entering the amount, selecting the source and target currencies, and a button to get the exchange rate. The exchange rate is displayed dynamically. The JavaScript file linked at the end likely handles the currency conversion logic and API calls.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Currency Converter using JS | CodingStella </title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&amp;display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
  <header>Currency Converter</header>
  <form action="#">
    <div class="amount">
      <p>Enter Amount</p>
      <input type="text" value="1">
    </div>
    <div class="drop-list">
      <div class="from">
        <p>From</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/us.png" alt="flag">
          <select>
            <!-- Options tag are inserted from JavaScript -->
          </select>
        </div>
      </div>
      <div class="icon"><i class="fas fa-exchange-alt"></i></div>
      <div class="to">
        <p>To</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/in.png" alt="flag">
          <select>
            <!-- Options tag are inserted from JavaScript -->
          </select>
        </div>
      </div>
    </div>
    <div class="exchange-rate">Getting exchange rate...</div>
    <button>Get Exchange Rate</button>
  </form>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

    CSS :

    The provided CSS code styles a currency converter interface. It sets up the layout, styling for input fields, dropdown lists, exchange rate display, and button. The design features a dark theme with contrasting colors for input elements, and it includes hover and active state effects for the button. The code also utilizes the Montserrat font and a linear gradient background.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 10px;
  background: linear-gradient(180deg, #fff 50%, #a16574 50%);
}

::selection {
  color: #000;
  background: #fff;
}

.wrapper {
  width: 370px;
  padding: 30px;
  border-radius: 5px;
  background: #222;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.wrapper header {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}

.wrapper form {
  margin: 40px 0 20px 0;
}

form :where(input, select, button) {
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #444;
  color: #fff;
}

form p {
  font-size: 18px;
  margin-bottom: 5px;
}

form input {
  height: 50px;
  font-size: 17px;
  padding: 0 15px;
  border: 1px solid #999;
  background: #555;
}

form input:focus {
  padding: 0 14px;
  border: 2px solid #675afe;
  background: #555;
}

form .drop-list {
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}

.drop-list .select-box {
  display: flex;
  width: 115px;
  height: 45px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
  background: #fff;
  color: #000;
}

.select-box img {
  max-width: 21px;
}

.select-box select {
  width: auto;
  font-size: 16px;
  background: none;
  margin: 0 -5px 0 5px;
  color: #000;
}

.select-box select::-webkit-scrollbar {
  width: 8px;
}

.select-box select::-webkit-scrollbar-track {
  background: #fff;
}

.select-box select::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}

.drop-list .icon {
  cursor: pointer;
  margin-top: 30px;
  font-size: 22px;
  color: #fff;
}

form .exchange-rate {
  font-size: 17px;
  margin: 20px 0 30px;
}

form button {
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.2s ease;
}

form button:hover {
  background: #333;
}

form button:active {
  transform: scale(0.95);
}

    JavaScript:

    The provided JavaScript code sets up a currency exchange rate calculator. It initializes a list of currency codes and their corresponding country codes, and then dynamically populates two dropdown menus with these currency codes. The user can select the currencies to convert, input an amount, and then retrieve the exchange rate between the selected currencies. The exchange rate is fetched from an API using the provided API key and displayed to the user.

    let country_list = {
  AED: "AE",
  AFN: "AF",
  XCD: "AG",
  ALL: "AL",
  AMD: "AM",
  ANG: "AN",
  AOA: "AO",
  AQD: "AQ",
  ARS: "AR",
  AUD: "AU",
  AZN: "AZ",
  BAM: "BA",
  BBD: "BB",
  BDT: "BD",
  XOF: "BE",
  BGN: "BG",
  BHD: "BH",
  BIF: "BI",
  BMD: "BM",
  BND: "BN",
  BOB: "BO",
  BRL: "BR",
  BSD: "BS",
  NOK: "BV",
  BWP: "BW",
  BYR: "BY",
  BZD: "BZ",
  CAD: "CA",
  CDF: "CD",
  XAF: "CF",
  CHF: "CH",
  CLP: "CL",
  CNY: "CN",
  COP: "CO",
  CRC: "CR",
  CUP: "CU",
  CVE: "CV",
  CYP: "CY",
  CZK: "CZ",
  DJF: "DJ",
  DKK: "DK",
  DOP: "DO",
  DZD: "DZ",
  ECS: "EC",
  EEK: "EE",
  EGP: "EG",
  ETB: "ET",
  EUR: "FR",
  FJD: "FJ",
  FKP: "FK",
  GBP: "GB",
  GEL: "GE",
  GGP: "GG",
  GHS: "GH",
  GIP: "GI",
  GMD: "GM",
  GNF: "GN",
  GTQ: "GT",
  GYD: "GY",
  HKD: "HK",
  HNL: "HN",
  HRK: "HR",
  HTG: "HT",
  HUF: "HU",
  IDR: "ID",
  ILS: "IL",
  INR: "IN",
  IQD: "IQ",
  IRR: "IR",
  ISK: "IS",
  JMD: "JM",
  JOD: "JO",
  JPY: "JP",
  KES: "KE",
  KGS: "KG",
  KHR: "KH",
  KMF: "KM",
  KPW: "KP",
  KRW: "KR",
  KWD: "KW",
  KYD: "KY",
  KZT: "KZ",
  LAK: "LA",
  LBP: "LB",
  LKR: "LK",
  LRD: "LR",
  LSL: "LS",
  LTL: "LT",
  LVL: "LV",
  LYD: "LY",
  MAD: "MA",
  MDL: "MD",
  MGA: "MG",
  MKD: "MK",
  MMK: "MM",
  MNT: "MN",
  MOP: "MO",
  MRO: "MR",
  MTL: "MT",
  MUR: "MU",
  MVR: "MV",
  MWK: "MW",
  MXN: "MX",
  MYR: "MY",
  MZN: "MZ",
  NAD: "NA",
  XPF: "NC",
  NGN: "NG",
  NIO: "NI",
  NPR: "NP",
  NZD: "NZ",
  OMR: "OM",
  PAB: "PA",
  PEN: "PE",
  PGK: "PG",
  PHP: "PH",
  PKR: "PK",
  PLN: "PL",
  PYG: "PY",
  QAR: "QA",
  RON: "RO",
  RSD: "RS",
  RUB: "RU",
  RWF: "RW",
  SAR: "SA",
  SBD: "SB",
  SCR: "SC",
  SDG: "SD",
  SEK: "SE",
  SGD: "SG",
  SKK: "SK",
  SLL: "SL",
  SOS: "SO",
  SRD: "SR",
  STD: "ST",
  SVC: "SV",
  SYP: "SY",
  SZL: "SZ",
  THB: "TH",
  TJS: "TJ",
  TMT: "TM",
  TND: "TN",
  TOP: "TO",
  TRY: "TR",
  TTD: "TT",
  TWD: "TW",
  TZS: "TZ",
  UAH: "UA",
  UGX: "UG",
  USD: "US",
  UYU: "UY",
  UZS: "UZ",
  VEF: "VE",
  VND: "VN",
  VUV: "VU",
  YER: "YE",
  ZAR: "ZA",
  ZMK: "ZM",
  ZWD: "ZW"
};

let apiKey = "e759f92560e41c99ee6213a2";

const dropList = document.querySelectorAll("form select"),
  fromCurrency = document.querySelector(".from select"),
  toCurrency = document.querySelector(".to select"),
  getButton = document.querySelector("form button");

for (let i = 0; i < dropList.length; i++) {
  for (let currency_code in country_list) {
    let selected =
      i == 0
        ? currency_code == "USD"
          ? "selected"
          : ""
        : currency_code == "INR"
        ? "selected"
        : "";
    let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`;
    dropList[i].insertAdjacentHTML("beforeend", optionTag);
  }
  dropList[i].addEventListener("change", (e) => {
    loadFlag(e.target);
  });
}

function loadFlag(element) {
  for (let code in country_list) {
    if (code == element.value) {
      let imgTag = element.parentElement.querySelector("img");
      imgTag.src = `https://flagcdn.com/48x36/${country_list[
        code
      ].toLowerCase()}.png`;
    }
  }
}

window.addEventListener("load", () => {
  getExchangeRate();
});

getButton.addEventListener("click", (e) => {
  e.preventDefault();
  getExchangeRate();
});

const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", () => {
  let tempCode = fromCurrency.value;
  fromCurrency.value = toCurrency.value;
  toCurrency.value = tempCode;
  loadFlag(fromCurrency);
  loadFlag(toCurrency);
  getExchangeRate();
});

function getExchangeRate() {
  const amount = document.querySelector("form input");
  const exchangeRateTxt = document.querySelector("form .exchange-rate");
  let amountVal = amount.value;
  if (amountVal == "" || amountVal == "0") {
    amount.value = "1";
    amountVal = 1;
  }
  exchangeRateTxt.innerText = "Getting exchange rate...";
  let url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;
  fetch(url)
    .then((response) => response.json())
    .then((result) => {
      let exchangeRate = result.conversion_rates[toCurrency.value];
      let totalExRate = (amountVal * exchangeRate).toFixed(2);
      exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
    })
    .catch(() => {
      exchangeRateTxt.innerText = "Something went wrong";
    });
}

    Congratulations, coding champs! We’ve successfully built our Currency Converter using HTML, CSS, and JavaScript. It’s now a functional and practical addition to your projects. Whether you followed every line of code or just breezed through, I hope this tutorial has been a valuable coding experience.

    If your project hits a snag, no worries! Access the source code effortlessly. Click the Download button to kickstart your coding expedition. May your coding be filled with joy!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply