Local Weather Info

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.

weatherdata1
figure 1.0 – Weather data webpage

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

weatherdata2
figure 1.1 – Codepen project workspace

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

weatherdata3
figure 1.2 – CSS external library links

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.

weatherdata4
figure 1.3 – JavaScript external library links

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

weatherdata5
figure 1.4 – the final result

You can get this codepen project source code here.

Advertisement

2 thoughts on “Local Weather Info

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.