💱 Building a Currency Converter Using Flask
I created this project because I needed a simple way to check currency differences while living in Switzerland. As a Korean currently residing here, I often shop in nearby countries like Germany or Austria, or sometimes order items from Korea. Every time, I found myself wondering how the prices compared to Swiss Francs and what the actual cost would be after conversion.
This project was born out of that everyday frustration. By using an external API, the converter provides real-time exchange rates and helps calculate accurate values instantly. It’s a practical tool built from a real need — and a great learning experience at the same time.
📂 1. Project Structure
currency_converter/
│── app.py
└── templates/
└── index.html
🧠 2. How It Works
- User enters amount + selects currencies
- Flask sends a request to the Frankfurter API
- The API returns live exchange rates in JSON
- Flask calculates the converted amount and renders it in the template
- Includes error handling + same-currency logic
🖥️ 3. Backend Code (app.py)
from flask import Flask, render_template, request
import requests
app = Flask(__name__)
API_URL = "https://api.frankfurter.app/latest" # Frankfurter API endpoint
@app.route("/", methods=["GET", "POST"])
def index():
result = None
if request.method == "POST":
amount = float(request.form.get("amount"))
from_currency = request.form.get("from")
to_currency = request.form.get("to")
# Prevent conversion between identical currencies
if from_currency == to_currency:
result = {
"from": from_currency,
"to": to_currency,
"amount": amount,
"converted": amount,
"rate": 1.0
}
return render_template("index.html", result=result)
# Request to Frankfurter API
url = f"{API_URL}?from={from_currency}&to={to_currency}"
response = requests.get(url)
data = response.json()
print("API Response:", data)
try:
rate = data["rates"][to_currency]
converted = round(amount * rate, 2)
result = {
"from": from_currency,
"to": to_currency,
"amount": amount,
"converted": converted,
"rate": rate
}
except KeyError:
result = {
"error": "Conversion failed. Please check the currency codes."
}
return render_template("index.html", result=result)
if __name__ == "__main__":
app.run(debug=True)
🌐 4. Frontend Template (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Currency Converter</title>
<style>
body {
font-family: 'Inter', sans-serif;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f7f6;
}
h1 { color: #2c3e50; margin-bottom: 20px; }
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
input, select, button {
padding: 12px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 6px;
width: 100%;
box-sizing: border-box;
}
button {
background-color: #3498db;
color: white;
font-weight: bold;
cursor: pointer;
}
button:hover { background-color: #2980b9; }
.result-box {
margin-top: 30px;
padding: 20px;
background: #ecf0f1;
border-radius: 10px;
max-width: 400px;
width: 100%;
text-align: center;
}
.error-message { color: #e74c3c; font-weight: bold; }
</style>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<h1>Currency Converter</h1>
<form method="POST" style="width: 100%; max-width: 400px;">
<input type="number" step="0.01" name="amount" placeholder="Enter Amount" required>
<select name="from">
<option value="CHF">CHF (Swiss Franc)</option>
<option value="USD">USD (US Dollar)</option>
<option value="EUR">EUR (Euro)</option>
<option value="KRW">KRW (South Korean Won)</option>
</select>
<select name="to">
<option value="KRW">KRW (South Korean Won)</option>
<option value="EUR">EUR (Euro)</option>
<option value="USD">USD (US Dollar)</option>
<option value="CHF">CHF (Swiss Franc)</option>
</select>
<button type="submit">Convert</button>
</form>
{% if result %}
<div class="result-box">
{% if result.error %}
<p class="error-message">Error: {{ result.error }}</p>
{% else %}
<h3>Result</h3>
<p>
{{ result.amount }} {{ result.from }} →
<span style="font-weight: bold; color: #27ae60;">
{{ result.converted }} {{ result.to }}
</span>
</p>
<p>Exchange Rate: 1 {{ result.from }} = {{ result.rate }} {{ result.to }}</p>
{% endif %}
</div>
{% endif %}
</body>
</html>
📘 5. What I Learned
- How to build a web form and process POST requests in Flask
- How to fetch live data from an external API
- How to handle JSON responses safely
- How to render data dynamically with Jinja2
- Basic UI styling with HTML + CSS
🔧 6. Try It Yourself — Easy Improvements
Here are some beginner-friendly tasks you can try on your own:
- Add input validation — prevent empty or negative numbers.
- Show conversion history — save each result to a list or database.
- Add more currencies — expand the dropdown list.
- Improve the UI — center the layout, add icons, or change colors.
- Make a mobile-friendly version — adjust spacing for small screens.
Small steps like these help you understand Flask more deeply.
Try one or two and watch how quickly the project evolves!
