JavaScript by Example

Working of the Weather Widget

Let's strategize the working of our Weather Widget. Since our Weather Widget is an HTML custom element, it should work just like other native HTML elements. For example, consider the <input> element:

<input type="text" name="username">

This will render a normal text input. However, we can use the same <input> element with a different attribute, as follows:

<input type="password" name="password">

It will render a password field instead of the text field with all the input text content hidden. Likewise, for our Weather Widget, we need to display the current weather condition for a given location. The best way to pinpoint the user's location is to use the HTML5 geolocation, which will get the user's current latitude ...