DEV Community

Cover image for Currency Converter in python with Flask
Aj
Aj

Posted on

Currency Converter in python with Flask

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)

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay