How to create a real-time currency converter app using Flask

Flask is a Python micro web framework. In this shot, we will create a real-time currency converter application where you can add any currency and get the current exchange rate in any other country’s currency.

Installing the dependencies

First, run the following commands to install the required dependencies:

pip install pipenv 
pipenv shell 
pipenv install Flask
pipenv install requests

Before starting to code, remember to generate the relevant API keys.

Code

The following code is from the file app.py.

In the section below, we import the relevant libraries and define our main function.

from flask import Flask, render_template, request
import requests
app = Flask(__name__)
API_KEY = 'your keys'
# 
#example from the website docs
#use it to understand how I did it
@app.route('/docs', methods=['GET'])
def docs():
    url = 'https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency=USD&to_currency=JPY&apikey=demo'
    r = requests.get(url)
    data = r.json()
    print(data)
    return data	
if __name__ == "__main__":
	app.run(debug=True)

Here, we define the routes our app will take while processing user requests.

@app.route('/', methods=['GET', 'POST'])
def home():
	if request.method == 'POST':
		# try and except method to avoid the app shutting down due to error
		try:
			# try to get the request from the html
			amount = request.form['amount']
			amount = float(amount)#inorder to display in decimals
			# try to get the request from the html
			convert_from = request.form['convert_from']
			convert_to = request.form['convert_to']
			# linking the api
			#adding convert_from and convert_to
			url = f'https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency={convert_from}&to_currency={convert_to}&apikey={API_KEY}'
			# making use of python requests to get the Api
			response = requests.get(url).json()
			# getting the particular API property
			# like the exchange rate
			Exchange_rate = response['Realtime Currency Exchange Rate']['5. Exchange Rate']
			Exchange_rate = float(Exchange_rate) #inorder to display in decimals
			#multiplying the exchange rate by the amount
			result = Exchange_rate * amount
			#getting other responses 
			convert_from_code = response['Realtime Currency Exchange Rate']['1. From_Currency Code']
			convert_from_name = response['Realtime Currency Exchange Rate']['2. From_Currency Name']
			convert_to_code = response['Realtime Currency Exchange Rate']['3. To_Currency Code']
			convert_to_name = response['Realtime Currency Exchange Rate']['4. To_Currency Name']
			updated_time = response['Realtime Currency Exchange Rate']['6. Last Refreshed']
			return render_template('home.html', result=round(result, 2), amount=amount,
								convert_from_code=convert_from_code, convert_from_name=convert_from_name,
								convert_to_code=convert_to_code, convert_to_name=convert_to_name, updated_time=updated_time)
		#if the request failed
		except Exception as e:
			return f'<h1> Bad Request : {e} </h1>'
            
        
	else:
		return render_template('home.html')

The section below contains HTML and is a front end view of our currency convertor app.

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Real Time Currency Converter</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

</head>

