Have you ever tried to offer a product, a service, or simply wanted to display prices in different currencies? Then you know how hard it can be to provide up-to-date and accurate exchange rates.<\/p>\n\n\n\n
This is where currency exchange APIs come in. An exchange API helps you handle your forex rate conversions. In this example, we will look at how to integrate a currency API into a simple Python application using the Flask web framework and a bit of Javascript for the front-end styling so you can build your own currency converter.<\/p>\n\n\n\n
First, we will set up our development stack:<\/p>\n\n\n\n
To get started, we need to initialize a Vite project in our development workspace:<\/p>\n\n\n
\nyarn create vite currency-converter --template vanilla\n<\/pre><\/div>\n\n\nStep 2: Styling setup (optional)<\/h3>\n\n\n\n
Styling is optional, but if you choose to follow this step, we recommend using Tailwind CSS. Autoprefixer & postcss further enable a smooth development experience. Therefore, we need to install these packages:<\/p>\n\n\n
\nyarn add -D tailwindcss postcss autoprefixer\n<\/pre><\/div>\n\n\nNow we can initialize tailwind. This creates a config file (tailwind.config.js):<\/p>\n\n\n
\nnpx tailwindcss init\n<\/pre><\/div>\n\n\nWe now need to adapt this newly created config to work with our Vite project setup:<\/p>\n\n\n
\nmodule.exports = {\n content: [\n '.\/main.js',\n '.\/index.html',\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}\n<\/pre><\/div>\n\n\nTo include Tailwind CSS, add the following lines at the top of your style.css:<\/p>\n\n\n
\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/pre><\/div>\n\n\nNext, we need to create a config file named postcss.config.js in our root directory for postcss. We, therefore, add:<\/p>\n\n\n
\nmodule.exports = {\n\tplugins: [\n \trequire('tailwindcss'),\n \trequire('autoprefixer')\n\t]\n}\n<\/pre><\/div>\n\n\nStep 3: Starting vite<\/h3>\n\n\n\n
We can now start vite in dev mode to serve our files with hot reloading:<\/p>\n\n\n
\nyarn dev\n<\/pre><\/div>\n\n\nStep 4: Preparing our HTML<\/h3>\n\n\n\n
Next, we want to adapt the default landing page. To do so, we open the index.html and build a form. We will need the following elements:<\/p>\n\n\n\n
- A wrapper for our input <form id=\u201dcurrency_converter\u201d>t<\/li>
- An input for our base currency: <input id=\u201dbase_currency_input\u201d><\/li>
- A base currency selection <select id=\u201dcurrency\u201d><\/li>
- A submit button <button type=\u201dsubmit\u201d><\/li>
- A response container <div id=\u201dresult\u201d><\/li><\/ul>\n\n\n\n
Here is what our implementation of the index.html looks like:<\/p>\n\n\n
\n<!DOCTYPE html>\n<html lang="en">\n \n<head>\n <meta charset="UTF-8" \/>\n <link rel="icon" type="image\/svg+xml" href="favicon.svg" \/>\n <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n <title>Currency converter example<\/title>\n<\/head>\n \n<body class="bg-gradient-to-b from-cyan-800 to-slate-800 min-h-screen py-5">\n <form id="currency_converter" class="mx-auto w-full max-w-sm bg-white shadow rounded-md p-5 space-y-3 text-sm">\n <div class="flex items-center space-x-5">\n <label for="base_currency_input">Amount:<\/label>\n <input type="tel" id="base_currency_input" name="base_currency_input" placeholder="1" value=""\n class="grow border-slate-300 border rounded-md py-2 px-4 text-sm" required \/>\n <\/div>\n <div class="flex items-center space-x-5">\n <label for="currency">Currency:<\/label>\n <select name="currency" id="currency"\n class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">\n <option selected value="USD">USD<\/option>\n <option value="EUR">EUR<\/option>\n <option value="CHF">CHF<\/option>\n <\/select>\n <\/div>\n <button type="submit" class="bg-slate-800 text-white rounded-md py-2 px-4 mx-auto relative block w-full">Convert\n <\/button>\n <\/form>\n <div id="result"\n class="mx-auto my-5 w-full max-w-sm bg-white shadow rounded-md relative overflow-hidden text-sm empty:hidden divide-y divide-dotted divide-slate-300">\n <\/div>\n <script type="module" src="\/main.js"><\/script>\n<\/body>\n \n<\/html>\n<\/pre><\/div>\n\n\nStep 5: Handling the form submission in JavaScript<\/h3>\n\n\n\n
In our main.js, we send the currency amount (`base_currency_input`) and the currency (`base_currency`) to our backend. We will receive a list of all currencies and the corresponding values in the response.<\/p>\n\n\n
\nimport '.\/style.css'\n \nconst currencyConverter = document.getElementById('currency_converter');\nconst baseCurrencyInput = document.getElementById('base_currency_input');\nconst baseCurrency = document.getElementById('currency');\nconst resultContainer = document.getElementById('result');\n \ncurrencyConverter.addEventListener('submit', (e) => {\n e.preventDefault();\n \n fetch(`http:\/\/localhost:6001\/convert?` + new URLSearchParams({ 'base_currency_input': baseCurrencyInput.value, 'currency': baseCurrency.value }))\n .then(response => response.json())\n .then(data => {\n var result = '<div class="space-y-1 px-5 py-3 border-2 rounded-md">';\n for (let entry of data) {\n result += `<div class="flex items-baseline justify-between"><span class="font-medium">${entry.code}:<\/span><span>${entry.value}<\/span><\/div>`;\n }\n resultContainer.innerHTML = result;\n });\n});\n<\/pre><\/div>\n\n\nStep 6: Preparing the backend application<\/h3>\n\n\n\n
Now, we create a new folder, ie: `backend-application` inside the `currency-converter` folder:<\/p>\n\n\n\n