Home Web Development JavaScript JavaScript Currency Converter With API and CSS | Currency Calculator

JavaScript Currency Converter With API and CSS | Currency Calculator

October 21, 2019

25578

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.

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.

<!DOCTYPE html>

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

</body>
</html>

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>

<head>

<title>JavaScript Currency Converter | Webdevtrick.com</title>

</head>

<body>

</select>

</div>

</button>

</div>

</select>

</div>

</body>

</html>

style.css

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

/* 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;
}

/* 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.

// 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();
});

calculate();

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

12 COMMENTS

uzair November 6, 2019 At 4:11 pm

There was an error in js on line 16.

Reply
- uzair November 6, 2019 At 4:13 pm
  
  sorry its on line 14.
  
  Reply
shamim January 5, 2020 At 8:20 am

How to display only 2 digit after (.) .

Reply
Steph February 20, 2020 At 9:55 am

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

Reply
Pit April 5, 2020 At 12:18 pm

Hey, I update API to latest one and it doesn’t work, why?
I put this https://api.exchangerate-api.com/v6/latest

Reply
- Hus August 24, 2020 At 3:20 pm
  
  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.
  
  Reply
Walnes July 28, 2020 At 8:19 pm

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

Reply
Dawda August 4, 2020 At 4:45 pm

How can i add custom currency to the list. For example currency name ABC and rate is === to $1.50.

Reply
judi mpo April 2, 2021 At 10:30 am

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.

Reply
Brett April 15, 2021 At 4:32 am

Doesn’t work in IE11. Multiple Javascript and syntax errors.

Reply
momo June 4, 2021 At 10:53 am

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

Reply
foolishdeveloper.com September 3, 2021 At 7:19 am

Good Design, Thank you

Reply