Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to make Crazy Stunt Loading Animation using HTML & CSS

    27 August 2025

    How to make Iconic Magic Tab Bar using HTML & CSS

    23 August 2025

    How to make Glowing Animated Search Bar using HTML & CSS

    21 August 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to make Currency Converter using HTML CSS & JavaScript
    JavaScript

    How to make Currency Converter using HTML CSS & JavaScript

    Coding StellaBy Coding Stella13 January 2024No Comments7 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    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!

    JavaScript
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make KFC Landing Page using HTML & CSS
    Next Article How to make Weather App using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    JavaScript

    How to create Parallax Scroll Animation using HTML CSS and JS

    17 August 2025
    JavaScript

    How to create Catch the valorous rabbit Game using HTML CSS and JS

    14 August 2025
    JavaScript

    How to create Animated Credit Card using HTML CSS and JS

    9 August 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202427K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202423K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202419K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202413K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Animated Login Form using HTML & CSS

    14 February 2024

    How to Create 3D Hovering Cards using HTML CSS

    10 January 2024

    How to Create Animated Bicycle Product Card using HTML & CSS

    1 June 2025

    How to make Naughty Submit Button in HTML CSS & JavaScript

    14 February 2024
    Latest Post

    How to make Crazy Stunt Loading Animation using HTML & CSS

    27 August 2025

    How to make Iconic Magic Tab Bar using HTML & CSS

    23 August 2025

    How to make Glowing Animated Search Bar using HTML & CSS

    21 August 2025

    How to make Animated Pepsi Product Card using HTML & CSS

    19 August 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood