80 lines
2.6 KiB
HTML
80 lines
2.6 KiB
HTML
{{define "weatherHTML"}}
|
|
<a class="w-link" href="/weather">
|
|
<div id="weather">
|
|
<div class="weather-widget" id="weather-widget-sarajevo">
|
|
<div><span id="city-sarajevo">Učitavanje...</span></div>
|
|
<div id="temperature-sarajevo">Učitavanje...</div>
|
|
</div>
|
|
<div class="weather-widget" id="weather-widget-banja-luka">
|
|
<div><span id="city-banja-luka">Učitavanje...</span></div>
|
|
<div id="temperature-banja-luka">Učitavanje...</div>
|
|
</div>
|
|
<div class="weather-widget" id="weather-widget-tuzla">
|
|
<div><span id="city-tuzla">Učitavanje...</span></div>
|
|
<div id="temperature-tuzla">Učitavanje...</div>
|
|
</div>
|
|
<div class="weather-widget" id="weather-widget-zenica">
|
|
<div><span id="city-zenica">Učitavanje...</span></div>
|
|
<div id="temperature-zenica">Učitavanje...</div>
|
|
</div>
|
|
<div class="weather-widget" id="weather-widget-mostar">
|
|
<div><span id="city-mostar">Učitavanje...</span></div>
|
|
<div id="temperature-mostar">Učitavanje...</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
|
|
<script>
|
|
const apiKey = 'abb35e21bdcbad6d1b00141a2b25cf5a';
|
|
|
|
const cities = [
|
|
{ name: 'Sarajevo', id: 'sarajevo' },
|
|
{ name: 'Banja Luka', id: 'banja-luka' },
|
|
{ name: 'Tuzla', id: 'tuzla' },
|
|
{ name: 'Zenica', id:'zenica'},
|
|
{ name: 'Mostar', id: 'mostar' }
|
|
];
|
|
|
|
async function getWeatherData(city) {
|
|
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city.name}&appid=${apiKey}&units=metric&lang=hr`;
|
|
try {
|
|
const response = await fetch(apiUrl);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
updateUI(data, city.id);
|
|
} catch (error) {
|
|
console.error(`Error fetching data for ${city.name}:`, error);
|
|
}
|
|
}
|
|
|
|
function updateUI(data, cityId) {
|
|
const cityElement = document.getElementById(`city-${cityId}`);
|
|
const temperatureElement = document.getElementById(`temperature-${cityId}`);
|
|
|
|
cityElement.textContent = data.name;
|
|
temperatureElement.textContent = `${data.main.temp}°C`;
|
|
}
|
|
|
|
function cToL(text) {
|
|
const cyrillicChars = 'АБВГДЂЕЖЗИЈКЛЉМНЊОПРСТЋУФХЦЧЏШабвгдђежзијклљмнњопрстћуфхцчџш';
|
|
const latinChars = 'ABVGĐEŽZIJKLJMNJOPRSTĆUFHCČDŽŠabvgdđežzijkljmnjoprstćufhčdžš';
|
|
|
|
return text
|
|
.split('')
|
|
.map(char => {
|
|
const index = cyrillicChars.indexOf(char);
|
|
return index !== -1 ? latinChars[index] : char;
|
|
})
|
|
.join('');
|
|
}
|
|
|
|
cities.forEach(city => {
|
|
getWeatherData(city);
|
|
});
|
|
|
|
</script>
|
|
|
|
{{end}} |