AK

Currency Converter using Svelte

Ashutosh Kukreti -

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.