🌤️ Flask Weather App Python - LIVE DEMO + Complete Web Project
🚀 LIVE WEATHER APP WORKING NOW!
🔗 Click Here → LIVE WEATHER DEMOEnter any city → See temperature + humidity instantly!
Hey friends! Create professional WEATHER WEB APP using Python Flask + OpenWeatherMap API! Enter city name → Get live temperature & humidity. Complete project with backend Python, HTML templates, CSS styling + LIVE DEPLOYMENT on PythonAnywhere!
Perfect Flask beginner project. Copy 3 files, get FREE API key, deploy live website in 10 minutes. Backend focused with beautiful frontend ready!
📁 Complete Project Structure
weather.py→ Flask backend + API callstemplates/index.html→ Frontend formstatic/style.css→ Beautiful styling
💻 1. Backend - weather.py (Flask + API)
from flask import Flask, render_template, request
import requests
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def index():
temperature = None
humidity = None
city = None
error_message = None
if request.method == "POST":
city = request.form["city"]
API_KEY = "your_openweathermap_api_key_here"
url = f"https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric"
try:
response = requests.get(url, timeout=8)
response.raise_for_status()
data = response.json()
temperature = data["main"]["temp"]
humidity = data["main"]["humidity"]
except:
error_message = "City not found or API error!"
return render_template("index.html",
temperature=temperature,
humidity=humidity,
city=city,
error_message=error_message)
if __name__ == "__main__":
app.run(debug=True)
🌐 2. Frontend - templates/index.html
<!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="{{ url_for('static', filename='style.css') }}">
<title>Weather App</title>
</head>
<body>
<h1 class="Heading">🌤️ Weather App</h1>
<div class="Container">
<form method="POST">
<input class="InputField" type="text" name="city" placeholder="Enter city name..." required>
<button class="ButtonField" type="submit">Get Weather</button>
</form>
</div>
{% if error_message %}
<p class="ErrorMessage">{{ error_message }}</p>
{% endif %}
{% if temperature is not none and humidity is not none %}
<div class="ResultContainer">
<h2>Weather in 🌆 {{ city }}</h2>
<p>🌡️ Temperature: {{ temperature }}°C</p>
<p>💧 Humidity: {{ humidity }}%</p>
</div>
{% endif %}
</body>
</html>
🎨 3. Styling - static/style.css
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex; flex-direction: column; justify-content: center; align-items: center;
min-height: 100vh; margin: 0; font-family: Arial, sans-serif;
}
.Heading {
color: white; font-size: 2.5em; margin-bottom: 20px; text-align: center;
}
.Container {
width: 90%; max-width: 400px; background: rgba(255,255,255,0.1);
padding: 30px; border-radius: 20px; backdrop-filter: blur(10px);
}
.InputField {
width: 100%; height: 50px; border: none; border-radius: 25px;
font-size: 18px; padding: 0 20px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.ButtonField {
width: 100%; height: 50px; border: none; border-radius: 25px;
background: linear-gradient(45deg, #FF6B6B, #FF8E53); color: white;
font-size: 18px; font-weight: bold; cursor: pointer; transition: transform 0.3s;
}
.ButtonField:hover { transform: scale(1.02); }
.ResultContainer {
margin-top: 30px; padding: 20px; background: rgba(255,255,255,0.2);
border-radius: 15px; text-align: center; color: white;
}
.ErrorMessage { color: #FF6B6B; text-align: center; font-weight: bold; margin-top: 15px; }
✅ LIVE RESULT (Try Demo Above)
Delhi: 28°C | 65%
London: 15°C | 80%
🔧 5 Steps to Run LIVE
- 1. Get FREE OpenWeatherMap API key
- 2. Replace
"your_api_key_here"in weather.py - 3. Create 3 folders: templates/, static/
- 4. Copy 3 files → Run
python weather.py - 5. Visit
http://localhost:5000→ LIVE!
🎯 Perfect Flask Learning
- Flask routes + POST/GET methods
- API integration + JSON parsing
- Jinja2 templates + variables
- Error handling + try/except
- Static files serving
- Modern CSS gradients + glassmorphism
🚀 Deploy LIVE (Like Demo)
- PythonAnywhere.com → FREE hosting
- Upload 3 files → 2 minutes setup
- Get YOUR live link instantly!
💬 Try LIVE demo & comment your city weather! 🌍
Tags
beginner Python project
Bootstrap Flask app
Flask tutorial
Flask web application
OpenWeatherMap API
Python Flask weather app
Python web development
real-time weather
weather report app