Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
javascript

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

Behzad Ahmad

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

RELATED TAGS

html
css
javascript
RELATED COURSES

View all Courses

Keep Exploring