html/lab6/task8/script.js - master - Coderdev/web-static-labs

html/lab6/task8/script.js
58 строк2 KB
Coderdev
12 май 2026, 12:37
12 май 2026, 12:37d8ecd0f
const API_KEY = '77811cea55acc82d316d4f02e26dc7a3'; 
const display = document.getElementById('weather-display');
const btn = document.getElementById('get-weather');
const input = document.getElementById('city-input');

async function getWeather() {
    const city = input.value.trim().toLowerCase();
    if (!city) return;

    const cachedData = localStorage.getItem(`weather_${city}`);
    const now = Date.now();

    if (cachedData) {
        const { data, timestamp } = JSON.parse(cachedData);
        if (now - timestamp < 600000) {
            renderWeather(data, 'localStorage');
            return;
        }
    }

    try {
        const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ru`);
        if (!response.ok) throw new Error('Город не найден');
        
        const data = await response.json();
        
        const weatherInfo = {
            temp: data.main.temp,
            windSpeed: data.wind.speed,
            windDeg: data.wind.deg,
            description: data.weather[0].description,
            name: data.name
        };

        localStorage.setItem(`weather_${city}`, JSON.stringify({
            data: weatherInfo,
            timestamp: now
        }));

        renderWeather(weatherInfo, 'API');
    } catch (err) {
        display.innerHTML = `<p style="color:red">${err.message}</p>`;
    }
}

function renderWeather(data, source) {
    display.innerHTML = `
        <div class="weather-card">
            <h3>Погода в г. ${data.name}</h3>
            <p>Температура: ${data.temp}°C</p>
            <p>Описание: ${data.description}</p>
            <p>Ветер: ${data.windSpeed} м/с, направление: ${data.windDeg}°</p>
            <p class="source-info">Источник данных: ${source}</p>
        </div>
    `;
}

btn.addEventListener('click', getWeather);