Menu Home

Local Weather Info

This time, we will create a webpage that shows local weather information. To follow this tutorial you will 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.


figure 1.0 – Weather data webpage

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


figure 1.1 – Codepen project workspace

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


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.


figure 1.3 – JavaScript external library links

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



figure 1.4 – the final result


You can get this codepen project source code here.

The later when I have more extra spare time, I will explain line by line for what we have been written for this weather info project. And again thank you for your time. 

Categories: HTML JavaScript

Tagged as:


Site Founder and Developer.

Leave a Reply

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

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

Google photo

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

Twitter picture

You are commenting using your Twitter 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.

%d bloggers like this: