Widget teplota | Elementor | 2025

				
					<div class="weather-widget" id="temperature-widget-1">
    <h2>Teplota podle <strong>Města</strong></h2>
    <input type="text" id="city-input-1" placeholder="Zadejte město..." />
    <button id="get-weather-1">Zobrazit teplotu</button>
    
    <!-- Výstupní oblast pro zobrazení výsledků počasí -->
    <div id="weather-output-1" style="display:none;">
        <p id="city-name-1"></p> <!-- Město -->
        <p id="temperature-1"></p> <!-- Teplota -->
    </div>

    <!-- Volba jednotek pro teploty -->
    <div class="unit-selector">
        <label>
            <input type="radio" name="unit-1" value="metric" checked> °C (Celsia)
        </label>
        <label>
            <input type="radio" name="unit-1" value="imperial"> °F (Fahrenheit)
        </label>
    </div>
</div>

<script>
    const apiKey = 'MÍSTO PRO VÁŠ API KLÍČ'; // Váš API klíč pro WeatherAPI

    const getWeatherButton1 = document.getElementById("get-weather-1");
    const cityInput1 = document.getElementById("city-input-1");
    const temperatureOutput1 = document.getElementById("temperature-1");
    const cityNameOutput1 = document.getElementById("city-name-1");
    const weatherOutput1 = document.getElementById("weather-output-1");

    getWeatherButton1.addEventListener("click", function() {
        const city = cityInput1.value;
        const unit = document.querySelector('input[name="unit-1"]:checked').value;

        if (city) {
            fetchWeather1(city, unit);
        } else {
            alert("Zadejte město!");
        }
    });

    function fetchWeather1(city, unit) {
        const url = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}&aqi=no`;

        fetch(url)
            .then(response => response.json())
            .then(data => {
                const temperature = unit === 'metric' ? data.current.temp_c : data.current.temp_f;
                const cityName = data.location.name;

                // Nastavení textu pro město a teplotu
                cityNameOutput1.textContent = cityName;
                temperatureOutput1.textContent = `${temperature}°`;

                // Změna barvy podle teploty
                const tempColor = getTemperatureColor1(temperature, unit);
                temperatureOutput1.style.color = tempColor;

                // Zobrazení výsledků
                weatherOutput1.style.display = 'block';
            })
            .catch(error => {
                console.error("Chyba při získávání počasí:", error);
            });
    }

    // Funkce pro výpočet barvy podle teploty
    function getTemperatureColor1(temperature, unit) {
        let tempInCelsius = unit === 'metric' ? temperature : (temperature - 32) * (5 / 9); // Převeď Fahrenheit na Celsius

        // Určení barvy podle teploty
        if (tempInCelsius <= 0) {
            return '#3498db'; // Modrá pro chladné počasí
        } else if (tempInCelsius > 0 && tempInCelsius <= 10) {
            return '#5f9ea0'; // Světle modrá pro chladnější počasí
        } else if (tempInCelsius > 10 && tempInCelsius <= 20) {
            return '#f39c12'; // Žlutá pro mírně teplé počasí
        } else if (tempInCelsius > 20 && tempInCelsius <= 30) {
            return '#e67e22'; // Oranžová pro teplejší počasí
        } else {
            return '#e74c3c'; // Červená pro horké počasí
        }
    }
</script>