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.

Svelte3Beginners

Ashutosh Kukreti

You might also like

How onDestroy() lifecycle function works in Svelte? Members Public

When we removed the component from DOM, the onDestroy() method is used. We need to call it before the component is removed from the DOM. Let's create a new component, DateAndTimeComponent.svelte And add the following code. <script> import { onMount } from 'svelte' let tasks = [] const url = 'http://time.

Ashutosh Kukreti
Svelte3

How to implement Drag in Svelte? Members Public

In this article, we learn how to implement Drag in Svelte. Before starting, you need to create a project in Svelte using the npx command. npx degit sveltejs/template Drag You need to install npx if you haven't. Drag is the name of our Project. npx degit sveltejs/template Drag

Ashutosh Kukreti
Svelte3

Featured Posts

Building Dynamic Web Applications with Laravel and HTMX

Laravel (10) Pivots: The Secret Sauce for Powerful Relationships You Won't Believe!

All about Controllers in Laravel 10

Authors →

Ashutosh Kukreti