Open In App

Make a Web-based Weather Report of your Location using OpenWeatherMap API

Improve
Improve
Like Article
Like
Save
Share
Report

Follow these simple steps in order to make a Web-based Weather Application Using OpenWeatherMap API.

Step 1: Make your account in OpenWeatherMap for accessing their API for our project. Create an Account. It’s totally FREE. After making an account you will get a default key just note/copy that key because we will use it for our feature steps.

Step 2: Write down the following HTML code in the MainPage.html file. You can choose any name for the file.

Filename: MainPage.html

HTML




<!DOCTYPE html>
<html>
<head>
  <title>Weather Report</title>
  <link rel="icon" href="favicon.png">
  <link rel="stylesheet" href="PageStyle.css">
  <link href=
  rel='stylesheet'>
</head>
<body>
  <p id="data" class="styleIt"></p>
  
  <script src="JSPage.js"></script>
</body>
</html>


Explanation:

  • The 5th line is used to put the favicon icon on your HTML page.
  • The 6th line is used to link our CSS file to the HTML file.
  • The 7th line is used for using a font that is taken from the web.
  • The 10th line is used for printing the data which we get from JS.
  • The 12th line is used to link our JS file to the HTML file.
How its Look with and without favicon

All about favicon icon

Step 3: Write down the following CSS for making the looks of the web-page more attractive.

Filename: PageStyle.css

HTML




p.styleIt{
    background-color: rgb(182, 182, 182);
    border: 2px solid rgb(182, 182, 182);
    border-radius: 8px;
    text-align: center;
    box-shadow: 6px 5px 2px rgb(182, 182, 182), 
    0 0 25px rgb(0, 0, 0), 0 0 5px rgb(182, 182, 182);
    font-family: 'Delius Swash Caps';
}
  
body{
    background:rgb(120, 120, 120);
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}


Explanation:

  • We have used p.styleIt where p represents the HTML tag of the paragraph and the .styleIt is used to target the particular paragraph which was called by class=”styleIt” on the above code (Step3).
  • To give a shadow looks to the paragraph we have used box-shadow: 6px 5px 2px rgb(182, 182, 182), 0 0 25px rgb(0, 0, 0), 0 0 5px rgb(182, 182, 182);
  • To make a carved border we have used border-radius: 8px;
  • To align the whole body at the center of the web-page:- the body{…..} is used.

With Out CSS

Application Without CSS

with CSS

Application With CSS

Step 4: This is the main file of our whole project which will bring the Location of our present location and using API get the data of our location and print in the web-page.

Filename: JSPage.js

Javascript




var data = document.getElementById("data");
var Latitude;
var Longitude;
var key = "------Put Your Own Key-----";
  
// Function to get the latitude and longitude data
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        data_of_Lat_Lon.innerHTML = 
            "Geolocation is not supported by this browser";
    }
}
  
// Function to fetch the Latitude and Longitude
// from position data
function showPosition(position) {
    Latitude = position.coords.latitude;
    Longitude = position.coords.longitude;
  
    getData(Latitude, Longitude);
}
  
// Fetching the data and calling the API
function getData(Lat, Lon) {
    const readyToSent = (url + "lat=" + Lat 
        + "&lon=" + Lon + "&appid=" + key);
    fetch(readyToSent)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            fetchData(data)
        })
}
  
// Fetching the JSON file and printing it to 
// the paragraph which is called by ID data
function fetchData(data) {
    const icon = "http://openweathermap.org/img/wn/"
        + data.weather[0].icon + "@2x.png"
  
    document.getElementById("data").innerHTML =
        "<b>The weather report of your Location is :-"
            + "</b><br> <img src=" + icon + "><br>"
            + "<b>Country :</b>" + data.sys.country 
            + "<br><b>Local Area Name :</b>" 
            + data.name + "<br><b>Temp. :</b>" 
            + parseFloat((data.main.temp - 273.15))
            .toFixed(1) + "℃"
            "<br><b>But You will feel like :</b>" 
            + parseFloat((data.main.feels_like - 
                273.15)).toFixed(1) + "℃" 
            + "<br><b>Min. Temp. :</b>" 
            + parseFloat((data.main.temp_min - 
                273.15)).toFixed(1) + "℃" 
            + "<br><b>Max. Temp. :</b>" 
            + parseFloat((data.main.temp_max - 
                273.15)).toFixed(1) + "℃" 
            + "<br><b>Pressure :</b>" 
            + data.main.pressure + "hPa" 
            + "<br><b>Humidity :</b>" 
            + data.main.humidity + "%" 
            + "<br><b>Weather :</b>" 
            + data.weather[0].description + "<br>"
}
  
// Function call
getLocation();
showPosition();
getData();


Explanation:

  • Using the inbuilt function, we take the Latitude and Longitude data (Refer to this)
  • Then we call an API by putting our latitude and longitude data as query parameters.
  • To know more about this API go to the https://openweathermap.org/api for official documentation.
  • After calling this API we get a JSON file we just need to fetch the data and print it.

Step 5: Now just open MainPage.html file in any browser and you will see the following output.

Web-based Weather Application

Reference: https://github.com/Sukarnascience/Web_Application/tree/main/Weather%20Report%20Application



Last Updated : 08 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads