How to Make Currency Converter Using Jquery
What Will I Learn?
- You will learn how to make currency converter in JavaScript.
- You will learn how to change HTML attributes through JavaScript.
Requirements
- Basic knowledge about HTML.
- Basic knowledge about Jquery.
- Your favorite text editor and browser to run HTML file
Difficulty
- Basic
Tutorial Contents
I'll show you how to make a currency converter in Jquery. You will enter amount is USD and select any listed currency to convert in.
- Open your text editor.
- Create a file save as
convert.html - Add basic HTML code.
<html>
<head>
<title>Currency Converter</title>
</head>
<body>
</body>
</html>
- Create form.
<form action="#" method="post" name="cc"></form>
- Now create an input and select tag within form tag.
Set attribute such as type, id and name as in the following code.
USD: <input id="dollar" type="text" name="dollar" ><br>
Here i added six currencies and now you can add your desired currencies what you want.
<select name="convert" id ="convert">
<option value="0">Select the Currency</option>
<option value="1">PKR</option>
<option value="2">INR</option>
<option value="3">EURO</option>
<option value="4">POUNDS</option>
<option value="5">YEN</option>
<option value="6">CAD</option>
</select><br>
- Now! underneath the select tag, put another input tag with type button.
<input type="button" name="submit" value="Convert" onclick="converter()">
- Now just below the title tag put script tag.
<script></script>
- Within the script tag, create a Jquery function named as a converter().
function converter(){}
- Now get all the necessary elements through id.
var dollar = parseInt(document.getElementById('dollar').value); //Here we parse the HTML string value into int value.
var convert = document.getElementById('convert').value;
var cv = document.getElementById('cv12');
Here is How It Works
Here is full code:
<!DOCTYPE html >
<html >
<head>
<title>Currency Converter</title>
<script>
function converter(){
var dollar = parseInt(document.getElementById('dollar').value);
var convert = document.getElementById('convert').value;
var cv = document.getElementById('cv12');
if(convert == 1){
cv.value = dollar * 110.76;
cv.type = "text";
}
if(convert == 2){
cv.value = dollar * 64.35;
cv.type = "text";
}
if(convert == 3){
cv.value = dollar * 0.82;
cv.type = "text";
}
if(convert == 4){
cv.value = dollar * 0.72;
cv.type = "text";
}
if(convert == 5){
cv.value = dollar * 108.58;
cv.type = "text";
}
if(convert == 6){
cv.value = dollar * 1.26;
cv.type = "text";
}
}
</script>
<head>
<body>
<form action="#" method="post" name="cc">
USD: <input id="dollar" type="text" name="dollar" ><br>
Convert to: <select name="convert" id ="convert">
<option value="0">Select the Currency</option>
<option value="1">PKR</option>
<option value="2">INR</option>
<option value="3">EURO</option>
<option value="4">POUNDS</option>
<option value="5">YEN</option>
<option value="6">CAD</option>
</select><br>
<input type="button" name="submit" value="Convert" onclick="converter()">
</form>
<input type="hidden" name="cv" id="cv12" readonly />
</body>
<html>
Here is live demo.
Posted on Utopian.io - Rewarding Open Source Contributors
This contribution cannot be approved because it is a duplicate of a contribution that was already rejected. Check Here
You can contact us on Discord.
[utopian-moderator]
@creon That was due to such a reason.
That was rejected due to wrong repository so i corrected that issue in this.
Hey @creon, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
@faad, I always try to support who contribute to open source project, upvote you.