City Weather

We used OpenWeatherMap as our third-party service for retrieving weather information. In order to use this API you will first need to register for an API key on their site.

Secrets Manager

We added the API key that was provided by OpenWeatherMap to the Secrets Manager under the name OpenWeatherApi. The Secrets Manager can be accessed using the Settings section of your site's dashboard. In order to use this example in your account, make sure to update the Secrets Manager with your OpenWeatherMap API key.

npm Package

We used the ‘moment’ npm package in order to easily format the current time.

Page Elements

We added the following elements to our site:

• Text input: for entering the city name. We will validate this input using pattern validation.

• Button: for fetching the weather.

• Preloader image: for indicating that we are waiting for the third party service response.

• Five response text elements: Location (city, country), Temperature (celsius), Weather description, Time of executing the call, Error message

• Image: for displaying an appropriate weather icon.

Backend code

In getWeather.jsw, we have one function that provides weather data based on city name. The function first gets the OpenWeatherMap API key’s value from the Secrets Manager. Then, we create a constant which includes the third party service API call. Using this constant, a fetch call is made to get weather informations, which is returned in JSON format.

Page Code

When a site visitor enters the site, the following occurs:

1. We set a custom validation handler for the city text input. The handler uses RegExp to ensure the value exists and contains only letters and spaces.

2. We focus on the input text element, and register an onClick event handler that is triggered when the site visitor clicks the execute button.

3. The execute button’s onClick handler will first check if the input is valid, using the ‘valid’ attribute that triggers the custom validation handler:

4. If the value is valid: the loader image will expand, and a call to the backend function getCityBasedWeather(city) will be made, using the input value as the city parameter. After the response from the function is recieved, we update the page elements with the appropriate data.

5. If the value is not valid: handleError() will be called. handleError() gets the validationMessage value from the text input and assigns it to the expanded errorText element. We collapse the rest of text and image elements, to shift attention towards the error message.