<body>

	<div class="container">

		<h1 class="align-center">

			<u>Currency Converter</u>

		</h1>

		<form action="/" method="POST" id="myform">

			<!-- select the first currency to convert from -->

			<h2 class="form-label">From :</h2>

			<input type="number" placeholder="Enter Amount"  class="form-control" name="amount" min="0" value="{{amount}}" required="required">

			<select required name="convert_from"  class="form-control" id="convert_from">

				<option value="">Choose Currency</option>

				<!-- if it exists -->

				{% if convert_from_name %}

				<option value="{{convert_from_code}}" selected>{{convert_from_name}}</option>

				{% endif %}

				<option value="AED">United Arab Emirates Dirham</option>

				<option value="AFN">Afghan Afghani</option>

				<option value="ALL">Albanian Lek</option>

				<option value="AMD">Armenian Dram</option>

				<option value="ANG">Netherlands Antillean Guilder</option>

				<option value="AOA">Angolan Kwanza</option>

				<option value="ARS">Argentine Peso</option>

				<option value="AUD">Australian Dollar</option>

				<option value="AWG">Aruban Florin</option>

				<option value="AZN">Azerbaijani Manat</option>

				<option value="BAM">Bosnia-Herzegovina Convertible Mark</option>

				<option value="BBD">Barbadian Dollar</option>

				<option value="BDT">Bangladeshi Taka</option>

				<option value="BGN">Bulgarian Lev</option>

				<option value="BHD">Bahraini Dinar</option>

				<option value="BIF">Burundian Franc</option>

				<option value="BMD">Bermudan Dollar</option>

				<option value="BND">Brunei Dollar</option>

				<option value="BOB">Bolivian Boliviano</option>

				<option value="BRL">Brazilian Real</option>

				<option value="BSD">Bahamian Dollar</option>

				<option value="BTN">Bhutanese Ngultrum</option>

				<option value="BWP">Botswanan Pula</option>

				<option value="BZD">Belize Dollar</option>

				<option value="CAD">Canadian Dollar</option>

				<option value="CDF">Congolese Franc</option>

				<option value="CHF">Swiss Franc</option>

				<option value="CLF">Chilean Unit of Account UF</option>

				<option value="CLP">Chilean Peso</option>

				<option value="CNH">Chinese Yuan Offshore</option>

				<option value="CNY">Chinese Yuan</option>

				<option value="COP">Colombian Peso</option>

				<option value="CUP">Cuban Peso</option>

				<option value="CVE">Cape Verdean Escudo</option>

				<option value="CZK">Czech Republic Koruna</option>

				<option value="DJF">Djiboutian Franc</option>

				<option value="DKK">Danish Krone</option>

				<option value="DOP">Dominican Peso</option>

				<option value="DZD">Algerian Dinar</option>

				<option value="EGP">Egyptian Pound</option>

				<option value="ERN">Eritrean Nakfa</option>

				<option value="ETB">Ethiopian Birr</option>

				<option value="EUR">Euro</option>

				<option value="FJD">Fijian Dollar</option>

				<option value="FKP">Falkland Islands Pound</option>

				<option value="GBP">British Pound Sterling</option>

				<option value="GEL">Georgian Lari</option>

				<option value="GHS">Ghanaian Cedi</option>

				<option value="GIP">Gibraltar Pound</option>

				<option value="GMD">Gambian Dalasi</option>

				<option value="GNF">Guinean Franc</option>

				<option value="GTQ">Guatemalan Quetzal</option>

				<option value="GYD">Guyanaese Dollar</option>

				<option value="HKD">Hong Kong Dollar</option>

				<option value="HNL">Honduran Lempira</option>

				<option value="HRK">Croatian Kuna</option>

				<option value="HTG">Haitian Gourde</option>

				<option value="HUF">Hungarian Forint</option>

				<option value="IDR">Indonesian Rupiah</option>

				<option value="ILS">Israeli New Sheqel</option>

				<option value="INR">Indian Rupee</option>

				<option value="IQD">Iraqi Dinar</option>

				<option value="IRR">Iranian Rial</option>

				<option value="ISK">Icelandic Krona</option>

				<option value="JEP">Jersey Pound</option>

				<option value="JMD">Jamaican Dollar</option>

				<option value="JOD">Jordanian Dinar</option>

				<option value="JPY">Japanese Yen</option>

				<option value="KES">Kenyan Shilling</option>

				<option value="KGS">Kyrgystani Som</option>

				<option value="KHR">Cambodian Riel</option>

				<option value="KMF">Comorian Franc</option>

				<option value="KPW">North Korean Won</option>

				<option value="KRW">South Korean Won</option>

				<option value="KWD">Kuwaiti Dinar</option>

				<option value="KYD">Cayman Islands Dollar</option>

				<option value="KZT">Kazakhstani Tenge</option>

				<option value="LAK">Laotian Kip</option>

				<option value="LBP">Lebanese Pound</option>

				<option value="LKR">Sri Lankan Rupee</option>

				<option value="LRD">Liberian Dollar</option>

				<option value="LSL">Lesotho Loti</option>

				<option value="LYD">Libyan Dinar</option>

				<option value="MAD">Moroccan Dirham</option>

				<option value="MDL">Moldovan Leu</option>

				<option value="MGA">Malagasy Ariary</option>

				<option value="MKD">Macedonian Denar</option>

				<option value="MMK">Myanma Kyat</option>

				<option value="MNT">Mongolian Tugrik</option>

				<option value="MOP">Macanese Pataca</option>

				<option value="MRO">Mauritanian Ouguiya (pre-2018)</option>

				<option value="MRU">Mauritanian Ouguiya</option>

				<option value="MUR">Mauritian Rupee</option>

				<option value="MVR">Maldivian Rufiyaa</option>

				<option value="MWK">Malawian Kwacha</option>

				<option value="MXN">Mexican Peso</option>

				<option value="MYR">Malaysian Ringgit</option>

				<option value="MZN">Mozambican Metical</option>

				<option value="NAD">Namibian Dollar</option>

				<option value="NGN">Nigerian Naira</option>

				<option value="NOK">Norwegian Krone</option>

				<option value="NPR">Nepalese Rupee</option>

				<option value="NZD">New Zealand Dollar</option>

				<option value="OMR">Omani Rial</option>

				<option value="PAB">Panamanian Balboa</option>

				<option value="PEN">Peruvian Nuevo Sol</option>

				<option value="PGK">Papua New Guinean Kina</option>

				<option value="PHP">Philippine Peso</option>

				<option value="PKR">Pakistani Rupee</option>

				<option value="PLN">Polish Zloty</option>

				<option value="PYG">Paraguayan Guarani</option>

				<option value="QAR">Qatari Rial</option>

				<option value="RON">Romanian Leu</option>

				<option value="RSD">Serbian Dinar</option>

				<option value="RUB">Russian Ruble</option>

				<option value="RUR">Old Russian Ruble</option>

				<option value="RWF">Rwandan Franc</option>

				<option value="SAR">Saudi Riyal</option>

				<option value="SBDf">Solomon Islands Dollar</option>

				<option value="SCR">Seychellois Rupee</option>

				<option value="SDG">Sudanese Pound</option>

				<option value="SDR">Special Drawing Rights</option>

				<option value="SEK">Swedish Krona</option>

				<option value="SGD">Singapore Dollar</option>

				<option value="SHP">Saint Helena Pound</option>

				<option value="SLL">Sierra Leonean Leone</option>

				<option value="SOS">Somali Shilling</option>

				<option value="SRD">Surinamese Dollar</option>

				<option value="SYP">Syrian Pound</option>

				<option value="SZL">Swazi Lilangeni</option>

				<option value="THB">Thai Baht</option>

				<option value="TJS">Tajikistani Somoni</option>

				<option value="TMT">Turkmenistani Manat</option>

				<option value="TND">Tunisian Dinar</option>

				<option value="TOP">Tongan Pa'anga</option>

				<option value="TRY">Turkish Lira</option>

				<option value="TTD">Trinidad and Tobago Dollar</option>

				<option value="TWD">New Taiwan Dollar</option>

				<option value="TZS">Tanzanian Shilling</option>

				<option value="UAH">Ukrainian Hryvnia</option>

				<option value="UGX">Ugandan Shilling</option>

				<option value="USD">United States Dollar</option>

				<option value="UYU">Uruguayan Peso</option>

				<option value="UZS">Uzbekistan Som</option>

				<option value="VND">Vietnamese Dong</option>

				<option value="VUV">Vanuatu Vatu</option>

				<option value="WST">Samoan Tala</option>

				<option value="XAF">CFA Franc BEAC</option>

				<option value="XCD">East Caribbean Dollar</option>

				<option value="XDR">Special Drawing Rights</option>

				<option value="XOF">CFA Franc BCEAO</option>

				<option value="XPF">CFP Franc</option>

				<option value="YER">Yemeni Rial</option>

				<option value="ZAR">South African Rand</option>

				<option value="ZMW">Zambian Kwacha</option>

				<option value="ZWL">Zimbabwean Dollar</option>

			</select>

			<!-- select the currency to convert to -->

			<h2 class="form-label">To :</h2>

			<input type="number" placeholder="Result" class="form-control" value="{{result}}" readonly>

			<select required name="convert_to" class="form-control" id="convert_to">

				<option value="">Choose Currency</option>

				{% if convert_to_name %}

				<option value="{{convert_to_code}}" selected>{{convert_to_name}}</option>

				{% endif %}

				<option value="AED">United Arab Emirates Dirham</option>

				<option value="AFN">Afghan Afghani</option>

				<option value="ALL">Albanian Lek</option>

				<option value="AMD">Armenian Dram</option>

				<option value="ANG">Netherlands Antillean Guilder</option>

				<option value="AOA">Angolan Kwanza</option>

				<option value="ARS">Argentine Peso</option>

				<option value="AUD">Australian Dollar</option>

				<option value="AWG">Aruban Florin</option>

				<option value="AZN">Azerbaijani Manat</option>

				<option value="BAM">Bosnia-Herzegovina Convertible Mark</option>

				<option value="BBD">Barbadian Dollar</option>

				<option value="BDT">Bangladeshi Taka</option>

				<option value="BGN">Bulgarian Lev</option>

				<option value="BHD">Bahraini Dinar</option>

				<option value="BIF">Burundian Franc</option>

				<option value="BMD">Bermudan Dollar</option>

				<option value="BND">Brunei Dollar</option>

				<option value="BOB">Bolivian Boliviano</option>

				<option value="BRL">Brazilian Real</option>

				<option value="BSD">Bahamian Dollar</option>

				<option value="BTN">Bhutanese Ngultrum</option>

				<option value="BWP">Botswanan Pula</option>

				<option value="BZD">Belize Dollar</option>

				<option value="CAD">Canadian Dollar</option>

				<option value="CDF">Congolese Franc</option>

				<option value="CHF">Swiss Franc</option>

				<option value="CLF">Chilean Unit of Account UF</option>

				<option value="CLP">Chilean Peso</option>

				<option value="CNH">Chinese Yuan Offshore</option>

				<option value="CNY">Chinese Yuan</option>

				<option value="COP">Colombian Peso</option>

				<option value="CUP">Cuban Peso</option>

				<option value="CVE">Cape Verdean Escudo</option>

				<option value="CZK">Czech Republic Koruna</option>

				<option value="DJF">Djiboutian Franc</option>

				<option value="DKK">Danish Krone</option>

				<option value="DOP">Dominican Peso</option>

				<option value="DZD">Algerian Dinar</option>

				<option value="EGP">Egyptian Pound</option>

				<option value="ERN">Eritrean Nakfa</option>

				<option value="ETB">Ethiopian Birr</option>

				<option value="EUR">Euro</option>

				<option value="FJD">Fijian Dollar</option>

				<option value="FKP">Falkland Islands Pound</option>

				<option value="GBP">British Pound Sterling</option>

				<option value="GEL">Georgian Lari</option>

				<option value="GHS">Ghanaian Cedi</option>

				<option value="GIP">Gibraltar Pound</option>

				<option value="GMD">Gambian Dalasi</option>

				<option value="GNF">Guinean Franc</option>

				<option value="GTQ">Guatemalan Quetzal</option>

				<option value="GYD">Guyanaese Dollar</option>

				<option value="HKD">Hong Kong Dollar</option>

				<option value="HNL">Honduran Lempira</option>

				<option value="HRK">Croatian Kuna</option>

				<option value="HTG">Haitian Gourde</option>

				<option value="HUF">Hungarian Forint</option>

				<option value="IDR">Indonesian Rupiah</option>

				<option value="ILS">Israeli New Sheqel</option>

				<option value="INR">Indian Rupee</option>

				<option value="IQD">Iraqi Dinar</option>

				<option value="IRR">Iranian Rial</option>

				<option value="ISK">Icelandic Krona</option>

				<option value="JEP">Jersey Pound</option>

				<option value="JMD">Jamaican Dollar</option>

				<option value="JOD">Jordanian Dinar</option>

				<option value="JPY">Japanese Yen</option>

				<option value="KES">Kenyan Shilling</option>

				<option value="KGS">Kyrgystani Som</option>

				<option value="KHR">Cambodian Riel</option>

				<option value="KMF">Comorian Franc</option>

				<option value="KPW">North Korean Won</option>

				<option value="KRW">South Korean Won</option>

				<option value="KWD">Kuwaiti Dinar</option>

				<option value="KYD">Cayman Islands Dollar</option>

				<option value="KZT">Kazakhstani Tenge</option>

				<option value="LAK">Laotian Kip</option>

				<option value="LBP">Lebanese Pound</option>

				<option value="LKR">Sri Lankan Rupee</option>

				<option value="LRD">Liberian Dollar</option>

				<option value="LSL">Lesotho Loti</option>

				<option value="LYD">Libyan Dinar</option>

				<option value="MAD">Moroccan Dirham</option>

				<option value="MDL">Moldovan Leu</option>

				<option value="MGA">Malagasy Ariary</option>

				<option value="MKD">Macedonian Denar</option>

				<option value="MMK">Myanma Kyat</option>

				<option value="MNT">Mongolian Tugrik</option>

				<option value="MOP">Macanese Pataca</option>

				<option value="MRO">Mauritanian Ouguiya (pre-2018)</option>

				<option value="MRU">Mauritanian Ouguiya</option>

				<option value="MUR">Mauritian Rupee</option>

				<option value="MVR">Maldivian Rufiyaa</option>

				<option value="MWK">Malawian Kwacha</option>

				<option value="MXN">Mexican Peso</option>

				<option value="MYR">Malaysian Ringgit</option>

				<option value="MZN">Mozambican Metical</option>

				<option value="NAD">Namibian Dollar</option>

				<option value="NGN">Nigerian Naira</option>

				<option value="NOK">Norwegian Krone</option>

				<option value="NPR">Nepalese Rupee</option>

				<option value="NZD">New Zealand Dollar</option>

				<option value="OMR">Omani Rial</option>

				<option value="PAB">Panamanian Balboa</option>

				<option value="PEN">Peruvian Nuevo Sol</option>

				<option value="PGK">Papua New Guinean Kina</option>

				<option value="PHP">Philippine Peso</option>

				<option value="PKR">Pakistani Rupee</option>

				<option value="PLN">Polish Zloty</option>

				<option value="PYG">Paraguayan Guarani</option>

				<option value="QAR">Qatari Rial</option>

				<option value="RON">Romanian Leu</option>

				<option value="RSD">Serbian Dinar</option>

				<option value="RUB">Russian Ruble</option>

				<option value="RUR">Old Russian Ruble</option>

				<option value="RWF">Rwandan Franc</option>

				<option value="SAR">Saudi Riyal</option>

				<option value="SBDf">Solomon Islands Dollar</option>

				<option value="SCR">Seychellois Rupee</option>

				<option value="SDG">Sudanese Pound</option>

				<option value="SDR">Special Drawing Rights</option>

				<option value="SEK">Swedish Krona</option>

				<option value="SGD">Singapore Dollar</option>

				<option value="SHP">Saint Helena Pound</option>

				<option value="SLL">Sierra Leonean Leone</option>

				<option value="SOS">Somali Shilling</option>

				<option value="SRD">Surinamese Dollar</option>

				<option value="SYP">Syrian Pound</option>

				<option value="SZL">Swazi Lilangeni</option>

				<option value="THB">Thai Baht</option>

				<option value="TJS">Tajikistani Somoni</option>

				<option value="TMT">Turkmenistani Manat</option>

				<option value="TND">Tunisian Dinar</option>

				<option value="TOP">Tongan Pa'anga</option>

				<option value="TRY">Turkish Lira</option>

				<option value="TTD">Trinidad and Tobago Dollar</option>

				<option value="TWD">New Taiwan Dollar</option>

				<option value="TZS">Tanzanian Shilling</option>

				<option value="UAH">Ukrainian Hryvnia</option>

				<option value="UGX">Ugandan Shilling</option>

				<option value="USD">United States Dollar</option>

				<option value="UYU">Uruguayan Peso</option>

				<option value="UZS">Uzbekistan Som</option>

				<option value="VND">Vietnamese Dong</option>

				<option value="VUV">Vanuatu Vatu</option>

				<option value="WST">Samoan Tala</option>

				<option value="XAF">CFA Franc BEAC</option>

				<option value="XCD">East Caribbean Dollar</option>

				<option value="XDR">Special Drawing Rights</option>

				<option value="XOF">CFA Franc BCEAO</option>

				<option value="XPF">CFP Franc</option>

				<option value="YER">Yemeni Rial</option>

				<option value="ZAR">South African Rand</option>

				<option value="ZMW">Zambian Kwacha</option>

				<option value="ZWL">Zimbabwean Dollar</option>

			</select>

			<h2 style="text-align: center;">

				<input type="submit" class="btn btn-outline-success mt-3" value="Convert">

			</h2>

			

		</form>

		{% if time %}

		<h4 style="color: red; text-align: center;">** Last Update on {{updated_time}}</h4>

		{% endif %}

	</div>

</body>

</html>

Testing

Go to your terminal and run:

python app.py

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)