javascript currency converter

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.

Live Demo

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:

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.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

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.

12 COMMENTS

  1. 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??

    • 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.

  2. Congratulations ! please let me know what do to include(haitian money into the code source) because I see everything is done automatically

  3. 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.

  4. 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

LEAVE A REPLY

Please enter your comment!
Please enter your name here