Build A Weather App in HTML CSS & JavaScript

By Mister Coderz -August 20, 2022

Responsive image
Hey friends, today in this blog, you’ll learn how to Build A Weather App in HTML CSS & JavaScript. In the earlier blog, I have shared how to Get a User’s Location in JavaScript, and now it’s time to create a weather app in JavaScript.

In this weather app, you can get the weather details of a particular city by entering the city name or you can also get your current location weather details by clicking on the “Get Device Location” button. If you entered an invalid city name then there is shown an error message.

You’ll get many weather details in this app like temperature in celsius, weather conditions, location, feels like, and humidity. If you’re feeling difficulty to understand what I’m saying then you can watch a demo video or full video tutorial of this project (Weather App in JavaScript).

Video Tutorial of Build A Weather App in JavaScript

In the video, you have seen a demo of this weather app and how I built this project using HTML CSS & JavaScript. I’ve used OpenWeatherMap API to get the weather details of the user entered city or user’s current location.

I hope you liked this weather app and want to get source codes or files of it but don’t worry I have provided codes and files to the bottom of this page and you can copy-paste the codes or download the coding files for free. Before you go to copy the codes, let’s understand the main codes and concepts of this weather app.

I already told you I used vanilla JavaScript to create this weather app. In the JavaScript file, I got the user entered city name and sent a get request to an OpenWeatherMap API with passing the city name. If the user clicked on the “Get Device Location” button then first I checked the user browser supports geolocation API or not.

If it’s supported, I got the current latitude and longitude of the device and sent these coordinates to the OpenWeatherMap API. After I got an object as a response from the API then I displayed the property value to a particular HTML element. At last, using the id value that API provides us, I showed the custom weather icon/image according to the weather condition.

Build A Weather App in JavaScript [Source Codes]

To create this project (Weather App in JavaScript). First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the following codes into your file. You can also download the source code files of this Weather App from the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. You’ve to create a file with .html extension and remember the images that are used on this weather app will not appear. So download the source files to use images also.
*HTML Code will available soon.*
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*CSS Code will available soon.*
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. You’ve to create a file with .js extension and remember you have to pass your API key in the API URL otherwise this weather app won’t work and it returns “something went wrong” error. You can get this key from the official OpenWeatherMap site for free
*JavaScript Code will available soon.*
That’s all, now you’ve successfully built a Weather App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

After extracting the file, open the JavaScript file and pass your API key in the API URL. You can get this key from the official OpenWeatherMap site for free. You can also use any other site API for this project. If you do so then you have to modify the JavaScript codes accordingly.
Try Weather App