Currency Converter

Preview

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
      integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <section class="main">
      <h1>USD - INR Currency Converter</h1>
      <div class="container box">
        <div class="converter">
          <!-- base covertion -->
          <div class="baseConvert">
            <p>Exchange Rate</p>
            <span class="base">1 USD = 75 INR</span>
          </div>
          <!-- text from and to -->
          <div class="text">
            <p>From</p>
            <p>To</p>
          </div>
          <!-- main convertion -->
          <div class="mainConvertion">
            <!-- from  -->
            <div class="currencyBox">
              <div class="currency from">
                <img
                  src="https://www.worldometers.info/img/flags/small/tn_us-flag.gif"
                />
                <select class="currency1">
                  <option value="USD" selected>USD</option>
                  <option value="INR">INR</option>
                </select>
              </div>
              <input type="text" class="currency1Input" placeholder="0" />
            </div>
            <!-- switch button  -->
            <div class="switchCurrency">
              <div class="fas fa-exchange-alt rotate"></div>
            </div>
            <!-- to  -->
            <div class="currencyBox">
              <div class="currency to">
                <img
                  src="https://www.worldometers.info/img/flags/small/tn_in-flag.gif"
                />
                <select class="currency2">
                  <option value="USD">USD</option>
                  <option value="INR" selected>INR</option>
                </select>
              </div>
              <input type="text" class="currency2Input" placeholder="0.00" />
            </div>
          </div>
        </div>
      </div>
    </section>
    <script src="script.js"></script>
  </body>
</html>

Preview

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 10px;
}
body {
  font-family: "Poppins", sans-serif;
}
p {
  font-size: 1.6rem;
  line-height: 1.5;
}
/* img {
  width: 100%;
} */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
section.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
h1 {
  font-size: 2.2rem;
  font-weight: 600;
  padding-bottom: 1rem;
  color: #212529;
}
.box {
  /* border: 1px solid red; */
  width: 35rem;
  border-top: 5px solid #ced4da;
  padding: 4rem 2rem;
  background-color: white;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 0 0 5px 5px;
}
.baseConvert {
  background-color: #845ef7;
  padding: 1rem;
  text-align: center;
  border-radius: 5px;
  margin-bottom: 5rem;
}
.baseConvert p {
  font-weight: 700;
  color: white;
}
.base {
  margin: 1rem 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #e5dbff;
}
.text {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #ced4da;
  padding-bottom: 2rem;
  font-weight: 600;
}
.text:nth-child(2) {
  padding-right: 7.7rem;
}
.mainConvertion {
  margin: 2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.currencyBox {
  width: 30%;
}
.switchCurrency {
  width: 30%;
  text-align: center;
  font-size: 2rem;
  color: #5f3dc4;
  cursor: pointer;
  transition: all 0.5s;
}
.currency {
  border: 2px solid #ced4da;
  padding: 5px;
  margin: 15px 0;
  border-radius: 3px;
  width: 9rem;
  display: flex;
  align-items: center;
}
.currency img {
  width: 30%;
  margin-right: 3px;
}
.currency select {
  border: none;
  outline: none;
  cursor: pointer;
}
.currencyBox input {
  width: 9rem;
  border-radius: 3px;
  font-size: 1.5rem;
  outline: none;
  border: 2px solid #ced4da;
  margin-bottom: -2rem;
}
.rotate {
  transform: rotateY(180deg);
}
input {
  padding: 5px;
}

JavaScript

const cur1 = document.querySelector(".currency1");
const cur2 = document.querySelector(".currency2");
const cur1Input = document.querySelector(".currency1Input");
const cur2Input = document.querySelector(".currency2Input");
const baseRate = document.querySelector(".base");
const switchCur = document.querySelector(".switchCurrency");
const countries = [
  {
    name: "USD",
    flagURL: "https://www.worldometers.info/img/flags/small/tn_us-flag.gif",
  },
  {
    name: "INR",
    flagURL: "https://www.worldometers.info/img/flags/small/tn_in-flag.gif",
  },
];
// currency api
const apiURL = "https://v6.exchangerate-api.com/v6/";
const key = "093352694b431c8342cff984";
// get exchange rate
async function getExchangeRate() {
  const cur1Value = cur1.value;
  const cur2Value = cur2.value;
  const response = await fetch(`${apiURL}${key}/latest/${cur1Value}`);
  const data = await response.json();
  console.log(data);
  const rate = data.conversion_rates[cur2Value];
  baseRate.textContent = `1 ${cur1Value} = ${rate.toFixed(2)} ${cur2Value}`;
  cur2Input.value = (cur1Input.value * rate).toFixed(2);
}
getExchangeRate();
// add event listener
cur1.addEventListener("change", () => {
  getExchangeRate();
});
cur2.addEventListener("change", () => {
  getExchangeRate();
});
cur1Input.addEventListener("input", getExchangeRate);
cur2Input.addEventListener("input", getExchangeRate);
switchCur.addEventListener("click", () => {
  const cur1Val = cur1.value;
  cur1.value = cur2.value;
  cur2.value = cur1Val;
  switchCur.classList.toggle("rotate");
  getExchangeRate();
  getFlag();
});
// flags
function getFlag() {
  countries.forEach((country) => {
    // console.log(country.name);
    if (cur1.value == country.name) {
      const imgSrc = document.querySelector(".from img");
      imgSrc.setAttribute("src", country.flagURL);
    }
    if (cur2.value == country.name) {
      const imgSrc = document.querySelector(".to img");
      imgSrc.setAttribute("src", country.flagURL);
    }
  });
}

Latest

Leave A Reply

Please enter your comment!
Please enter your name here