- Exchange Rate / form / Vue / Vue 3 / Vue.js
How to Use Custom Currency Exchange Rate Form in VueJS With Exchange Rate API
Use Custom Currency Exchange Rate Form Vue.js and it’s easily customizable. also without any npm plugin and jquery.
Step 1: Components
<template>
<div class="container pt-100">
<div class="currency-form">
<h1 class="mb-4">Vue.js Currency Exchange Form</h1>
<form @submit.prevent>
<div class="form-group">
<label>From</label>
<div class="p-relative">
<input
class="form-control"
type="number"
name="input-one"
id="input-one"
v-model="amountOne"
@input="fetchData()"
/>
<select class="dropdown-toggle" name="first-currency" id="first-currency" v-model="currency_one">
<option
:value="item.currency"
v-for="item in items"
:key="item.id"
>
{{item.currency}}
</option>
<!-- <option value="EUR">EUR</option>
<option value="AUD">AUD</option> -->
</select>
</div>
</div>
<div class="swap-btn d-flex align-items-center">
<button @click="switchValuse()" type="button">
<img src="https://cdn-icons-png.flaticon.com/512/226/226139.png" alt="swap">
</button>
<h4>1 {{currency_one}} = {{rate}} {{currency_two}}</h4>
</div>
<div class="form-group">
<label>To</label>
<div class="p-relative">
<input
class="form-control mb-5"
id="amount-two"
placeholder="0"
disabled
v-model="amountTwo"
/>
<select class="dropdown-toggle" name="second-currency" id="second-currency" v-model="currency_two">
<option
:value="item.currency"
v-for="item in items"
:key="item.id"
>
{{item.currency}}
</option>
<!-- <option value="EUR">EUR</option>
<option value="AUD">AUD</option> -->
</select>
</div>
</div>
<button type="submit" class="default-btn position-relative">
Convert Now
<i class="flaticon-chevron right-icon"></i>
</button>
</form>
</div>
</div>
</template>Step 2: Script JS
<script>
export default {
data (){
return {
data: [],
currency_one: 'USD',
currency_two: 'EUR',
rate: '',
amountOne: 1,
amountTwo: 0,
items: [
{
"id": 1,
"currency": "USD"
},
{
"id": 2,
"currency": "EUR"
},
{
"id": 3,
"currency": "ALL"
},
{
"id": 4,
"currency": "AMD"
},
{
"id": 6,
"currency": "ANG"
},
{
"id": 6,
"currency": "AOA"
},
{
"id": 7,
"currency": "ARS"
},
{
"id": 8,
"currency": "AUD"
},
{
"id": 9,
"currency": "AWG"
},
{
"id": 10,
"currency": "AZN"
},
// Add more from the Exchange Rate API
],
}
},
methods: {
fetchData(){
fetch(`https://v6.exchangerate-api.com/v6/c49aeea8337e92941799d8ec/latest/${this.currency_one}`)
.then((res) => res.json())
.then((data) => {
this.data = data
this.rate = data.conversion_rates[this.currency_two];
this.amountTwo = this.amountOne * this.rate.toFixed(2);
})
},
switchValuse(){
const temporaryValue = this.currency_one
this.currency_one = this.currency_two
this.currency_two = temporaryValue
this.fetchData();
},
},
mounted(){
this.fetchData();
}
}
</script>Step 3: SCSS
<style lang="scss" scoped>
.currency-form {
box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.1);
background: #ffffff;
border-radius: 20px;
max-width: 800px;
margin: auto;
padding: 65px;
h1 {
color: #000000;
}
form {
.form-group {
margin-bottom: 30px;
label {
display: block;
margin-bottom: 10px;
color: #000000;
font: {
weight: 500;
size: 17px;
};
}
.form-control {
border: 0;
height: 55px;
box-shadow: unset;
padding-left: 22px;
border-radius: 5px;
color: var(--blackColor);
background-color: #ffffff !important;
color: #000000 !important;
border: 1px solid #eeeeee;
font: {
weight: 600;
size: 17px;
};
&::placeholder {
color: #000000 !important;
}
}
.dropdown-toggle {
background-color: #f5f5f5;
color: #000000;
padding-left: 10px;
border-radius: 5px;
position: relative;
text-align: start;
display: block;
height: 55px;
width: 100%;
border: 0;
font: {
weight: 500;
size: 17px;
};
img {
top: 50%;
left: 22px;
width: 30px;
position: absolute;
transform: translateY(-50%);
}
strong {
font-weight: 600;
color: #000000;
}
&::after {
display: none;
}
&::before {
top: 50%;
right: 22px;
content: "\f114";
position: absolute;
transform: translateY(-50%);
font: {
size: 18px;
weight: 600;
family: flaticon;
};
}
}
.dropdown-menu {
box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
transform: translateY(0) !important;
transition: var(--transition);
top: 55px !important;
visibility: hidden;
display: block;
height: 192px;
width: 100%;
padding: 0;
opacity: 0;
border: 0;
overflow: {
y: scroll;
x: hidden;
};
li {
border-bottom: 1px solid #eeeeee;
.dropdown-item {
background-color: transparent !important;
transition: 0.5s;
color: #000000;
padding: 12px 0 12px 65px;
position: relative;
font: {
weight: 500;
size: 17px;
};
strong {
font-weight: 600;
color: #000000;
}
img {
top: 50%;
left: 22px;
width: 30px;
position: absolute;
transform: translateY(-50%);
}
&:hover {
background-color: #f8f8f8 !important;
}
}
&:last-child {
border-bottom: none;
}
}
&.toggler {
opacity: 1;
visibility: visible;
}
}
.p-relative {
position: relative;
.form-control {
padding-left: 120px;
}
.dropdown-toggle {
padding: 0 30px 0 10px;
width: auto;
position: absolute;
top: 0;
left: 0;
border-right: 1px solid #eeeeee;
}
}
}
.swap-btn {
text-align: center;
margin-top: -15px;
justify-content: center;
button {
transition: 0.5s;
background-color: #f5f5f5;
border-radius: 50%;
position: relative;
height: 50px;
width: 50px;
border: 0;
margin-right: 5px;
img {
left: 0;
right: 0;
top: 50%;
width: 25px;
position: absolute;
transform: translateY(-50%);
margin: {
left: auto;
right: auto;
};
}
&:hover {
background-color: #f5f5ff;
}
}
h4 {
margin: 0;
font-size: 18px;
color: #000000;
font-weight: 700;
}
}
.default-btn {
display: block;
width: 100%;
i {
right: auto;
margin-left: 5px;
opacity: 1 !important;
visibility: visible !important;
}
&:hover {
padding: {
left: 40px;
right: 57px;
};
}
}
}
}
</style>
