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
min.naung
Founder and Developer @twentytwo.space
Leave a Reply