[Python] I'm trying to create a currency converter but it seems like i can't manage to...

I'm trying to build a currency converter app. Whenever a user enters some data on the frontend, I want to get it on the backend and then send the response to them. For example, if a user wants to convert from US dollars to Euro, as soon as the user enters that, I want to display the conversion result as well as the conversion rate in the frontend to the user. It seems like I can't manage to finish it; if anyone can help me, that would be amazing. What I want to do is that, as soon as the user finishes entering the required data and clicks the submit button, I want to display the result below the conversion results paragraph you see on the picture.

This is the link of the API key i'm using:https://www.exchangerate-api.com/docs/pair-conversion-requests Take a look at my Python and HTML code to see how you can help me with that.

Here is the picture of the frontend

all_codes =[
"USD",
"AED",
"AFN",
"ALL",
"AMD",
"ANG",
]

app = Flask(__name__)
@app.route("/", methods=["POST", "GET"])
def home():
API = MY_API_KEY
codes = all_codes
if request.method == "POST":
base_code = request.form["currency"]
target = request.form["target_currency"]
amount = request.form["amount"]
url = f"https://v6.exchangerate-api.com/v6/{API}/pair/{base_code}/{target}/{amount}"
response = requests.get(url)
data = response.json()
return render_template("index.html", codes=codes, data=data)
else:
return render_template("index.html", codes=codes)

if __name__ == "__main__":
app.run(debug=True)



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css">
<title>Document</title>
</head>
<body>

<h1>Welcome to our Currency converter</h1>
<div class="container">
<h2>Convert your money</h2>
<div class="display-section">
<p>Get country's code</p>
<section class="first-section">
<select name="select" id="currency-codes">
{% for code in codes%}
<option value="">{{ code }}</option>
{% endfor %}
</select>
</section>

<section>
<form action="/submit" class="currency-form" method="POST">
<label for="amount">Enter an integer to convert</label>
<input type="number" id="amount">

<label for="currency">From curency:</label>
<input type="text" id="curency">

<label for="target_currency">To currencies</label>
<input type="text" placeholder="USD EUR">

<button class="btn" type="submit">Convert</button>
</form>
<p>Conversion results:</p>
{% for item in data %}
<h3>{{item.conversion_rate}}</h3>
{% endfor %}
</section>
</div>
</div>
</body>
</html>

Continue reading...