Fovway
dce99ec5dd
new file: index.html new file: package-lock.json new file: package.json new file: script.js new file: server.js new file: style.css
62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
// API ключ от WeatherAPI
|
||
const API_KEY = '485eff906f7d473b913104046250710';
|
||
|
||
|
||
const citySelect = document.getElementById('city');
|
||
const getWeatherBtn = document.getElementById('get-weather');
|
||
const timelapseContainer = document.getElementById('timelapse-container');
|
||
|
||
// Добавляем скроллинг колесиком мыши для таймлапса
|
||
timelapseContainer.addEventListener('wheel', (event) => {
|
||
event.preventDefault();
|
||
timelapseContainer.scrollLeft += event.deltaY;
|
||
});
|
||
|
||
// Автоматическая загрузка погоды при загрузке страницы
|
||
window.addEventListener('load', () => {
|
||
getWeatherBtn.click();
|
||
});
|
||
|
||
getWeatherBtn.addEventListener('click', async () => {
|
||
const city = citySelect.value;
|
||
const url = `https://api.weatherapi.com/v1/forecast.json?key=${API_KEY}&q=${city}&days=1&hourly=true&lang=ru`;
|
||
|
||
try {
|
||
const response = await fetch(url);
|
||
if (!response.ok) {
|
||
throw new Error('Ошибка сети');
|
||
}
|
||
const data = await response.json();
|
||
displayTimelapse(data.forecast.forecastday[0].hour); // Таймлапс на сегодня
|
||
} catch (error) {
|
||
console.error('Ошибка загрузки данных:', error);
|
||
alert('Не удалось загрузить данные о погоде. Проверьте API ключ.');
|
||
}
|
||
});
|
||
|
||
function displayTimelapse(hourlyData) {
|
||
timelapseContainer.innerHTML = '';
|
||
hourlyData.forEach(item => {
|
||
const div = document.createElement('div');
|
||
div.className = 'timelapse-item';
|
||
const hour = new Date(item.time).getHours();
|
||
div.innerHTML = `
|
||
<h3>${hour}:00</h3>
|
||
<p class="temp">${Math.round(item.temp_c)}°C</p>
|
||
<p class="desc">${item.condition.text}</p>
|
||
<p class="prec">Осадки: ${item.precip_mm} мм (${item.chance_of_rain}%)</p>
|
||
`;
|
||
timelapseContainer.appendChild(div);
|
||
});
|
||
|
||
// Фокус на текущем времени
|
||
const currentHour = new Date().getHours();
|
||
const currentDiv = Array.from(timelapseContainer.children).find(div => {
|
||
const h3 = div.querySelector('h3');
|
||
return parseInt(h3.textContent) === currentHour;
|
||
});
|
||
if (currentDiv) {
|
||
currentDiv.scrollIntoView({ behavior: 'smooth', inline: 'center' });
|
||
}
|
||
}
|