Script Pronóstico del Clima Para 5 Días -

Script Pronóstico del Clima Para 5 Días. Este widget interactivo presenta el pronóstico del clima para los próximos 5 días, con actualizaciones cada 3 horas. Está diseñado para ser incrustado fácilmente en cualquier página web.

Presentación: Script Pronóstico del Clima Para 5 Días

Este script es un widget interactivo creado con HTML, CSS y JavaScript que permite a los usuarios consultar el pronóstico del tiempo para los próximos 5 días en cualquier ciudad del mundo. Utiliza la API de OpenWeatherMap para obtener los datos en tiempo real y los presenta en un formato claro y visual.

Características principales:

Búsqueda dinámica: El usuario puede introducir el nombre de una ciudad para obtener el pronóstico de los próximos 5 días.
Datos en tiempo real: Se conecta a la API de OpenWeatherMap para mostrar la temperatura, una descripción de las condiciones meteorológicas y el icono del clima para cada día.
Diseño claro: El pronóstico se presenta en un formato de «tarjetas» para cada día, lo que lo hace fácil de leer.
Manejo de errores: El script informa al usuario si la ciudad no se encuentra o si hay un problema con la clave de la API.

Paso 1: Consigue una clave API

Crea una cuenta en OpenWeatherMap (u otro servicio equivalente) para obtener una clave API gratuita. El proceso es fácil: solo necesitas registrarte con tu correo electrónico y una contraseña. Después de completar el registro, dirígete a tu perfil y busca la sección llamada My API Keys. Allí podrás generar una nueva clave API, que se presentará como una cadena de texto extensa.

Método 1 del Script Pronóstico del Clima Para 5 Días

A continuación vamos con los códigos

1. Código HTML (`index.html`)

Este archivo contiene la estructura del widget. Es el esqueleto donde se colocará el formulario de búsqueda, el nombre de la ciudad y el pronóstico de los próximos días. El código HTML es la parte visible del widget. Lo debes pegar en el lugar exacto de tu página donde quieres que aparezca el pronóstico.

Ubicación: Pégalo dentro de la etiqueta <body> de tu archivo HTML principal, en la posición que desees. Por ejemplo, en un div lateral, en el header, o en el área de contenido principal.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pronóstico de 5 Días</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="weather-container">
        <h1>Pronóstico de 5 Días</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>
            <div id="forecast-list">
                </div>
        </div>
        <p id="error-message" class="hidden"></p>
    </div>

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

2. Código CSS (`style.css`)

Este archivo se encarga de todo el diseño visual del widget. Define los estilos del contenedor, los botones, los campos de entrada y, especialmente, el diseño de las tarjetas de pronóstico para cada día. El código CSS lo ideal es que esté en la sección de estilos de tu página.

Ubicación: Tienes dos opciones:

Opción A (Recomendada): Si ya tienes un archivo CSS externo para tu web (por ejemplo, style.css), simplemente copia y pega las reglas CSS del widget (.weather-container, #city-input, etc.) al final de ese archivo.
Opción B: Si no usas un archivo externo, pega todo el bloque de código CSS (incluyendo las etiquetas <style>) dentro de la sección <head> de tu HTML.

Ubicación: Pega este bloque de código (incluyendo las etiquetas <script>) justo antes de la etiqueta de cierre </body> de tu página. Es crucial que el script se cargue al final para asegurarse de que todos los elementos HTML (#city-input, #weather-info, etc.) ya existan cuando el script intente usarlos.

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: 350px;
}

.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;
}

#forecast-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.forecast-day {
    background-color: #fbbc05;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px;
    width: 150px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.forecast-day h3 {
    margin: 0 0 5px 0;
    font-size: 1em;
}

.forecast-day img {
    width: 50px;
    height: 50px;
}

3. Código JavaScript (`script.js`)

Este es el corazón del widget. Se encarga de la lógica de la búsqueda, de la llamada a la API y de la manipulación del DOM para mostrar los datos del pronóstico.

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) {
    // URL del endpoint de pronóstico de 5 días
    const url = `https://api.openweathermap.org/data/2.5/forecast?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.’);
            } 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 forecastListEl = document.getElementById(‘forecast-list’);
    
    cityNameEl.textContent = data.city.name;
    forecastListEl.innerHTML = »; // Limpiar la lista de pronósticos

    // Filtrar los datos para obtener un pronóstico por día (aproximadamente a mediodía)
    const dailyForecasts = data.list.filter(item => item.dt_txt.includes(’12:00:00′));

    dailyForecasts.forEach(forecast => {
        const date = new Date(forecast.dt * 1000);
        const day = date.toLocaleDateString(‘es-ES’, { weekday: ‘long’ });
        const temp = Math.round(forecast.main.temp);
        const icon = forecast.weather[0].icon;

        const forecastDayEl = document.createElement(‘div’);
        forecastDayEl.classList.add(‘forecast-day’);

        forecastDayEl.innerHTML = `
            <h3>${day}</h3>
            <img decoding="async" src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="Icono del clima">
            <p>${temp}°C</p>
        `;
        forecastListEl.appendChild(forecastDayEl);
    });

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

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

Instrucciones de uso

Guarda los archivos:
- Crea un archivo llamado index.html y pega el código HTML en él.
- Crea un archivo llamado style.css y pega el código CSS en él.
- Crea un archivo llamado script.js y pega el código JavaScript en él.
- Asegúrate de que los tres archivos estén en la misma carpeta.
Reemplaza la clave de API: En el archivo script.js, busca la línea const API_KEY = 'TU_CLAVE_DE_API'; y reemplaza el texto con tu clave de OpenWeatherMap.
Abre el archivo: Abre index.html en tu navegador para ver el widget funcionando.

Método 2 de Script Pronóstico del Clima Para 5 Días

Este método es ideal si quieres probar el widget rápidamente o si prefieres no manejar varios archivos.

Archivo HTML Completo (`forecast_widget.html`)

Simplemente copia y pega todo este código en un archivo de texto y guárdalo con la extensión

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pronóstico de 5 Días</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: 350px;
        }

        .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;
        }

        #forecast-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .forecast-day {
            background-color: #fbbc05;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 10px;
            width: 150px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .forecast-day h3 {
            margin: 0 0 5px 0;
            font-size: 1em;
        }

        .forecast-day img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>

    <div class="weather-container">
        <h1>Pronóstico de 5 Días</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>
            <div id="forecast-list">
                </div>
        </div>
        <p id="error-message" class="hidden"></p>
    </div>

    <script>
        // ¡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/forecast?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.');
                    } 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 forecastListEl = document.getElementById('forecast-list');
            
            cityNameEl.textContent = data.city.name;
            forecastListEl.innerHTML = ''; // Limpiar la lista de pronósticos

            const dailyForecasts = data.list.filter(item => item.dt_txt.includes('12:00:00'));

            dailyForecasts.forEach(forecast => {
                const date = new Date(forecast.dt * 1000);
                const day = date.toLocaleDateString('es-ES', { weekday: 'long' });
                const temp = Math.round(forecast.main.temp);
                const icon = forecast.weather[0].icon;

                const forecastDayEl = document.createElement('div');
                forecastDayEl.classList.add('forecast-day');

                forecastDayEl.innerHTML = `
                    <h3>${day}</h3>
                    <img decoding="async" src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="Icono del clima">
                    <p>${temp}°C</p>
                `;
                forecastListEl.appendChild(forecastDayEl);
            });

            weatherInfo.classList.remove('hidden');
        }

        function showError(message) {
            weatherInfo.classList.add('hidden');
            errorMessageEl.textContent = message;
            errorMessageEl.classList.remove('hidden');
        }
    </script>
</body>
</html>

Aquí tienes el código completo en un solo archivo HTML para el widget del pronóstico de 5 días, junto con las instrucciones para su uso.

Este método es ideal si quieres probar el widget rápidamente o si prefieres no manejar varios archivos.

Archivo HTML Completo

Simplemente copia y pega todo este código en un archivo de texto y guárdalo con la extensión .html.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pronóstico de 5 Días</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: 350px;
        }

        .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;
        }

        #forecast-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .forecast-day {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 10px;
            width: 150px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .forecast-day h3 {
            margin: 0 0 5px 0;
            font-size: 1em;
        }

        .forecast-day img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>

    <div class="weather-container">
        <h1>Pronóstico de 5 Días</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>
            <div id="forecast-list">
                </div>
        </div>
        <p id="error-message" class="hidden"></p>
    </div>

    <script>
        // ¡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/forecast?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.');
                    } 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 forecastListEl = document.getElementById('forecast-list');
            
            cityNameEl.textContent = data.city.name;
            forecastListEl.innerHTML = ''; // Limpiar la lista de pronósticos

            const dailyForecasts = data.list.filter(item => item.dt_txt.includes('12:00:00'));

            dailyForecasts.forEach(forecast => {
                const date = new Date(forecast.dt * 1000);
                const day = date.toLocaleDateString('es-ES', { weekday: 'long' });
                const temp = Math.round(forecast.main.temp);
                const icon = forecast.weather[0].icon;

                const forecastDayEl = document.createElement('div');
                forecastDayEl.classList.add('forecast-day');

                forecastDayEl.innerHTML = `
                    <h3>${day}</h3>
                    <img decoding="async" src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="Icono del clima">
                    <p>${temp}°C</p>
                `;
                forecastListEl.appendChild(forecastDayEl);
            });

            weatherInfo.classList.remove('hidden');
        }

        function showError(message) {
            weatherInfo.classList.add('hidden');
            errorMessageEl.textContent = message;
            errorMessageEl.classList.remove('hidden');
        }
    </script>
</body>
</html>

Instrucciones de uso del Script Pronóstico del Clima Para 5 Días

Guarda el archivo: Copia todo el código de arriba y pégalo en un archivo de texto. Guarda el archivo con la extensión .html (por ejemplo, pronostico.html).
Reemplaza la clave de API: Busca la línea const API_KEY = 'TU_CLAVE_DE_API'; y reemplaza el texto con tu clave real de OpenWeatherMap.
Abre el archivo: Abre el archivo .html en tu navegador web (Chrome, Firefox, etc.). El widget aparecerá en la pantalla, listo para ser usado.

Este método te permite tener todo el script, desde la estructura hasta la lógica, en un solo lugar. Es ideal para probar rápidamente el código o para incrustarlo en una página de WordPress usando el bloque de «HTML Personalizado».

Usando un Iframe

También puedes incrustar el widget usando un iframe. Copia el siguiente código, y reemplaza «url de tu página», por la url donde hospedaste tu página, por ejemplo https;//tudominio.com/pronostico.html

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

Personalizando el Script con CSS

Para modificar el CSS de tu widget del pronóstico de 5 días, tienes varias opciones dependiendo de cómo quieras hacerlo. El código CSS está dentro de la etiqueta <style> en el archivo que te proporcioné, por lo que puedes editarlo directamente.

Aquí te doy algunas ideas de cómo puedes modificarlo y qué partes del código debes buscar.

1. Cambiar los colores

Puedes cambiar los colores principales del widget.

Color de fondo del cuerpo: Busca background-color: #f0f2f5; en la regla body. Puedes cambiarlo por otro color hexadecimal, un nombre de color (ej. lightblue) o un código RGB.
Color de fondo del widget: Busca background-color: #fff; en la regla .weather-container. Este es el fondo del cuadro principal del widget.
Color del botón de búsqueda: Busca background-color: #007bff; en la regla button. Este es el color azul del botón. También puedes cambiar el color del hover en button:hover si quieres un efecto diferente.
Color de fondo de las tarjetas de pronóstico: Busca background-color: #fbbc05; en la regla .forecast-day. Esto cambiará el color de fondo de las tarjetas individuales de cada día.

2. Cambiar la tipografía

Puedes modificar la fuente y el tamaño de los textos.

Familia de la fuente: Busca font-family: Arial, sans-serif; en la regla body. Puedes cambiar Arial por otra fuente que tengas disponible, como Georgia, Verdana, o una fuente de Google Fonts.
Tamaño de los títulos: Busca font-size: 1em; en la regla .forecast-day h3. Puedes ajustar el valor para hacer los títulos de los días más grandes o más pequeños.

3. Cambiar el diseño y el espaciado

Puedes ajustar el tamaño de los elementos y cómo están distribuidos.

Ancho del widget: Busca width: 350px; en la regla .weather-container. Aumenta o disminuye este valor para que el widget sea más ancho o más estrecho.
Margen de los elementos: Puedes usar la propiedad margin o padding. Por ejemplo, en la regla .weather-container hay padding: 20px;, que añade un espacio de 20 píxeles entre el borde del cuadro y su contenido. Puedes ajustar este valor.
Espaciado entre las tarjetas de pronóstico: Busca gap: 10px; en la regla #forecast-list. Este valor controla el espacio entre las tarjetas individuales.

Ejemplo de modificación

Imagina que quieres un widget con un estilo más oscuro. Así podrías modificar el código CSS:

CSS

/* Aquí iría el resto del CSS que no quieres cambiar */

.weather-container {
    background-color: #333; /* Color de fondo oscuro */
    color: #fff; /* Color del texto claro */
    padding: 25px; /* Más espaciado */
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 380px; /* Un poco más ancho */
}

button {
    background-color: #00aaff; /* Un azul más claro */
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0099e6;
}

#forecast-list {
    gap: 15px; /* Más espacio entre las tarjetas */
}

.forecast-day {
    background-color: #444; /* Color de fondo oscuro para las tarjetas */
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px;
    width: 150px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#error-message {
    color: #ff6347; /* Un rojo más anaranjado */
    font-weight: bold;
    margin-top: 20px;
}

Simplemente, edita los valores y propiedades del CSS que te proporcioné para que se adapten a tu gusto. Si te surge alguna duda sobre cómo modificar una propiedad específica, no dudes en preguntar.