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

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= 

'https://fonts.googleapis.com/css?family=Delius Swash Caps' 

  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.

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.

Application Without 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-----"; 

var url = "http://api.openweathermap.org/data/2.5/weather?"; 

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

Article Tags :

CSS