mvark · October 20, 2024 12:51
diff --git a/WeatherUnionAPIsample.html b/WeatherUnionAPIsample.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather NOW</title>
  <style>
    body {
      margin: 0;
      padding: 20px;
    }
 	
 	.weather-inputs1 {
  padding: 20px;
  background: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
    .weather-detail, .error-message {
      margin: 10px 0;
    }
    input[type="text"], button {
      padding: 10px;
      margin: 5px 0;
    }
    button {
      background-color: #007BFF;
      color: white;
    }
  </style>
 </head>
 <body>
  <div class="weather-inputs">
    <h1>Weather NOW</h1>
    
    <input type="text" id="lat" value="17.441185" placeholder="Latitude"><br>
    <input type="text" id="long" value="78.398416"  placeholder="Longitude"><br>

    <button id="fetchWeather">Fetch Weather</button>
    
    <h2 id="weatherHeader">Weather Details:</h2>
    <div id="weatherOutput"></div>
    <div id="errorMessage" class="error-message"></div>
  </div>

  <script>
    document.getElementById('fetchWeather').addEventListener('click', function() {
      // Get the latitude and longitude values
      const latitude = document.getElementById('lat').value;
      const longitude = document.getElementById('long').value;

      // API URL with the updated latitude and longitude
      const apiUrl = `https://www.weatherunion.com/gw/weather/external/v0/get_weather_data?latitude=${latitude}&longitude=${longitude}`;
      const xhr = new XMLHttpRequest();
      
      // Handle the response
      xhr.addEventListener('readystatechange', function() {
        if (this.readyState === this.DONE) {
          const response = JSON.parse(this.responseText);
          const weatherOutput = document.getElementById('weatherOutput');
          const errorMessage = document.getElementById('errorMessage');
          const weatherHeader = document.getElementById('weatherHeader');

          // Check the status code and handle the response
          if (Number(response.status) === 200) {
            const weatherData = response.locality_weather_data;
            let outputHtml = `
              <div class="weather-detail">🌡️ Temperature: ${weatherData.temperature}°C</div>
              <div class="weather-detail">💧 Humidity: ${weatherData.humidity}%</div>
              <div class="weather-detail">🌬️ Wind Speed: ${weatherData.wind_speed} m/s</div>
            `;
            outputHtml += weatherData.rain_intensity > 0 ? 
              `<div class="weather-detail">🌧️ Rain Intensity: ${'🌧️'.repeat(weatherData.rain_intensity)}</div>` : 
              `<div class="weather-detail">🚫🌧️ No Rain</div>`;
 			  
            const IMDUrl = `https://thejeshgn-imd_distrcitwise_warnings.web.val.run/?lat=${latitude}&lon=${longitude}&format=html`;
            outputHtml += `<div class="weather-detail">🌞<a href="${IMDUrl}" target="_blank">NOWcast, Forecast from IMD</a></div>`;
 			outputHtml += `<div class="weather-detail">🌏<a href="https://www.weatherunion.com/now/hyderabad/000136/madhapur/004802" target="_blank">Zomato Weather Map</a></div>`;			  
              
            weatherOutput.innerHTML = outputHtml;
            errorMessage.textContent = '';

            // Update the header with the current time
            weatherHeader.textContent = `Weather Details at ${new Date().toLocaleTimeString()}:`;

          } else {
            errorMessage.textContent = response.message;
            weatherOutput.innerHTML = '';
          }
        }
      });
      // Send the API request
      xhr.open('GET', apiUrl);
      xhr.setRequestHeader('X-Zomato-Api-Key', 'Your-Zomato-WU-API-key');  // Replace with your actual API key
      xhr.send(null);
    });
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Weather NOW</title>
	<style>
	body {
	margin: 0;
	padding: 20px;
	}

	.weather-inputs1 {
	padding: 20px;
	background: #f7f7f7;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.weather-detail, .error-message {
	margin: 10px 0;
	}
	input[type="text"], button {
	padding: 10px;
	margin: 5px 0;
	}
	button {
	background-color: #007BFF;
	color: white;
	}
	</style>
	</head>
	<body>
	<div class="weather-inputs">
	<h1>Weather NOW</h1>

	<input type="text" id="lat" value="17.441185" placeholder="Latitude"><br>
	<input type="text" id="long" value="78.398416" placeholder="Longitude"><br>

	<button id="fetchWeather">Fetch Weather</button>

	<h2 id="weatherHeader">Weather Details:</h2>
	<div id="weatherOutput"></div>
	<div id="errorMessage" class="error-message"></div>
	</div>

	<script>
	document.getElementById('fetchWeather').addEventListener('click', function() {
	// Get the latitude and longitude values
	const latitude = document.getElementById('lat').value;
	const longitude = document.getElementById('long').value;

	// API URL with the updated latitude and longitude
	const apiUrl = `https://www.weatherunion.com/gw/weather/external/v0/get_weather_data?latitude=${latitude}&longitude=${longitude}`;
	const xhr = new XMLHttpRequest();

	// Handle the response
	xhr.addEventListener('readystatechange', function() {
	if (this.readyState === this.DONE) {
	const response = JSON.parse(this.responseText);
	const weatherOutput = document.getElementById('weatherOutput');
	const errorMessage = document.getElementById('errorMessage');
	const weatherHeader = document.getElementById('weatherHeader');

	// Check the status code and handle the response
	if (Number(response.status) === 200) {
	const weatherData = response.locality_weather_data;
	let outputHtml = `
	<div class="weather-detail">🌡️ Temperature: ${weatherData.temperature}°C</div>
	<div class="weather-detail">💧 Humidity: ${weatherData.humidity}%</div>
	<div class="weather-detail">🌬️ Wind Speed: ${weatherData.wind_speed} m/s</div>
	`;
	outputHtml += weatherData.rain_intensity > 0 ?
	`<div class="weather-detail">🌧️ Rain Intensity: ${'🌧️'.repeat(weatherData.rain_intensity)}</div>` :
	`<div class="weather-detail">🚫🌧️ No Rain</div>`;

	const IMDUrl = `https://thejeshgn-imd_distrcitwise_warnings.web.val.run/?lat=${latitude}&lon=${longitude}&format=html`;
	outputHtml += `<div class="weather-detail">🌞<a href="${IMDUrl}" target="_blank">NOWcast, Forecast from IMD</a></div>`;
	outputHtml += `<div class="weather-detail">🌏<a href="https://www.weatherunion.com/now/hyderabad/000136/madhapur/004802" target="_blank">Zomato Weather Map</a></div>`;

	weatherOutput.innerHTML = outputHtml;
	errorMessage.textContent = '';

	// Update the header with the current time
	weatherHeader.textContent = `Weather Details at ${new Date().toLocaleTimeString()}:`;

	} else {
	errorMessage.textContent = response.message;
	weatherOutput.innerHTML = '';
	}
	}
	});
	// Send the API request
	xhr.open('GET', apiUrl);
	xhr.setRequestHeader('X-Zomato-Api-Key', 'Your-Zomato-WU-API-key'); // Replace with your actual API key
	xhr.send(null);
	});
	</script>
	</body>
	</html>