Hi everyone I'll show you today how to create a simple currency converter in Python and Flask to display it on the web.
First we need to make sure that Flask is installed properly, to do that open Powershell or CMD in windows and make sure to run it as administrator by right click it and then run as Administrator, Flask is easy to install by typing this command:
pip install flask
After installing Python ofcourse you can check this link on how to install Python on windows:
(https://www.geeksforgeeks.org/how-to-install-python-on-windows/)
After installing Flask successfully create a folder named currency_converter and inside that folder create a txt file called app.py and make sure to change extension from .txt to .py and then inside currency_converter folder create another folder named (templates) and make sure that this folder named exactly as templates otherwise Flask won't run, then inside templates folder create a single file named index.html you can just create a txt file then rename it index.html and make sure the extension is .html
Here is the code for app.py file:
from flask import Flask, render_template, request, redirect, url_for
import requests
app = Flask(__name__)
API_URL = "https://api.exchangerate-api.com/v4/latest/{}"
@app.route("/", methods=["GET", "POST"])
def index():
if request.method == "POST":
from_currency = request.form["from_currency"].upper()
to_currency = request.form["to_currency"].upper()
amount = float(request.form["amount"])
# Fetch exchange rate data
response = requests.get(API_URL.format(from_currency))
if response.status_code == 200:
data = response.json()
rates = data.get("rates", {})
if to_currency in rates:
conversion_rate = rates[to_currency]
converted_amount = amount * conversion_rate
return render_template(
"index.html",
converted_amount=converted_amount,
from_currency=from_currency,
to_currency=to_currency,
amount=amount,
)
else:
error = f"Currency '{to_currency}' not found."
return render_template("index.html", error=error)
else:
error = f"Error fetching data for '{from_currency}'."
return render_template("index.html", error=error)
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
And here is the code for HTML file with css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<style>
/* General body styling */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #6dd5fa, #2980b9);
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Centering the container */
.container {
background: #ffffff10; /* Semi-transparent white */
border-radius: 10px;
padding: 20px 30px;
max-width: 400px;
width: 100%;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
text-align: center;
}
/* Header styling */
h1 {
font-size: 28px;
margin-bottom: 20px;
color: #fff;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}
/* Input and button styling */
input, button {
display: block;
width: 100%;
margin: 10px 0;
padding: 12px;
font-size: 16px;
border: none;
border-radius: 5px;
}
input {
background: #ffffff80; /* Semi-transparent white */
color: #333;
}
button {
background: #2980b9;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #1e5786;
}
/* Result message styling */
.result {
background: red;
padding: 10px;
border-radius: 5px;
margin-top: 20px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.result p {
margin: 0;
font-size: 18px;
}
/* Error message styling */
.error {
color: #ff4d4d;
margin: 10px 0;
font-weight: bold;
}
/* Responsive design */
@media (max-width: 480px) {
.container {
padding: 15px 20px;
}
h1 {
font-size: 22px;
}
input, button {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Currency Converter</h1>
{% if error %}
<p class="error">{{ error }}</p>
{% endif %}
{% if converted_amount %}
<div class="result">
<p>{{ amount }} {{ from_currency }} = {{ converted_amount | round(2) }} {{ to_currency }}</p>
</div>
{% endif %}
<form method="POST" action="/">
<input type="text" name="from_currency" placeholder="From currency (e.g., USD)" required>
<input type="text" name="to_currency" placeholder="To currency (e.g., EUR)" required>
<input type="number" step="0.01" name="amount" placeholder="Amount" required>
<button type="submit">Convert</button>
</form>
</div>
</body>
</html>
Then open Powershell or CMD and navigate to your currency_converter folder location and type:
flask run
This will create a webserver on your machine with ip and port number as the following:
http://127.0.0.1:5000
Open a web browser then copy this address and paste it in your browser and try the currency converter.
For the currency list of codes check this web site:
(https://taxsummaries.pwc.com/glossary/currency-codes)
Enjoy and thank you so much.
Top comments (0)