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.

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.

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. 

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 )

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.