Web Development

Weather tracing application using pure java script

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..

Weather tracing application using pure java script project Looking to build projects on Web Development?:

Web Development Kit will be shipped to you and you can learn and build using tutorials. You can start for free today!

1. Web Development with PHP and MySQL

2. Front End Web Development with React JS

3. Back End Web Development with Node JS

4. Full Stack Developer

5. Web Development (Career Building Course)


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


  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.
  1. An account on OpenWeatherMap site to get the API to extract required data for free. 

Latest projects on Web Development

Want to develop practical skills on Web Development? Checkout our latest projects and start learning for free


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


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.

How to build Web Development projects Did you know

Skyfi Labs helps students learn practical skills by building real-world projects.

You can enrol with friends and receive kits at your doorstep

You can learn from experts, build working projects, showcase skills to the world and grab the best jobs.
Get started today!

Kit required to develop Weather tracing application using pure java script:
Technologies you will learn by working on Weather tracing application using pure java script:
Weather tracing application using pure java script
Skyfi Labs Last Updated: 2021-07-05

Join 250,000+ students from 36+ countries & develop practical skills by building projects

Get kits shipped in 24 hours. Build using online tutorials.

More Project Ideas on web-development

Web Development with PHP and MySQL
Creating a website using WordPress
Weather tracing application using pure java script
Webpage including form
E-commerce Website development using WordPress
Augmented Reality Web Browser using Unity
Creating a website with Bootstrap studio
SEO friendly website (web development project)
Parallax website (web development project)
A Basic Word Frequency Counter using Javascript
Creating a Login register form - Web development project
Making a review section on a web page without AJAX
NGO Activity portal project
Restaurant Website - Web development project
Payment Checkout Page Design with HTML and CSS
Designing a Calculator with HTML, CSS, JavaScript
Web Scraping Backend Web Development project using Node Js
Entertainment Web app - Front end Web Development project using react js
ToDo Web app using Django
Word Counter using HTML, CSS and Javascript
Design A Multi-page Responsive Website
How to create a search table for a website
How to create a feedback form and receive an email
How to create a website with HTML and CSS
Basic one page blog full stack web development project
Web-based chat application with webcam using PHP
Simple website using Bootstrap
How to Develop ATM Interface using JAVA?
How to create a Custom Icon? - Web development project
Build a To-Do list with JavaScript
Bulk SMS and Mail Sender project
MIS Portal for academics
How to create a product landing page?
Personal Portfolio Website Design using HTML, CSS, and JavaScript

Subscribe to receive more project ideas

Stay up-to-date and build projects on latest technologies