Create a Weather Widget

We used OpenWeatherMap as our third-party service. We registered for an API key on their site, which allows us to use their services.

Page Elements

In our site we added the following page elements:

• Dropdown list of cities: Site visitors select a city to view current weather data. The dropdown choice “values” are defined as city names listed in the third-party service site. We added an event handler in the dropdown element’s Properties panel that runs when a site visitor selects a city.

• Background image: This image changes depending on whether it’s sunny or cloudy in the selected city.

• Two text elements: These display the weather description and temperature in the selected city.

Code

Then we added code to do the following:

Define variables: In the event handler that runs when a new city is selected in the dropdown, we defined variables to store the following:

• The value of the selected city in the dropdown

• Sources of the sunny and cloudy images

• Run the fetch request from a backend function. Note that the backend function uses an App ID secret from the Secrets Manager. You will need to get your own App ID and store it in the Secrets Manager to test the example.

Assign weather data to text elements.

We checked if the description was “clear sky” and the temperature was 10 degrees or higher. If so, we displayed the sunny image. If not, we displayed the default cloudy image.

Next Steps

1. Open this example in the Editor to work with the template.

2. Publish the site.

3. Learn how to work with examples in Velo.