Weather tracing application using pure java script

Published on 05 Jul 2021. Written by Vaibhav Kumar

People travel to places and in a country like INDIA you never know what the weather is now at the place we are going to visit. We google about the place, search but it is mixed up with so much data and we are not metrologists or experts in survival techniques as seen in movies and frankly, this is not required skill for a normal person, we just need an app for this.

In this web development project, we will build our own web application to trace the weather of a place. The application will not only be used for metropolitan areas but any registered place/city. Any newbie to web development can do this project; all data is extracted from the internet using API keys.

Read more..

SLNOTE
Outline:

This web development project would need three files to build the whole project in three languages and all synced in one webpage to perform various tracing about the weather features. A complex weather app does so much that it would require a lot of knowledge about database management and angular js. Our app will also track data but not maintain it in a database, we will show graphs about the weather changes too and so for a beginner it is easy to develop. We can use a city name or the pin code/zip code

Prerequisites:

1. A collection of images set for different weathers (clear sky/sunny, stormy, rainy, cloudy & a default image). These images can be downloaded free from sites like pexels,pxhere, etc.

2. An account on OpenWeatherMap site to get the API to extract required data for free. 

SLLATEST
Requirements:

Hardware: One Laptop or Desktop with any OS (Linux/Windows/iOS)

• Software/Technology: A Browser ( Chrome/Firefox/Opera/Safari/IE) to run the program. I prefer chrome or firefox as it provides a console to see behind the work of program like the IDE of python (to use just right-click on the mouse and select ‘Inspect’ or Ctrl+Shift+I to open it and switch to console tag in this window)
• A text editor ( Visual Studio(VS) Code/Atom/Sublime/Notepad ) to code. I prefer VS code as it completes the code from its libraries and themes are attractive.
• Internet Connection

Implementation:

We will divide the work into three files to ease down the work: 

• HTML file 
• JavaScript file 
• CSS file

HTML File (named index.html or anything you prefer

• Simply create the structure of head and body, add a title to head tag area and give the link to CSS file to be used using the link tag
• In the body tag area, we will be using two divisions, one to create a search container and the other to create a weather box or container
• Each div should be provided with both an ID and a class to aces it in JavaScript and provide styling through CSS
• At the very end of the body tag area app, the link to javascript file using javascript tag end with HTML tag closure and HTML file is ready

JavaScript File (script.js or any name)

• We define three variables to store: API key (take from the site), unit = imperial or metric imperial for Fahrenheit degree and metric for Celsius/centigrade degree temperature, Search method = zip/ q where q is used when the city name is used.
• We define a function for search method where we cross-check the type entered data through length(5 for the USA, 6 for INDIA) and all are digits then use ‘zip’ string else ‘q’ string to search method variable.
• Now we define the function to fetch the data in a format below here we have not used inverted commas =‘’ but backstroke = ``
• `http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=$ {appId}=${units}`
• We convert them to JSON form using JSON function then send to another function to initialise it and use it to give data in our required way. (we can check what we get from the server by printing the data using console.log)
• From “argument” passed in the last function, we need data from weather like this result.weather[0]. main pass to switch statement and use the cases from site you can see the cases
• Inside this, we declare various variables for features of weather description,temperature, humidity, wind speed, city header, weather icon
• Using the same format as above we change the last variable namely(also print using unit too) result.weather[0]. description, result.main.temp(take math.floor value of it) , result.wind.speed,result.name(city header), result.main.humidity
• Here the set position function is called to set the weather container to the most appropriate place (for me centre) here using the Id of container we modify the left and right, height and width styling of container to bring to the center.
• Now we use id for search button and attach it to a variable to get input and pass to get search method
• CSS File (style.css or any name)
• First, the body tag is style and default image set in the background using various attributes like size, position, no repetition and font is set in it
• Using a class of weather containers we set it a shadow, font, colour, border-radius, transparency, padding of text.
• We also set visibility to hidden for default as nothing is searched then, inside weather container we modify heading tag area too

Note: after you set the styling of container here the add set position function to javascript as it prevents the hotch-potch of things

• Same way we modify search container style and set position to the place we want
• Even we modify the search button
• Keep everything in one file – images and the files and the project is ready to be used. It can be used locally but if you want you can upload it online.

SLDYK
Kit required to develop Weather tracing application using pure java script:

• JavaScript

Technologies you will learn by working on Weather tracing application using pure java script:

• Web Development

Any Questions?