Hello friends, Welcome to your Technology Tips Abhishek blog. And today in this article we will learn about Currency Converter Script for Blogger: HTML JavaScript Source Code. By the way, if you are a developer or you want to create a currency conversion tool on hosting by yourself. So for this, you will need a live currency converter in php script.
Free Online Currency Converter Calculator
Friends, if you do not know that there is an online currency converter? So let me tell you that this is an online web tool. With the help of which you can easily convert any currency of any country into any other currency. Most people use it. Because they keep checking how much the value of USD to INR is today.
Especially this online tool is always the most commonly used to know the Money Exchange Rate. Because in the whole world, the value of currency daily keeps going down. By the way, you also get the top to use Google Currency Converter Tool for free on internet.
Also Read :
Currency Convertor script how to add blogger & Word press
So friends, now come the point that if you want to create this currency exchange rates tool in your blogger blog. So for this, you are going to need a currency converter script for website first. By the way, this tool was present only and only in currency converter PHP script. But now I have made the currency converter script source code html for blogger website available for you below.
Currency convertor tool inArticle form
<style>
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito',sans-serif;
}
.container h2{
padding: 8px 16px;
text-align: center;
background-color: #00796b;
color: #fafafa;
border-radius: 8px 8px 0 0;
}
.app{
padding: 8px 16px;
}
.app button{
border: none;
background-color: #00796b;
color: #fafafa;
border-radius: 3px;
padding: 8px 12px;
margin: 8px 10px;
}
.app input{
padding: 8px 15px;
margin: 8px 10px;
border-radius: 5px;
border: 1px solid #00796b;
}
.app select{
padding: 8px 15px;
margin: 8px 10px;
border-radius: 5px;
border: 1px solid #00796b;
}
.app p{
text-align: center;
font-size: 20px;
font-weight: bold;
margin: 15px 0;
}
</style>
<h2>Currency Exchanger</h2>
<div class="app">
<input id="value" type="text">
<label>From : </label>
<select id="from"></select>
<label>To :</label>
<select id="to"></select>
<button id="btn">Convert</button><br>
<p id="result"></p>
</div>
</div>
<script>
//Fetching the Code list
let currency_code = ["CAD","HKD","ISK","PHP","DKK","HUF","CZK","AUD","RON","SEK","IDR","INR","BRL","RUB","HRK","JPY","THB","CHF","SGD","PLN","BGN","TRY","CNY","NOK","NZD","ZAR","USD","MXN","ILS","GBP","KRW","MYR","EUR"];
let from = document.querySelector('#from');
let to = document.querySelector('#to');
let btn = document.querySelector('#btn');
let input = document.querySelector('#value')
let rslt = document.querySelector('#result');
for(let i = 0;i<currency_code.length;i++){
let opt1 = document.createElement('option');
opt1.appendChild(document.createTextNode(currency_code[i]));
opt1.value = currency_code[i];
let opt2 = document.createElement('option');
opt2.appendChild(document.createTextNode(currency_code[i]));
opt2.value = currency_code[i];
from.appendChild(opt1);
to.appendChild(opt2);
}
btn.addEventListener('click', function(){
let from_value = from.value;
let to_value = to.value;
let url = "https://api.exchangeratesapi.io/latest?base="+from_value;
let val = input.value;
console.log(val);
fetch(url)
.then(response =>response.json().then(data => {
console.log(data.rates[to_value])
let rate = data.rates[to_value];
console.log(val * rate)
let res = val+" "+from_value+" = "+ (val * rate)+ " " + to_value;
rslt.innerHTML = res;
}))
.catch(err =>{
console.log(err);
});
});
</script>
Currency Convertor in Template form by using HTML & Java Script with CSS
Friends is script hm apko blogger me sikhyege ki kaise aap blogger me yen currency converter tool kaise lagye
1.sabse phle go to blogger dashboard me jye
- go to theme section and select for simple blog theme applied section and change navbar off kr dena hi phle
- and click on cuastomise side arrow button and click on switch to first generation classic theme then click now switch without a backup.
- Then click now edit html and remove all code for this HTML section
- Then ap ko ye krna ki jo apko hmari site me code dikh rha hoga use aap copy krake daalskte sirf vo vala jo jisme ye likha hi ki tml form kr ke jo likha hi usme daal skte ho
- Then click now save then you will see out your blog.
Currency Convertor Tool In Blogger Static Tool
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Currency Exchanger</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito',sans-serif;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: #fafafa;
box-shadow: 0px 2px 8px rgba(30,30,30,.3);
}
.container h1{
padding: 8px 16px;
text-align: center;
background-color: #00796b;
color: #fafafa;
border-radius: 8px 8px 0 0;
}
.app{
padding: 8px 16px;
}
.app button{
border: none;
background-color: #00796b;
color: #fafafa;
border-radius: 3px;
padding: 8px 12px;
margin: 8px 10px;
}
.app input{
padding: 8px 15px;
margin: 8px 10px;
border-radius: 5px;
border: 1px solid #00796b;
}
.app select{
padding: 8px 15px;
margin: 8px 10px;
border-radius: 5px;
border: 1px solid #00796b;
}
.app p{
text-align: center;
font-size: 20px;
font-weight: bold;
margin: 15px 0;
}
</style>
<body>
<div class="container">
<h1>Currency Exchanger</h1>
<div class="app">
<input id="value" type="text">
<label>From : </label>
<select id="from"></select>
<label>To :</label>
<select id="to"></select>
<button id="btn">Convert</button><br>
<p id="result"></p>
</div>
</div>
<script src="main.js" async defer></script>
</body>
<script>
//Fetching the Code list
let currency_code = ["CAD","HKD","ISK","PHP","DKK","HUF","CZK","AUD","RON","SEK","IDR","INR","BRL","RUB","HRK","JPY","THB","CHF","SGD","PLN","BGN","TRY","CNY","NOK","NZD","ZAR","USD","MXN","ILS","GBP","KRW","MYR","EUR"];
let from = document.querySelector('#from');
let to = document.querySelector('#to');
let btn = document.querySelector('#btn');
let input = document.querySelector('#value')
let rslt = document.querySelector('#result');
for(let i = 0;i<currency_code.length;i++){
let opt1 = document.createElement('option');
opt1.appendChild(document.createTextNode(currency_code[i]));
opt1.value = currency_code[i];
let opt2 = document.createElement('option');
opt2.appendChild(document.createTextNode(currency_code[i]));
opt2.value = currency_code[i];
from.appendChild(opt1);
to.appendChild(opt2);
}
btn.addEventListener('click', function(){
let from_value = from.value;
let to_value = to.value;
let url = "https://api.exchangeratesapi.io/latest?base="+from_value;
let val = input.value;
console.log(val);
fetch(url)
.then(response =>response.json().then(data => {
console.log(data.rates[to_value])
let rate = data.rates[to_value];
console.log(val * rate)
let res = val+" "+from_value+" = "+ (val * rate)+ " " + to_value;
rslt.innerHTML = res;
}))
.catch(err =>{
console.log(err);
});
});
</script>
</html>
Conclusion :
So Friends tell me on comment on article How to add Currency Convertor Tool Script for Blogger 2020: HTML Java Script and agar apko kisi aur script hai to ya tool hi to please comment me on for new article to chaliye milte hai next post me ....
