Script para Pronóstico del Tiempo de Hoy -

Script para Pronóstico del Tiempo de Hoy

Script para Pronóstico del Tiempo. Muestra el pronóstico del tiempo de una ciudad específica en tu página web.

Presentación: Widget del Clima

Este script es un widget interactivo del clima, creado con HTML, CSS y JavaScript, que permite a los usuarios consultar el pronóstico del tiempo de cualquier ciudad del mundo. El widget se integra fácilmente en cualquier página web y ofrece una experiencia de usuario limpia y funcional.

Características principales:

Búsqueda dinámica: El usuario puede introducir el nombre de una ciudad y obtener instantáneamente la información del clima.
Datos en tiempo real: Utiliza una API de clima para obtener datos actualizados, incluyendo la temperatura, una descripción de las condiciones meteorológicas, la humedad y la velocidad del viento.
Diseño responsivo: El widget se adapta a diferentes tamaños de pantalla, lo que lo hace ideal para su uso en dispositivos móviles y de escritorio.
Manejo de errores: Si la ciudad no se encuentra o si hay un problema con la clave de la API, el script muestra un mensaje de error claro y descriptivo.

Primer paso

Obtener una clave de API

Regístrate en OpenWeatherMap (o un servicio similar) para obtener una clave de API gratuita. Es muy sencillo simplemente creas una cuenta con tu email y una contraseña. Una vez registrado vas a tu perfil y verás un apartado que dirá My API Keys. Verás la opción crear una nueva API Key que es una cadena de texto larga.

Método 1 Copia los códigos por separado del Script para Pronóstico del Tiempo de Hoy

El código completo puede instalarse en cualquier parte de la web. Sin embargo, lo más recomendable para un correcto funcionamiento y organización es pegar el código en secciones específicas de tu archivo HTML.

Aquí te detallo cómo y dónde colocar cada parte del código:

HTML del widget: Debes pegar el código HTML del widget dentro de la etiqueta de tu página, en el lugar exacto donde deseas que aparezca. Puede ser en el header, en el main o en un div lateral, dependiendo del diseño de tu sitio web.

Código CSS: Este código debe ir dentro de la sección de tu HTML, encapsulado por una etiqueta

Aquí te detallo cómo y dónde colocar cada parte del código:

HTML del widget: Debes pegar el código HTML del widget dentro de la etiqueta <body> de tu página, en el lugar exacto donde deseas que aparezca. Puede ser en el header, en el main o en un div lateral, dependiendo del diseño de tu sitio web.
Código CSS: Este código debe ir dentro de la sección <head> de tu HTML, encapsulado por una etiqueta <style>. Si tu web ya utiliza un archivo CSS externo, puedes copiar y pegar el código CSS del widget al final de ese archivo para mantener todo en orden.
Código JavaScript: Lo ideal es que este código vaya justo antes de la etiqueta de cierre </body>. Esto asegura que todos los elementos HTML se hayan cargado en la página antes de que el script intente interactuar con ellos, lo que evita posibles errores.

Siguiendo esta estructura, podrás integrar el widget del clima en cualquier página web existente de forma organizada y sin causar conflictos con el resto del contenido. Recuerda siempre sustituir TU CLAVE API por la clave que crearás en OpenWeatherMap

Aquí tienes los códigos

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget del Clima</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="weather-container">
        <h1>Widget del Clima</h1>
        <div class="location-input">
            <input type="text" id="city-input" placeholder="Introduce una ciudad...">
            <button id="search-button">Buscar</button>
        </div>
        <div id="weather-info" class="hidden">
            <h2 id="city-name"></h2>
            <img decoding="async" id="weather-icon" src="" alt="Icono del clima">
            <p id="temperature"></p>
            <p id="description"></p>
            <p id="humidity"></p>
            <p id="wind-speed"></p>
        </div>
        <p id="error-message" class="hidden"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    margin: 0;
}

.weather-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

.location-input {
    margin-bottom: 20px;
}

#city-input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 70%;
}

button {
    padding: 8px 12px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
        
button:hover {
    background-color: #0056b3;
}

#weather-info {
    margin-top: 20px;
    transition: opacity 0.5s ease;
}

.hidden {
    display: none;
    opacity: 0;
}
        
#error-message {
    color: red;
    font-weight: bold;
    margin-top: 20px;
}

