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>