# Display Today's Weather

> Learn how to display today's weather using the OpenWeather API.

https://docs.pandasuite.com/essentials/data/display-current-weather/

**Learn how to display current weather in your PandaSuite application by retrieving data from a weather API (OpenWeather). For example, you can display the current temperature, weather conditions (sunny, cloudy, rainy), and other real-time weather information.**

[Image: Finished weather app: Paris at 9°C with humidity, wind, and pressure, above a horizontal list of daily forecasts]

Download the free template related to this tutorial:

[Template: Paris Today's Weather](https://pandasuite.com/dashboard/use-template/Bo9M1XgBWa0-8xeEHa80)

## Obtain The API Key

### Create A Free OpenWeather Account

[OpenWeather](https://openweathermap.org/) is a free online service providing weather forecasts for a city. It offers different APIs to obtain weather data for a specific location.

[Image: OpenWeather home page: city search bar and current weather for London, 10°C with broken clouds, next to a map]

Create a free account on [OpenWeather](https://openweathermap.org/).

### Retrieve The API URL

OpenWeather offers different APIs to get weather data for a location. We'll use the **Current Weather API** to get today's weather, and the **Daily Forecast API** to display the forecast for the coming days.

- Log in to your account.
- Go to the **API** section.
- Choose **Current Weather Data** and click on the **API doc** button to access the [technical documentation](https://openweathermap.org/current).

[Image: OpenWeather Current weather data documentation, call by city name: api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}]

- Copy your API key from the **https:** until just before the **?**. The rest corresponds to query strings that will be specified in the HTTP component properties.

```plaintext
https://api.openweathermap.org/data/2.5/weather
```

### Generate Your Personal API Key

To generate your API key (app ID / API Key), go to your **Account**, section **API keys.**

[Image: API keys tab of the OpenWeather account: the Default key on the left, the Create key form with its Generate button on the right]

## Set Up The API In Your PandaSuite Project

The connection to an API is made using the [HTTP component](https://docs.pandasuite.com/essentials/components/http/).

### Insert The HTTP Component

- Open your project.
- Click on **Components** and insert an **HTTP component**.

### Configure The HTTP Component

Define the properties of your HTTP component:

- **URL**: Paste the API URL.
- **Method**: Choose the **GET** method to request data from the API.
- **Query string**: OpenWeather provides **Query strings** to assign values to parameters in your API request:
  - **q**: The city (e.g., Paris,fr).
  - **appid**: Your personal API key generated from the OpenWeather interface.
  - **units**: The unit of measurement (e.g., metric).
  - **lang**: The language (e.g., en).

[Image: Parameters table of the OpenWeather documentation: required q and appid, optional mode, units, and lang, then example API calls]

### Test The Request

Click the **Edit** button on the HTTP component (or double-click the visible HTTP component field).

Click the **Test Request** button.

View your request results: If the raw data corresponds to your expectation, the API has been correctly configured.

[Image: HTTP Current Weather component after Test Request: JSON response with coord, weather, and main (temp 17.3), query strings on the right]

## Creating A Custom Display In PandaSuite

- Select the text block indicating the temperature.
- Go to **Properties** and specifically the **Content** to add data binding.
- Choose **From a data source** > **HTTP component** > **main** > **temp**. Use the [FormatNumber function](https://docs.pandasuite.com/essentials/data/functions/) to display the temperature correctly.

[Image: Binding the 0°C text block to HTTP Current Weather > main > temp: the Data window lists the main values, Content shows temp °C]