This post is about how you can create a webpage that shows local weather information. Source code is hosted on codepen website, so you gonna need a codepen account or any service that can build and deploy a webpage. (Or you can write this in your local text editor without publishing).

For current weather information, you need to get weather data API.

First, we will be building our webpage that will include a simple user interface (figure 1.0) with an information display.

In your code pen project HTML workspace, add this HTML code to display info-table.

Next, click on the CSS Setting logo and type in header information according to figure 1.2.

And paste this CSS code in CSS workspace.

Click on JavaScript Setting logo to add another two more external links library as shown in figure 1.3.

Paste this JavaScript code into JS workspace. And your final result should look like figure 1.4.

You can get this codepen project source code here.