• Useful tools •
Designed By: @anutrickz
Version: 1.0.2-beta

Create a Dynamic Weather Report with HTML & JavaScript

My Photo
Anupam - 1 min read
Dynamic Weather Report


Hey everyone!

Are you looking to add a real-time weather report to your website? Look no further! Today, I'm excited to share a quick and easy tutorial on how to create a dynamic weather report for your website using HTML and JavaScript. In just under a minute, you can have a real-time weather app up and running. Let's dive in!


Here's what the code does:


  1. Grabs Your Location: The code uses an API from ipapi.co to fetch your approximate location (city, region) based on your IP address.
  2. Fetches Weather Data: Once it has your location, the code uses the OpenWeatherMap API to retrieve the current weather data for your area. You'll need a free API key from OpenWeatherMap to use this functionality.
  3. Displays the Weather: The code then takes the weather data and formats it into a user-friendly report that displays:


  • Location (City, Country)
  • Timezone
  • Current Weather Conditions (e.g. sunny, cloudy, rainy)
  • Current Temperature (°C)
  • Humidity (%)
  • Wind Speed (m/s)

Adding this code to a basic HTML framework creates a handy weather report that automatically updates with your location!


Step 1: Setting Up the HTML Structure

First, let's create a simple HTML structure. We'll add a heading for our weather report and a div to display the weather data.


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Weather Report</title>

</head>

<body>

<h1>Weather Report</h1>

<div id="weatherData"></div>

<script src="weather.js"></script>

</body>

</html>


Step 2: Fetching User Location Data

Next, we'll fetch the user's location data using the ipapi.co API. This will provide us with the latitude and longitude needed to get the weather information.


window.addEventListener('load', () => {
  fetch('https://ipapi.co/json/')
    .then(response => response.json())
    .then(data => {
      const { latitude, longitude } = data;

      // Fetch weather data using OpenWeatherMap API
      const apiKey = 'a8e71c9932b20c4ceb0aed183e6a83bb';
      const openWeatherMapUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=metric`;

      fetch(openWeatherMapUrl)
        .then(response => response.json())
        .then(weatherData => {
          displayWeatherData(weatherData);
        })
        .catch(error => {
          console.error('Error fetching weather data:', error);
        });
    })
    .catch(error => {
      console.error('Error fetching location data:', error);
    });
});

Step 3: Displaying the Weather Data

Finally, let's display the weather data on our webpage. We'll extract details like location, weather description, temperature, humidity, and wind speed.


function displayWeatherData(weatherData) {
  const weatherReport = `
    <p>Location: ${weatherData.name}, ${weatherData.sys.country}</p>
    <p>Timezone: ${weatherData.timezone}</p>
    <p>Current Weather: ${weatherData.weather[0].description}</p>
    <p>Temperature: ${weatherData.main.temp} °C</p>
    <p>Humidity: ${weatherData.main.humidity}%</p>
    <p>Wind Speed: ${weatherData.wind.speed} m/s</p>
  `;
  document.getElementById('weatherData').innerHTML = weatherReport;
}


And there you have it! A dynamic weather report that updates based on the user's location. This is a great project for beginners looking to get hands-on experience with APIs and JavaScript.
contact us: