Javascript Weather Application on Browser

Published May 05, 2022

The following approach covers how to create a Weather Application in Vanilla JavaScript using Open Weather Map API. Using this API, we can get weather data for each coordinate, this program is written using HTML, CSS, JavaScript.
A webapp which request access to your location and gives you the Weather Information. This program shows which City, State and Country's Weather is being shown. It also shows background for the similar weather conditions.

 

Features

  1. Location Based Weather
  2. Completely Secure
  3. Uses Internet for better Precision
  4. Precise Location API
  5. Faster
  6. Time Saving
  7. Reliable
  8. Provide City Based Weather
  9. Weather Forcast with similar weather image

 

Approach

  1. Go to "https://openweathermap.org/" and create an account and get your API KEY
  2. add folder and include files: index.html, style.css, main.js
  3. Now fetch the geographic Location of the user:


(I) latitude and longitude: "api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key}"
(II) Calling API by city ID: "api.openweathermap.org/data/2.5/weather?id={city id}&appid={API key}" 4. You have to allow your browser to gain access of your location.

 

System Requirements

  1. Processor - Intel Core Pentium or above
  2. Operating System - Windows vista or above
  3. Memory - 1Gb Ram or more
  4. Hard Disk Space - 5MB
  5. Web Browser - Any Web Browser (chrome, opera, etc.)
Wather app Javascript

 

Wather app Javascript 2

 

Wather app Javascript 3

 

Complete source code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/105f2a602f.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Weather</title>
    <link rel="shortcut icon" href="images/app.jfif>
  </head>
 
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <h1 id="place">Place</h1>
        </div>
        <div class="col">
          <h1 id="region">Region</h1>
        </div>
        <div class="col">
          <h1 id="country">Country</h1>
        </div>
      </div>
        <div class="row">
          <div class="col">
            <h3 id="temp">25</h3>
            <span> °C </span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <img src="http://cdn.weatherapi.com/weather/64x64/day/113.png" alt="weather logo" id="icon" width="100px" />
          </div>
        </div>
        <div class="row">
          <div class="col">
            <h5 id="desc">Clear</h5>
          </div>
        </div>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

 

 

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

294 Views