Javascript

// ¡REEMPLAZA ESTO CON TU CLAVE DE API REAL!
const API_KEY = ‘TU_CLAVE_DE_API’; 

const searchButton = document.getElementById(‘search-button’);
const cityInput = document.getElementById(‘city-input’);
const weatherInfo = document.getElementById(‘weather-info’);
const errorMessageEl = document.getElementById(‘error-message’);

searchButton.addEventListener(‘click’, () => {
    const cityName = cityInput.value;
    if (cityName) {
        fetchWeather(cityName);
    }
});

async function fetchWeather(city) {
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=es`;

    try {
        const response = await fetch(url);
        const data = await response.json();

        if (response.ok) {
            displayWeather(data);
        } else {
            if (response.status === 404) {
                showError(‘Ciudad no encontrada. Por favor, revisa el nombre.’);
            } else if (response.status === 401) {
                showError(‘Clave de API inválida o no activa. Espera unos minutos o revisa tu clave.’);
            } else {
                showError(`Error: ${data.message}`);
            }
        }
    } catch (error) {
        console.error(«Error al obtener los datos del clima:», error);
        showError(«Ocurrió un error al conectar con el servicio. Inténtalo de nuevo.»);
    }
}

function displayWeather(data) {
    errorMessageEl.classList.add(‘hidden’);
    
    const cityNameEl = document.getElementById(‘city-name’);
    const weatherIconEl = document.getElementById(‘weather-icon’);
    const temperatureEl = document.getElementById(‘temperature’);
    const descriptionEl = document.getElementById(‘description’);
    const humidityEl = document.getElementById(‘humidity’);
    const windSpeedEl = document.getElementById(‘wind-speed’);

    cityNameEl.textContent = data.name;
    weatherIconEl.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
    weatherIconEl.alt = data.weather[0].description;
    temperatureEl.textContent = `Temperatura: ${Math.round(data.main.temp)}°C`;
    descriptionEl.textContent = `Condición: ${data.weather[0].description}`;
    humidityEl.textContent = `Humedad: ${data.main.humidity}%`;
    windSpeedEl.textContent = `Velocidad del viento: ${data.wind.speed} m/s`;

    weatherInfo.classList.remove(‘hidden’);
}

function showError(message) {
    weatherInfo.classList.add(‘hidden’);
    errorMessageEl.textContent = message;
    errorMessageEl.classList.remove(‘hidden’);
}

Método 2: Copiar el código completo del Script para Pronóstico del Tiempo de hoy

También puedes usar un código completo con todo integrado.

Copia el siguiente código y pégalo en un nuevo archivo de texto. Guarda este archivo con la extensión .html (por ejemplo, clima.html).

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Widget del Clima</title>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
            margin: 0;
        }

        .weather-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }

        .location-input {
            margin-bottom: 20px;
        }

        #city-input {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 70%;
        }

        button {
            padding: 8px 12px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #0056b3;
        }

        #weather-info {
            margin-top: 20px;
            transition: opacity 0.5s ease;
        }

        .hidden {
            display: none;
            opacity: 0;
        }
    </style>
</head>
<body>

    <div class="weather-container">
        <h1>Widget del Clima</h1>
        <div class="location-input">
            <input type="text" id="city-input" placeholder="Introduce una ciudad...">
            <button id="search-button">Buscar</button>
        </div>
        <div id="weather-info" class="hidden">
            <h2 id="city-name"></h2>
            <img decoding="async" id="weather-icon" src="" alt="Icono del clima">
            <p id="temperature"></p>
            <p id="description"></p>
        </div>
    </div>

    <script>
        // ¡REEMPLAZA ESTO CON TU CLAVE DE API DE OPENWEATHERMAP!
        const API_KEY = 'TU CLAVE DE API'; 

        const searchButton = document.getElementById('search-button');
        const cityInput = document.getElementById('city-input');
        const weatherInfo = document.getElementById('weather-info');

        searchButton.addEventListener('click', () => {
            const cityName = cityInput.value;
            if (cityName) {
                fetchWeather(cityName);
            }
        });

        async function fetchWeather(city) {
            const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=es`;

            try {
                const response = await fetch(url);
                const data = await response.json();

                if (response.ok) {
                    displayWeather(data);
                } else {
                    alert(`Error: ${data.message}`);
                }
            } catch (error) {
                console.error("Error al obtener los datos del clima:", error);
                alert("Ocurrió un error al buscar la ciudad. Inténtalo de nuevo.");
            }
        }

        function displayWeather(data) {
            const cityNameEl = document.getElementById('city-name');
            const weatherIconEl = document.getElementById('weather-icon');
            const temperatureEl = document.getElementById('temperature');
            const descriptionEl = document.getElementById('description');

            cityNameEl.textContent = data.name;
            weatherIconEl.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
            weatherIconEl.alt = data.weather[0].description;
            temperatureEl.textContent = `Temperatura: ${Math.round(data.main.temp)}°C`;
            descriptionEl.textContent = `Condición: ${data.weather[0].description}`;

            weatherInfo.classList.remove('hidden');
        }
    </script>
