Agronomic Weather Widget

Agronomic Weather Widget

				
					.widget-container {
  font-family: Arial, sans-serif;
  max-width: 300px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
}

.weather-info {
  margin-top: 20px;
}

.weather-info p {
  margin: 5px 0;
}


				
			
				
					document.addEventListener("DOMContentLoaded", function() {
  // Replace 'YOUR_API_KEY' with your actual OpenWeatherMap API key
  const apiKey = '1bd3ad82638715dc215a40d8c8a2bc2c';
  const city = 'Moskow'; // Replace with your city name
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

  fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
      displayWeather(data);
    })
    .catch(error => {
      console.log('Error fetching weather data:', error);
    });

  function displayWeather(data) {
    const weatherDataContainer = document.getElementById('weather-data');
    const temperature = data.main.temp;
    const precipitation = data.weather[0].description;

    const weatherInfo = `
      <div class="weather-info">
        <p><strong>Temperature:</strong> ${temperature}°C</p>
        <p><strong>Precipitation:</strong> ${precipitation}</p>
      </div>
    `;

    weatherDataContainer.innerHTML = weatherInfo;
  }
});

				
			
Call Now Button