- Uyumlu XF 2 Sürümleri
- 2.2.X
- 2.3.X
Weather for today
1- Inspection after installation
2- Before activating the code, I must register on the following site and obtain the API key number, then paste it into the code and the site as follows:
3- The code after modification includes the API key, noting that this key is temporary and will expire. If you want to get a fixed number, you must subscribe or to get new free number for testing. The subscription plans are available on the site above.
Kod:
<head>
<style>
.weather-widget {
width: 230px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-family: Arial, sans-serif;
}
.weather-header {
text-align: center;
margin-bottom: 10px;
}
.weather-icon {
text-align: center;
margin-bottom: 10px;
}
.weather-temp {
text-align: center;
font-size: 2em;
margin-bottom: 10px;
}
.weather-description {
text-align: center;
margin-bottom: 10px;
}
.weather-location {
text-align: center;
font-size: 1.2em;
color: #666;
}
</style>
</head>
<body>
<div class="weather-widget" id="weather-widget">
<div class="weather-header">
<h3>Weather for today</h3>
</div>
<div class="weather-icon" id="weather-icon">
</div>
<div class="weather-temp" id="weather-temp">
</div>
<div class="weather-description" id="weather-description">
</div>
<div class="weather-location" id="weather-location">
</div>
</div>
<script>
async function fetchWeatherData() {
try {
const ipResponse = await fetch('https://api.ipify.org?format=json');
const ipData = await ipResponse.json();
const ip = ipData.ip;
const locationResponse = await fetch(`https://ipapi.co/${ip}/json/`);
const locationData = await locationResponse.json();
const { city, region, country, latitude, longitude } = locationData;
const apiKey = 'd70b8b23979603a237cb3f4f86dd1921'; // Replace your OpenWeatherMap API key
const weatherResponse = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&lang=ru&appid=${apiKey}`);
const weatherData = await weatherResponse.json();
const { weather, main } = weatherData;
document.getElementById('weather-icon').innerHTML = `<img src="https://openweathermap.org/img/wn/${weather[0].icon}@2x.png" alt="Weather icon">`;
document.getElementById('weather-temp').innerText = `${main.temp} °C`;
document.getElementById('weather-location').innerText = `${city}, ${country}`;
} catch (error) {
console.error("Error while retrieving weather data: ", error);
document.getElementById('weather-widget').innerText = 'Failed to load weather data.';
}
}
fetchWeatherData();
</script>
</body>4- Explanation of the structure and some modifications to the code:
A- Through the control panel >> Appearance >> Add a widget >> then define the widget, we choose HTML
B- At the widget key, we write weather.
C- In the title, write what you want, for example, the weather condition.
D- When displaying the positions, we choose the forums list: sidebar
E- In the template, put the above code
F- If you want to activate (advanced mode), you must adjust the following display dimensions in the image from 250 to 230.
G- If the advanced topic is activated, the image will be as follows:
