Currency Converter App Using HTML CSS and Javascript

By
Asif Ali
-
0

Hey everyone, today we will learn how to build a Currency Converter App using HTML CSS and JavaScript From Scratch. It’s an API-based project inside the project you will learn how to use API to get the data and display it inside the website.

You can use that application to convert one to another currency by clicking one Button. Also, you will able to switch the currency currency as well. It’s a beneficial and useful project for everyone who wants to improve their skills in HTML, CSS, and JavaScript.

we will guide you through the process of creating a currency converter web application using HTML, CSS, and JavaScript. By the end of this tutorial, you will have a functional currency converter that allows users to convert between different currencies.

Prerequisites: Before you begin, make sure you have the following:

  1. Basic knowledge of HTML, CSS, and JavaScript.
  2. A code editor like Visual Studio Code or Sublime Text.
  3. A modern web browser.

Currency Converter App Using HTML CSS and Javascript

More than users like to learn something with the help of video tutorials. So, I’ve made a tutorial so you can learn this project step by step from scratch. Inside the tutorial, I’ve explained everything step by step practically. Hope you like the tutorial, please watch the video below.

Hope you’ve learned all the steps that are used to make a currency convert app using HTML, CSS, and JavaScript. If you face any problems don’t worry, I’m going to share with you the source code that is used inside the project.

You May Also Like:

First of All, you need to create an index.html, inside the file, you need to use HTML tags to make a structure of the application, and you can check the codes that are used to make a structure of the application.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
    <script defer src="js/countries.js"></script>
    <script defer src="js/script.js"></script>
    <title>Currency Converter App Using HTML CSS & JS</title>
  </head>
  <body>
    <div class="container">
      <h2>Currency Conver</h2>
      <div class="wrapper">
        <form>
          <div class="amount">
            <p>Amount</p>
            <input type="text" value="1" />
          </div>
          <div class="convert_box">
            <div class="from">
              <p>From</p>
              <div class="select_input">
                <img src="https://flagcdn.com/48x36/us.png" alt="" />
                <select>
                  <!-- <option value="USA">USA</option> -->
                </select>
              </div>
            </div>
            <div class="reverse"><i class="fas fa-exchange-alt"></i></div>
            <div class="to">
              <p>To</p>
              <div class="select_input">
                <img src="https://flagcdn.com/48x36/gb.png" alt="" />
                <select></select>
              </div>
            </div>
            <div class="result">Getting Exchange Rate............</div>
          </div>
        </form>
      </div>
      <button type="button">Get Exchange Rate</button>
    </div>
  </body>
</html>

Once you have done that, the next step is to create another file style.css, inside the file you need to design the application, you can check the CSS codes below.

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "poppins", sans-serif;
  min-height: 100vh;
  padding: 0 10px;
  background-color: #6831de;
  overflow: hidden;
}

