How to create a simple weather application with HTML, CSS, and JS

In order to create a simple weather application, we have to take the following steps:

Step 1: Add HTML

Explanation

• Line 4: We use the Google API to determine the temperature of the entered city.

• Line 9: We create a main div in which all the divs are to be made.

• Line 10: We create a main section block.

• Lines 11–15: We create a section in which the user enters the name of the city and then presses a button to determine the temperature.

• Lines 17–24: We create a section through which we can find details on the temperature of that particular area.

Step 2: Add CSS

Explanation

• Lines 1–9: We adjust the background div and the background color.

• Lines 10–15: We set the height and width of the container.

• Lines 16–36: We set the properties of the “input” field.

• Lines 37–48: We set the properties of the “submit” button.

• Lines 49–54: We set the properties of the display.

• Lines 55–89: We set the properties of how the data should be displayed.

Step 3: Add JavaScript

Explanation

• Lines 1–7: We determine the constant of the id function, because HTML can’t be used directly in JavaScript.

• Lines 8–11: We convert the temperature scale from Kelvin to Celsius.

• Line 13: We get the data with the help of the fetch method.

• Lines 15–16: The weather data comes from this API.

• Lines 21–24: We get the data from the API and store it in different constants.

• Lines 25–28: We set the data that needs to be displayed using HTML.

• Line 32: An error message appears. This message is displayed when we don’t enter a city name or when we enter the wrong name.

Step 4: Combine HTML, CSS, and JavaScript