</body>
</html>

Si quieres incrustarlo en una web de WordPress por ejemplo, puedes añadirlo en la parte de la página o entrada donde quieras que se vea, o a través e de un iframe de la página guardada anteriormente, por ejemplo clima.html.

Recuerda siempre sustituir TU CLAVE API por la clave que crearás en OpenWeatherMap

Aquí tienes el código iframe si decides incrustarlo de esta forma. Debes sustituir url de tu pagina, por la url donde está hospedada la pagina que creaste, por ejemplo https://tudominio/clima.html.

IFRAME

<iframe
    src=" url de tu pagina"
    width="100%"
    height="400px"
    style="border:none;"
    title="Descripción del contenido incrustado para accesibilidad"
    loading="lazy"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms">
</iframe>

Personalizar el Script con el CSS

Para modificar el CSS de tu widget del clima actual, puedes editar directamente el código. El código CSS está dentro de la etiqueta <style> y es donde se definen todos los aspectos visuales del widget.

Aquí tienes una guía con las partes clave que puedes modificar para personalizarlo a tu gusto:

1. Cambiar los colores

Puedes ajustar los colores principales del widget para que se adapten a la paleta de colores de tu página web.

Color de fondo del cuerpo:
- Busca background-color: #f0f2f5; en la regla body.
- Cámbialo por un color diferente, por ejemplo: background-color: #e6f7ff; (un azul muy claro).
Color de fondo del widget:
- Busca background-color: #fff; en la regla .weather-container.
- Cámbialo para el color principal del cuadro del widget, por ejemplo: background-color: #f8f9fa; (un gris muy claro).
Color del botón:
- Busca background-color: #007bff; en la regla button.
- Este es el color de fondo del botón «Buscar». Por ejemplo, background-color: #28a745; (un verde).
- Busca background-color: #0056b3; en la regla button:hover para cambiar el color cuando el cursor pasa por encima.

2. Cambiar la tipografía

Puedes modificar el tipo de letra y el tamaño de los textos.

Familia de la fuente:
- Busca font-family: Arial, sans-serif; en la regla body.
- Puedes usar otra fuente de tu preferencia, como font-family: 'Verdana', sans-serif;.
Tamaño de la fuente de la ciudad:
- Busca #city-name para modificar el título.

3. Cambiar el diseño y el espaciado

Puedes ajustar el tamaño de los elementos, los bordes y las sombras.

Ancho del widget:
- Busca width: 300px; en la regla .weather-container.
- Aumenta o disminuye este valor para hacer el widget más ancho o más estrecho.
Redondeo de bordes:
- Busca border-radius: 10px; en la regla .weather-container para cambiar el redondeo del cuadro principal. Un valor de 0px lo haría cuadrado.
Sombra del widget:
- Busca box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); en la regla .weather-container.
- Puedes hacer la sombra más grande o más sutil cambiando los valores.

4. Personalizar el mensaje de error

En el código que subiste, tu JavaScript ya está preparado para un mensaje de error, pero el CSS para darle estilo no está incluido. Es una buena práctica añadirlo.

Paso: Añade la siguiente regla CSS dentro de tu etiqueta <style>.CSS#error-message { color: red; font-weight: bold; margin-top: 20px; }
Descripción: Esta regla hará que el texto del mensaje de error aparezca en rojo, en negrita y con un poco de margen superior.

Puedes experimentar con estos valores para adaptar el widget al diseño de tu sitio web.