Build Currency Converter using HTML CSS & JavaScript

Hello, friends today in this blog we will be learning how to create this currency converter application using HTML CSS & JavaScript.

In this post currency converter using HTML CSS & JavaScript, I have made this project using an API, this API tool is to fetch the country data which we will then use to get and the currency of that country.

In this app (Currency Converter using JavaScript), you can enter your amount and convert your currency to a different country’s currency. The default for the value is "50", if you choose to leave the field blank, you will get an error.

Video Tutorial of Currency Converter using JavaScript

In this video, you have seen the demo of this program "Currency Converter using HTML CSS & JS" and the concept behind creating it. I have explained each concept behind this program.

If you want this project and want to get the source code you can simply do that by going to the bottom of this page and clicking the download button.

Currency Converter using HTML CSS &

JavaScript[Source Code]

HTML CODE:

<!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>Currency Converter using HTML CSS & JS</title>
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="col">
            <div class="text">Currency Converter</div>
            <div class="s6">
                <div class="sm">Enter Amount</div>
                <input type="number" value="10" id="Amount">
                <div class="transfer">  
                    <select class="select-text">
                        <option selected disabled>From</option>
                    </select>
                    <div class="icon">
                        <span class="bx bx-transfer"></span>
                    </div>
                    <select class="select-text">
                        <option selected disabled>To</option>
                    </select>
                </div>
                <div class="s2">
                    <div class="conversion"></div>
                    <div class="messages"></div>
                </div>
                <div class="button">
                    <button class="btn">Convert</button>
                </div>
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS CODE:

