In this article, we learn how to develop a simple currency convertor using Svelte. To start with let's create a project in Svelte
npx degit sveltejs/template CurrencyConv
cd CurrencyConv
yarn install
yarn dev
The app will run at http://localhost:8080
In the index.html under the public folder, add the Tailwind css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
</body>
</html>
NOTE:- Adding Tailwind via CDN is not a bad idea but not recommended. If you want to integrate Tailwind properly then follow this article.
Next is to add a Component CurrencyConverter.svelte
In this we'll use https://currencyconverterapi.com/ API to convert the currency. Please register and get a Free API key in order to proceed.
<script>
let amount = 0.00;
let convertFrom = 'INR';
let finalAmount = '';
let convertTo = '';
let currencyList = [
{name : "USD", desc:"US Dollar"},
{name:"EUR", desc:"Euro"},
{name:"INR", desc:"Indian Rupee"}
];
async function convertCurrency() {
finalAmount = 0.00
}
</script>
<div class="mt-4 rounded shadow border bg-red-50">
<div id="currency-converter" class="px-4 py-4">
<h1 class="font-bold text-3xl font-sans justify-center mb-10">
Currency Converter
</h1> <br />
<span class="mt-10">Enter Amount:</span>
<input class="px-2 py-2 focus:ring-indigo-500 focus:border-indigo-500 rounded sm:text-sm border-gray-300" type="number" name="currencyAmount" placeholder="Enter Amount" bind:value="{amount}" />
<br /> <br/>
<span>Convert From:</span>
<select class="px-4 py-3 rounded-full" bind:value={convertFrom} >
{#each currencyList as cl }
<option value="{cl.name}">
{cl.desc}
</option>
{/each}
</select>
<span class="ml-10 mr-10">Convert To:</span>
<select class="px-4 py-3 rounded-full" bind:value={convertTo} on:change="{convertCurrency}">
{#each currencyList as cl }
<option value="{cl.name}">
{cl.desc}
</option>
{/each}
</select><br/><br/>
<span> {amount} {convertFrom} equals {finalAmount} {convertTo}</span>
</div>
</div>
We create input parameters and bind the values. And on the second select we bind an onChange function convertCurrency. Whenever we change the values of second select, it'll call a function.
Now we need to convertCurrency() function.
let curKey = convertTo + '_' + convertFrom;
let url = "https://free.currconv.com/api/v7/convert?q=" + curKey + "&compact=ultra&apiKey=f3ff612a1eaaf011f3c6"
await fetch(url).then( response => {
return response.json()
})
.then( data => {
let rate = data[curKey]
finalAmount = rate * amount
})
Here is the complete content of CurrencyConverter.svelte component.
<script>
let amount = 0.00;
let convertFrom = 'INR';
let finalAmount = '';
let convertTo = '';
let yourApi = 'YOUR_API_KEY';
let currencyList = [
{name : "USD", desc:"US Dollar"},
{name:"EUR", desc:"Euro"},
{name:"INR", desc:"Indian Rupee"}
];
async function convertCurrency() {
finalAmount = 0.00
let curKey = convertFrom + '_' + convertTo;
let url = "https://free.currconv.com/api/v7/convert?q=" + curKey + "&compact=ultra&apiKey=yourApi
await fetch(url).then( response => {
return response.json()
})
.then( data => {
let rate = data[curKey]
finalAmount = rate * amount
})
}
</script>
<div class="mt-4 rounded shadow border bg-red-50">
<div id="currency-converter" class="px-4 py-4">
<h1 class="font-bold text-3xl font-sans justify-center mb-10">
Currency Converter
</h1> <br />
<span class="mt-10">Enter Amount:</span>
<input class="px-2 py-2 focus:ring-indigo-500 focus:border-indigo-500 rounded sm:text-sm border-gray-300" type="number" name="currencyAmount" placeholder="Enter Amount" bind:value="{amount}" />
<br /> <br/>
<span>Convert From:</span>
<select class="px-4 py-3 rounded-full" bind:value={convertFrom} >
{#each currencyList as cl }
<option value="{cl.name}">
{cl.desc}
</option>
{/each}
</select>
<span class="ml-10 mr-10">Convert To:</span>
<select class="px-4 py-3 rounded-full" bind:value={convertTo} on:change="{convertCurrency}">
{#each currencyList as cl }
<option value="{cl.name}">
{cl.desc}
</option>
{/each}
</select><br/><br/>
<span> {amount} {convertFrom} equals {finalAmount} {convertTo}</span>
</div>
</div>
And now open the App.svelte and replace the contents with
<script>
import CurrencyConverter from "./CurrencyConverter.svelte";
</script>
<main>
<CurrencyConverter />
</main>
Now you are ready with your currency converter. Though its not perfect but not a bad starting point.
Top comments (0)