How we can create a currency exchange calculator using HTML CSS JavaScript? Solution: See this JavaScript Currency Converter With API and CSS Styling, JS Currency Calculator Program.
Previously I have shared a simple calculator using JavaScript, but this is a currency calculator with third-party API. There is almost all currency available, you can check the exchange rate of any currency comparing to others. The exchange rates are depending on a third-party API, that’s why it will update on global rate changes.
Today you will learn to create a Currency Calculator With HTML CSS JavaScript. In other words, you can create a program for comparing money of different countries. Basically, there are two sections for two currency, you can compare them by switching up and down also you can select any currency from the dropdown.
So, Today I am sharing JavaScript Currency Converter With API and CSS Styling. There I have used a third-party JSON API for exchanging with real-time. The whole program is based on pure JavaScript, no other library or framework. This is a simple program but it is perfectly styled, you can place this on your website without making any changes.
If you are thinking now how the money calculator program actually is, then see the preview given below.
Preview Of Money Calculator Of Different Countries
See this video preview to getting an idea of how this converter looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- PHP Age Calculator Program
- JavaScript Countdown Timer
- Keycode and Keypress Detect
- Custom Select & Upload File Input
JavaScript Currency Converter With API and CSS Styling Source Code
Before sharing source code, let’s talk about it. First I have created the main div and placed two select sections for currency using HTML. Two select sections for form and to the field, that will helps you to choose the currencies. I have placed a lot of options and put their currency’s shortcode in the values. And also there I have placed a button for switching with an icon and there a field for showing the exchange rate of your selecting country.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. There I have put the icon in the exchange button with the help of font-awesome library. For the down arrow button, I have placed an SVG shape as background image, you can style this program according your choice. Also, I have done other basic styling with CSS like margin, padding, font, color, etc.
JavaScript handling here the main feature of the program. For getting real-time data I have used exchangerate-api.com‘s API. JS fetching all the sections and their values using document.getElementById command. Now JavaScript changing the values on selecting currencies and changing amount using .addEventListener command.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript Currency Converter | Webdevtrick.com</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="currency"> <select id="from_currency"> <option value="AED">AED</option> <option value="ARS">ARS</option> <option value="AUD">AUD</option> <option value="BGN">BGN</option> <option value="BRL">BRL</option> <option value="BSD">BSD</option> <option value="CAD">CAD</option> <option value="CHF">CHF</option> <option value="CLP">CLP</option> <option value="CNY">CNY</option> <option value="COP">COP</option> <option value="CZK">CZK</option> <option value="DKK">DKK</option> <option value="DOP">DOP</option> <option value="EGP">EGP</option> <option value="EUR">EUR</option> <option value="FJD">FJD</option> <option value="GBP">GBP</option> <option value="GTQ">GTQ</option> <option value="HKD">HKD</option> <option value="HRK">HRK</option> <option value="HUF">HUF</option> <option value="IDR">IDR</option> <option value="ILS">ILS</option> <option value="INR">INR</option> <option value="ISK">ISK</option> <option value="JPY">JPY</option> <option value="KRW">KRW</option> <option value="KZT">KZT</option> <option value="MXN">MXN</option> <option value="MYR">MYR</option> <option value="NOK">NOK</option> <option value="NZD">NZD</option> <option value="PAB">PAB</option> <option value="PEN">PEN</option> <option value="PHP">PHP</option> <option value="PKR">PKR</option> <option value="PLN">PLN</option> <option value="PYG">PYG</option> <option value="RON">RON</option> <option value="RUB">RUB</option> <option value="SAR">SAR</option> <option value="SEK">SEK</option> <option value="SGD">SGD</option> <option value="THB">THB</option> <option value="TRY">TRY</option> <option value="TWD">TWD</option> <option value="UAH">UAH</option> <option value="USD" selected>USD</option> <option value="UYU">UYU</option> <option value="VND">VND</option> <option value="ZAR">ZAR</option> </select> <input type="number" id="from_ammount" placeholder="0" value=1 /> </div> <div class="middle"> <button id="exchange"> <i class="fas fa-exchange-alt"></i> </button> <div class="rate" id="rate"></div> </div> <div class="currency"> <select id="to_currency"><option value="AED">AED</option> <option value="ARS">ARS</option> <option value="AUD">AUD</option> <option value="BGN">BGN</option> <option value="BRL">BRL</option> <option value="BSD">BSD</option> <option value="CAD">CAD</option> <option value="CHF">CHF</option> <option value="CLP">CLP</option> <option value="CNY">CNY</option> <option value="COP">COP</option> <option value="CZK">CZK</option> <option value="DKK">DKK</option> <option value="DOP">DOP</option> <option value="EGP">EGP</option> <option value="EUR">EUR</option> <option value="FJD">FJD</option> <option value="GBP">GBP</option> <option value="GTQ">GTQ</option> <option value="HKD">HKD</option> <option value="HRK">HRK</option> <option value="HUF">HUF</option> <option value="IDR">IDR</option> <option value="ILS">ILS</option> <option value="INR" selected>INR</option> <option value="ISK">ISK</option> <option value="JPY">JPY</option> <option value="KRW">KRW</option> <option value="KZT">KZT</option> <option value="MXN">MXN</option> <option value="MYR">MYR</option> <option value="NOK">NOK</option> <option value="NZD">NZD</option> <option value="PAB">PAB</option> <option value="PEN">PEN</option> <option value="PHP">PHP</option> <option value="PKR">PKR</option> <option value="PLN">PLN</option> <option value="PYG">PYG</option> <option value="RON">RON</option> <option value="RUB">RUB</option> <option value="SAR">SAR</option> <option value="SEK">SEK</option> <option value="SGD">SGD</option> <option value="THB">THB</option> <option value="TRY">TRY</option> <option value="TWD">TWD</option> <option value="UAH">UAH</option> <option value="USD">USD</option> <option value="UYU">UYU</option> <option value="VND">VND</option> <option value="ZAR">ZAR</option> </select> <input type="number" id="to_ammount" placeholder="0" /> </div> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background: linear-gradient(to bottom, #aff2ff 0%, #aff2ff 50%, #50dcff 50%, #50dcff 100%); font-family: 'Muli', sans-serif; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; } .currency { display: flex; align-items: center; justify-content: space-between; } .currency select { background: transparent; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat, repeat; background-position: right .2em top 50%, 0 0; background-size: .50em auto, 100%; border: 0; padding-right: 20px; font-size: 22px; -moz-appearance: none; -webkit-appearance: none; appearance: none; } .currency input { border: 0; background: transparent; font-size: 22px; text-align: right; } .middle { color: #f59300; display: flex; align-items: center; justify-content: space-between; } .middle button { background-color: #fff; border: 2px solid #ecf0f1; border-radius: 50%; cursor: pointer; color: #f59300; font-size: 18px; display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; transform: rotate(90deg); } .middle button:active { transform: rotate(90deg) scale(0.9); } .middle .rate { background-color: #fff; border: 2px solid #ecf0f1; border-radius: 50px; font-size: 18px; display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 10px; margin: 30px 15px 30px 25px; } select:focus, input:focus, button:focus { outline: 0; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// Code By Webdevtrick ( https://webdevtrick.com ) const from_currencyEl = document.getElementById('from_currency'); const from_ammountEl = document.getElementById('from_ammount'); const to_currencyEl = document.getElementById('to_currency'); const to_ammountEl = document.getElementById('to_ammount'); const rateEl = document.getElementById('rate'); const exchange = document.getElementById('exchange'); from_currencyEl.addEventListener('change', calculate); from_ammountEl.addEventListener('input', calculate); to_currencyEl.addEventListener('change', calculate); to_ammountEl.addEventListener('input', calculate); exchange.addEventListener('click', () => { const temp = from_currencyEl.value; from_currencyEl.value = to_currencyEl.value; to_currencyEl.value = temp; calculate(); }); function calculate() { const from_currency = from_currencyEl.value; const to_currency = to_currencyEl.value; fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency}`) .then(res => res.json()) .then(res => { const rate = res.rates[to_currency]; rateEl.innerText = `1 ${from_currency} = ${rate} ${to_currency}` to_ammountEl.value = (from_ammountEl.value * rate).toFixed(2); }) } calculate(); |
That’s It. Now you have successfully created JavaScript Currency Converter With API and CSS, A Currency Calculator Program. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
There was an error in js on line 16.
sorry its on line 14.
How to display only 2 digit after (.) .
If I insert this script in my website, will it convert all the currency display in the store, or only in the widget? How can I make it so that when you change currency in the widget, it changes the whole store display??
Hey, I update API to latest one and it doesn’t work, why?
I put this https://api.exchangerate-api.com/v6/latest
If you look at the new API, the field is now “rates” and not “rate” so you’d need to change line 28 of function.js since that calling the json of the API.
Congratulations ! please let me know what do to include(haitian money into the code source) because I see everything is done automatically
How can i add custom currency to the list. For example currency name ABC and rate is === to $1.50.
Thank you for any other informative site. The place else could I get that kind of info written in such a perfect way?
I’ve a challenge that I’m simply now operating on, and I have been on the glance out for such info.
Doesn’t work in IE11. Multiple Javascript and syntax errors.
can someone help me on this I want to enter a fixed rate for currencies
I only want to convert to one type of currency
Good Design, Thank you