Update app.py

app.py

@@ -2,34 +2,74 @@ import streamlit as st
 import requests
 
 # Set up your API key (Replace 'YOUR_API_KEY' with your actual API key)
-API_KEY = "YOUR_API_KEY"  # Get a free key from ExchangeRate-API or Open Exchange Rates
-API_URL = "https://open.er-api.com/v6/latest/"  # Example API endpoint
-
-# App title and description
-st.title("💱 Currency Converter")
-st.markdown("""
-This app allows you to convert between 50+ currencies in real-time. 
-Exchange rates are fetched live from the currency exchange API.
-""")
-
-# Input amount to convert
-amount = st.number_input("Enter amount to convert:", min_value=0.0, value=1.0, step=0.01)
-
-# List of currencies
-currencies = [
-    "USD", "EUR", "GBP", "INR", "JPY", "CNY", "AUD", "CAD", "CHF", "ZAR",
-    "SGD", "NZD", "MXN", "BRL", "RUB", "KRW", "HKD", "SEK", "NOK", "DKK",
-    "THB", "IDR", "TRY", "PLN", "MYR", "PHP", "ILS", "CZK", "HUF", "AED",
-    "SAR", "NGN", "EGP", "KZT", "CLP", "PKR", "BDT", "VND", "TWD", "COP",
-    "ARS", "PEN", "ISK", "BGN", "RON", "HRK", "LKR", "MAD", "OMR", "QAR"
-]
-
-# Select base and target currencies
-base_currency = st.selectbox("From currency:", currencies)
-target_currency = st.selectbox("To currency:", currencies)
-
-# Convert button
-if st.button("Convert"):
+API_KEY = "YOUR_API_KEY"  # Get your free key from ExchangeRate-API or Open Exchange Rates
+API_URL = "https://open.er-api.com/v6/latest/"
+
+# Custom CSS for better styling
+st.markdown(
+    """
+    <style>
+    .main {
+        background-color: #f7f9fc;
+        padding: 20px;
+        border-radius: 10px;
+    }
+    .title {
+        color: #4a90e2;
+        text-align: center;
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+    .instructions {
+        text-align: center;
+        font-size: 1.1rem;
+        color: #555;
+    }
+    .convert-btn {
+        background-color: #4a90e2;
+        color: white;
+        padding: 10px 20px;
+        border-radius: 5px;
+        border: none;
+        cursor: pointer;
+    }
+    .convert-btn:hover {
+        background-color: #357ABD;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+# App title
+st.markdown('<div class="title">💱 Currency Converter</div>', unsafe_allow_html=True)
+st.markdown('<div class="instructions">Convert currencies easily with real-time exchange rates for 50+ currencies.</div>', unsafe_allow_html=True)
+
+# Sidebar for user input
+with st.sidebar:
+    st.header("Conversion Settings")
+    st.markdown("Select your desired options below.")
+    
+    # Amount input
+    amount = st.number_input("Enter the amount to convert:", min_value=0.0, value=1.0, step=0.01)
+
+    # Currency selection
+    currencies = [
+        "USD", "EUR", "GBP", "INR", "JPY", "CNY", "AUD", "CAD", "CHF", "ZAR",
+        "SGD", "NZD", "MXN", "BRL", "RUB", "KRW", "HKD", "SEK", "NOK", "DKK",
+        "THB", "IDR", "TRY", "PLN", "MYR", "PHP", "ILS", "CZK", "HUF", "AED",
+        "SAR", "NGN", "EGP", "KZT", "CLP", "PKR", "BDT", "VND", "TWD", "COP",
+        "ARS", "PEN", "ISK", "BGN", "RON", "HRK", "LKR", "MAD", "OMR", "QAR"
+    ]
+    base_currency = st.selectbox("From currency:", currencies)
+    target_currency = st.selectbox("To currency:", currencies)
+
+# Layout for results
+col1, col2 = st.columns(2)
+
+# Fetch and display conversion results
+if col1.button("Convert"):
     try:
         # Fetch exchange rates
         response = requests.get(f"{API_URL}{base_currency}", params={"apiKey": API_KEY})
@@ -40,10 +80,21 @@ if st.button("Convert"):
             exchange_rate = data["rates"].get(target_currency)
             if exchange_rate:
                 result = amount * exchange_rate
-                st.success(f"{amount} {base_currency} = {result:.2f} {target_currency}")
+                col2.success(f"{amount} {base_currency} = {result:.2f} {target_currency}")
             else:
-                st.error("The selected target currency is not supported.")
+                col2.error("The selected target currency is not supported.")
         else:
-            st.error("Failed to fetch exchange rates. Please try again later.")
+            col2.error("Failed to fetch exchange rates. Please try again later.")
     except Exception as e:
-        st.error(f"An error occurred: {e}")
+        col2.error(f"An error occurred: {e}")
+
+# Footer
+st.markdown(
+    """
+    <div style="text-align: center; margin-top: 20px; color: #aaa;">
+        Powered by real-time exchange rates | © 2024 Currency Converter App
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
+