DEV Community

Cover image for My project 5 : Simple Weather App (with Flask + OpenWeatherMap API)
Sabin Sim
Sabin Sim

Posted on

My project 5 : Simple Weather App (with Flask + OpenWeatherMap API)

#python #learning #codenewbie #beginners

🌦️ Building a Simple Weather App with Flask + OpenWeatherMap API

As a parent, I’ve developed a habit of checking the weather every time I take my child out for a walk. Depending on the conditions, I need to decide what clothes will keep him comfortable and safe. And like many parents, when a child gets sick, it feels as if we’re the ones hurting.

So I built this small weather app to make checking the weather a bit easier. (Although, to be honest, the weather in Switzerland is usually pretty good!)

🧱 1. Project Overview

This mini weather app allows you to:

  • Enter a city name
  • Fetch live weather data using the OpenWeatherMap API
  • Display temperature, weather description, and humidity
  • Show error messages when needed
  • Understand how Flask handles forms, templates, and API requests

A simple but practical project—great for beginners learning Flask + APIs.

🔑 2. How to Get Your OpenWeatherMap API Key

(Step-by-step story — follow along)

One thing I struggled with at first was:
Where do people get API keys? How do I get one too?
So here’s the full guide, as if you’re sitting next to me:

1) Sign Up

Go to the official OpenWeatherMap site:
🔗 https://home.openweathermap.org/users/sign_up

Click Sign Up, create an account, and verify your email.

2) Find the API Key

Once logged in:

  • Click your username at the top right
  • Select My API Keys
  • You’ll see a long, strange-looking string (letters + numbers)

That is your API key.

3) Copy the Key

Highlight it and copy it.

4) Paste It Into Your Code

In your main.py file, find this line:

API_KEY = ""
Enter fullscreen mode Exit fullscreen mode

Paste your key inside the quotes:

API_KEY = "your_actual_key_here"
Enter fullscreen mode Exit fullscreen mode

Done.
Now your app is officially connected to OpenWeatherMap.

🌐 3. API Used

This project uses:

https://api.openweathermap.org/data/2.5/weather
Enter fullscreen mode Exit fullscreen mode

Parameters:

  • q → city name
  • units=metric → Celsius
  • appid → your API key

Sample request:

https://api.openweathermap.org/data/2.5/weather?q=Seoul&units=metric&appid=YOUR_KEY
Enter fullscreen mode Exit fullscreen mode

🖥️ 4. Flask Backend Code (main.py) 

from flask import Flask, render_template, request
import requests

app = Flask(__name__)

API_KEY = ""  # Insert your OpenWeatherMap API key

@app.route("/", methods=["GET", "POST"])
def index():
    weather = None

    if request.method == "POST":
        city = request.form.get("city")

        url = f"https://api.openweathermap.org/data/2.5/weather?q={city}&units=metric&appid={API_KEY}"
        response = requests.get(url)
        data = response.json()

        if data.get("cod") == 200:
            weather = {
                "city": data["name"],
                "temp": data["main"]["temp"],
                "description": data["weather"][0]["description"],
                "humidity": data["main"]["humidity"],
            }
        else:
            weather = {"error": data.get("message", "Unknown error")}

    return render_template("index.html", weather=weather)

if __name__ == "__main__":
    app.run(debug=True)
Enter fullscreen mode Exit fullscreen mode

🎨 5. HTML Template (index.html) 

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        input, button { padding: 10px; margin: 5px 0; }
    </style>
</head>
<body>

    <h1>Weather Lookup</h1>

    <form method="POST">
        <input type="text" name="city" placeholder="Enter City (e.g.: Seoul)" required>
        <button type="submit">Search</button>
    </form>

    {% if weather %}
        {% if weather.error %}
            <p style="color:red;">Error: {{ weather.error }}</p>
        {% else %}
            <h2>{{ weather.city }} Weather</h2>
            <p>Temperature: {{ weather.temp }}°C</p>
            <p>Description: {{ weather.description }}</p>
            <p>Humidity: {{ weather.humidity }}%</p>
        {% endif %}
    {% endif %}

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

⚙️ 6. How to Run

Install Dependencies 

pip install flask requests
Enter fullscreen mode Exit fullscreen mode

Run the App 

python main.py
Enter fullscreen mode Exit fullscreen mode

Then open this URL:

http://127.0.0.1:5000
Enter fullscreen mode Exit fullscreen mode

📚 7. What I Learned

  • How to make API requests using Flask
  • How to parse JSON responses
  • How HTML forms interact with backend logic
  • How to handle errors safely
  • How to work with environment keys (API keys)

These small project steps help me understand how a full web app works piece by piece.

🔧 8. Beginner-Friendly Tasks (Try This Yourself!)

If you want to improve the project:

  • Add weather icons (sun, rain, clouds)
  • Show wind speed, sunrise, sunset, etc.
  • Save recent searches to a database
  • Add a bilingual UI (English + Korean)
  • Add an hourly & weekly forecast page

These are simple additions but fantastic learning moments.

Top comments (0)