My project 2 : Currency Converter(with Python + Flask)

#python #learning #codenewbie #beginners

💱 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!

DEV Community