.container {
  background-color: #fff;
  width: 500px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.wrapper {
  color: #2c3e50;
  padding: 2rem 2.5rem;
}

.container h2 {
  font-size: 2rem;
  text-align: center;
  font-weight: 500;
  padding: 1rem 0rem;
  border-bottom: 1px solid #ddd;
  color: #2c3e50;
}

.container .from {
  margin: 10px 0 10px 0;
}

.container .from p {
  font-size: 1rem;
  margin-bottom: 7px;
}

.container form input {
  width: 100%;
  height: 40px;
  border-radius: 5px;
  font-size: 1rem;
  padding: 0 15px;
  background-color: transparent;
  color: #2c3e50;
  border: 1px solid #2c3e50;
  transition: all 0.3s ease;
  outline: none;
}

.container from input:focus {
  padding: 0 14px;
  border: 1px solid #839192;
}

.container form .convert_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.container form .from,
.container form .to {
  width: 100%;
}

.container .convert_box .select_input {
  display: flex;
  width: 100%;
  border: 1px solid #2c3e50;
  height: 40px;
  align-items: center;
  padding: 0 20px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 5px;
}

.container .convert_box .select_input:hover {
  border: 1px solid #2ecc71;
}

.container .convert_box .select_input img {
  min-width: 20px;
}

.container .convert_box .select_input select {
  width: 100%;
  cursor: pointer;
  font-size: 1rem;
  background: none;
  margin: 0 0 0 10px;
  color: #2c3e50;
  outline: none;
  border: none;
  font-family: inherit;
}

.container .convert_box .select_input select option {
  color: #000;
}

.container .convert_box .reverse {
  cursor: pointer;
  margin-top: 32px;
  font-size: 1.2rem;
  transform: rotate(90deg);
  transition: all 0.3s ease;
}

.container .convert_box .reverse:hover {
  color: #2ecc71;
}

.container form .result {
  font-size: 1.1rem;
  margin: 2rem 0 0.5rem;
}

.container button {
  width: 100%;
  height: 62px;
  background-color: #de3163;
  outline: none;
  cursor: pointer;
  border-radius: 0 0 3px 3px;
  transition: all 0.3s ease;
  font-family: inherit;
  border: none;
  font-size: 1.1rem;
  color: #fff;
}

.container button:hover {
  background-color: #c938bc;
}

You’ve successfully designed the application using HTML and CSS, but you need to make it dynamically. When you click the button to convert currency am I right?

So, we need JS to convert the currency, and inside the JS we need to get the third-party API too. First of All, you need to get the country codes file, inside the file, you’ve all the country codes that are used to display the different countries’ names in shorthand.

Download the Country Codes File

Once you download the file, you need to add it to the project also you need to link the file inside the project. Once you do that, you need to JS, So, let’s look at the JS codes on below.

"use strict";

const fromCurrency = document.querySelector(".from select");
const toCurrency = document.querySelector(".to select");
const getBtn = document.querySelector(".container button");
const exIcon = document.querySelector(".reverse");
const amountEl = document.querySelector("form input");
const exRateTxt = document.querySelector("form .result");

const API_KEY = "0c356af7d4c81015043245ae";

[fromCurrency, toCurrency].forEach((select, i) => {
  for (let curcode in Country_List) {
    const selected =
      (i === 0 && curcode === "USD") || (i === 1 && curcode === "GBP")
        ? "selected"
        : "";

    select.insertAdjacentHTML(
      "beforeend",
      ` <option value="${curcode}" ${selected}>${curcode}</option>`,
    );
  }

  // event in select and option
  select.addEventListener("change", () => {
    const code = select.value;
    const imgTag = select.parentElement.querySelector("img");
    imgTag.src = `https://flagcdn.com/48x36/${Country_List[
      code
    ].toLowerCase()}.png`;
  });
});

// get data from api
async function getExchangeRate() {
  const amountValue = amountEl.value;
  exRateTxt.textContent = "Please Wait................";

  try {
    const response = await fetch(
      `https://v6.exchangerate-api.com/v6/${API_KEY}/latest/${fromCurrency.value}`,
    );
    const result = await response.json();

    const exRate = result.conversion_rates[toCurrency.value];
    const totalExRate = amountValue * exRate.toFixed(2);
    exRateTxt.textContent = `${amountValue} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
    console.log(exRate);
  } catch (error) {
    exRateTxt.textContent = "Something Went Wrong";
  }
}

window.addEventListener("DOMContentLoaded", getExchangeRate);
getBtn.addEventListener("click", (e) => {
  e.preventDefault();
  getExchangeRate();
});

exIcon.addEventListener("click", () => {
  [fromCurrency.value, toCurrency.value] = [
    toCurrency.value,
    fromCurrency.value,
  ];
  [fromCurrency, toCurrency].forEach((select) => {
    const code = select.value;
    const imgTag = select.parentElement.querySelector("img");
    imgTag.src = `https://flagcdn.com/48x36/${Country_List[
      code
    ].toLowerCase()}.png`;
  });

  getExchangeRate();
});

amountEl.addEventListener("keyup", () => {
  getExchangeRate();
});

Conclusion: Congratulations! You have successfully created a currency converter app using HTML, CSS, and JavaScript. This project is a great way to practice your web development skills and create a useful tool for currency conversion. Feel free to expand on this project by adding more features or improving the user interface. Happy coding!

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.