/* Poppins Google font link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
::selection{
    background: #5352ed;
    color: #fff;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #5352ed;
}
.wrapper{
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.2);
    position: relative;
}
.wrapper::before{
    content: '';
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #bfbfbf;
}
.wrapper .col .text{
    font-size: 28px;
    text-align: center;
    font-weight: 500;
}
.wrapper .col .s6{
    margin-top: 30px;
}
.wrapper .col .s6 .sm{
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 500;
    padding-left: 2px;
}
.wrapper .col .s6 input{
    width: 100%;
    height: 45px;
    border: 2px solid #bfbfbf;
    outline: none;
    border-radius: 4px;
    padding-left: 10px;
    font-size: 18px;
    transition: all 0.4s ease;
}
.wrapper .col .s6 input:focus{
    border-color: #4834d4;
}
.wrapper .col .s6 .transfer{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
.wrapper .col .s6 .transfer .icon span{
    font-size: 28px;
    color: #2f3542;
}
.wrapper .col .s6 .transfer .select-text{
    width: 90px;
    height: 35px;
    padding-left: 6px;
    outline: none;
    border: 2px solid #bfbfbf;
    border-radius: 5px;
}
.wrapper .col .s6 .transfer .select-text:focus{
    border-color: #4834d4;
}
.wrapper .col .s6 .button{
    margin-top: 20px;
}
.wrapper .col .s6 .button .btn{
    width: 100%;
    height: 45px;
    background: #5352ed;
    border: none;
    outline: none;
    font-size: 20px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
}
.wrapper .col .s6 .s2{
    margin-top: 20px;
}
.wrapper .col .s6 .s2 .conversion{
    font-size: 20px;
}

JAVASCRIPT CODE:

const currencies = [{
    id: 'USD', name: 'US Dollars'
  },
  {
    id: 'GBP', name: 'Great Britain Pound'
  },
  {
    id: 'BRL', name: ' Brazilian Real'
  },
  {
    id: 'UGX', name: 'Ugandan Shillings'
  },
  {
    id: 'AUD', name: 'Australian Dollar'
  },
  {
    id: 'CAD', name: 'Canadian Dollar'
  },{
    id: 'EUR', name: 'Euro'
  },
  {
    id: 'KRW', name: 'South Korean Won'
  },
  {
    id: 'KES', name: 'Kenyan Shillings'
  },
  {
    id: 'CHF', name: 'Swiss Franc'
  },
  {
    id: 'GHS', name: 'Ghanian Cedi'
  },
  
  {
    id: 'INR', name: 'Indian Rupee'
  },
  {
    id: 'ZAR', name: 'South African Rand'
  },
  {
    id: 'ILS', name: 'Israeli Shekel'
  },
  {
    id: 'JPY', name: 'Japanese Yen'
  },
  {
    id: 'NGN', name: 'Nigerian Naira'
  },
  {
    id: 'CNY', name: 'Chinese Yuan'
  },
  {
    id: 'RUB', name: 'Russian Ruble'
  }];
  
  const apiBase = 'https://free.currencyconverterapi.com/api/v6/';
  const api = (currency,currency2) => `
    ${apiBase}convert?q=${currency}_${currency2}&compact=ultra&apiKey=bc3c1ae7e4fe84c4cce0`;

    const toast = (msg) => {
        const toastr = document.querySelector('.messages');
        if(!toastr) return;
        
        toastr.textContent = msg;
        if(!toastr.classList.contains('on')) {
          toastr.classList.add('on');
        }
      };

      const doneToasting = () => {
        const toastr = document.querySelector('.messages');
        if(!toastr) return;
        
        toastr.textContent = '';
        toastr.classList.remove('on');
      };
      

      const conversionSucceeded = (apiResponse) => {
        if(!apiResponse) {
          toast(`nothing to display ...`);
          return;
        }
        const [value] = Object.values(apiResponse) // if response is true return value showing the convert rate

        const btn = document.querySelector('button');
        btn.removeAttribute('disabled');

    const display = document.querySelector('.conversion');
    const formatter = new Intl.NumberFormat(
        'en-NG', { style: 'currency', currency: `${getSelectedCurrency2()}`}

    );

    let amount=document.getElementById("Amount").value;
    amount=amount==0?1:amount;
    display.textContent = formatter.format(value*amount); // command to convert currency in user given amount
    doneToasting(); // note that this doneToasting was declared before now this is going to show the convert rate is set this to be doneToasting
  };

  const createNode=(element) =>{
      return document.createElement(element);
  }

  const append=(parent, el)=> {
      return parent.appendChild(el);
  }
  const populateCurrencies=()=>{
      currencies.map(c => {
        let opt= createNode("option");
        opt.setAttribute("value",c.id);
        let text=document.createTextNode(`${c.name}`)
        append(opt,text);
        let sel=document.getElementsByClassName("select-text")[0];
        append(sel,opt);
      } );
  }
  const populateCurrencies2=()=>{
    currencies.map(c => {
      let opt= createNode("option");
      opt.setAttribute("value",c.id);
      let text=document.createTextNode(`${c.name}`)
      append(opt,text);
      let sel=document.getElementsByClassName("select-text")[1];
      append(sel,opt);
    } );
  }

  const getSelectedCurrency = () =>{
      // here, determine and return the selected value
      // of the SELECT element
      return document.getElementsByClassName("select-text")[0].value;
  };
  
  const getSelectedCurrency2 = () =>{
    // here, determine and return the selected value
    // of the SELECT element
    return document.getElementsByClassName("select-text")[1].value;
  };

  // function to convert currency
  const convert = (event) => {
    toast(`preparing to convert ....`);

    const btn = event ?
        event.target : document.querySelector('button');

    const selected = getSelectedCurrency();

    if(!selected|| selected.trim() === ''
    || !currencies.map(c => c.id).includes(selected)) return;

    const selected2 = getSelectedCurrency2();

    if(!selected2|| selected2.trim() === ''
    || !currencies.map(c => c.id).includes(selected2)) return;

    btn.setAttribute('disabled', 'disabled');
    toast(`converting ...`);

    const endpoint = api(selected,selected2);

    // make a GET fetch call to the endpoint
    // variable declared above, convert the response to JSON,
    // then call conversionSucceeded and pass the JSON data to it

    fetch(endpoint) // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json())
    .then((data) =>{
        conversionSucceeded(data);
    })
    .catch((error)=>{
        console.log(error);
    });
  };

  const startApp = () =>{
      // call populateCurrencies here
      populateCurrencies();
      populateCurrencies2();
      // add a click listener to the button here
      let draw = document.getElementsByClassName("btn")[0];
      draw.addEventListener("click", ()=>{
        document.getElementsByClassName("conversion")[0].style.display="block";
        convert(event);
      });
  }
  startApp(); // now i have called the function so this app will work now

That's all now you've successfully created this Build Currency Converter. If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

Build Currency Converter using HTML CSS & JavaScript

Creative Tutorials

Post a Comment

Post a Comment

Contact Form