{"id":661,"date":"2024-10-25T12:57:09","date_gmt":"2024-10-25T17:57:09","guid":{"rendered":"https:\/\/vallartahotel.com\/?p=661"},"modified":"2024-10-27T09:29:26","modified_gmt":"2024-10-27T15:29:26","slug":"weather-widget-forecast","status":"publish","type":"post","link":"https:\/\/vallartahotel.com\/espanol\/weather-widget-forecast\/","title":{"rendered":"Weather Widget 7-day Forecast"},"content":{"rendered":"<!-- Weather Widget Container -->\n<div id=\"pv-weather-widget\" class=\"weather-container\" style=\"    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;    max-width: 300px;    padding: 16px;    border-radius: 12px;    background: linear-gradient(145deg, #2193b0, #6dd5ed);    color: white;    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\">\n    <h2 style=\"        margin: 0 0 12px 0;         text-align: center;        font-size: 16px;        font-weight: 500;        letter-spacing: 0.5px;    \">Puerto Vallarta Weather<\/h2>\n    <div id=\"weather-info\" style=\"text-align: center; font-size: 14px;\">Loading&#8230;<\/div>\n<\/div>\n\n<script>\nconst API_KEY = 'YOUR_API_KEY'; \/\/ Keep your existing API key here\nconst CITY_ID = '4005867';\n\nasync function getWeatherData() {\n    try {\n        \/\/ Get current weather\n        const weatherResponse = await fetch(`https:\/\/api.openweathermap.org\/data\/2.5\/weather?id=${CITY_ID}&appid=${API_KEY}&units=metric`);\n        const currentData = await weatherResponse.json();\n        \n        \/\/ Get 5-day forecast\n        const forecastResponse = await fetch(`https:\/\/api.openweathermap.org\/data\/2.5\/forecast?id=${CITY_ID}&appid=${API_KEY}&units=metric`);\n        const forecastData = await forecastResponse.json();\n\n        const sunrise = new Date(currentData.sys.sunrise * 1000).toLocaleTimeString('en-US', { \n            timeStyle: 'short',\n            timeZone: 'America\/Mexico_City'\n        });\n        const sunset = new Date(currentData.sys.sunset * 1000).toLocaleTimeString('en-US', {\n            timeStyle: 'short',\n            timeZone: 'America\/Mexico_City'\n        });\n\n        \/\/ Process forecast data to get daily values (one reading per day at noon)\n        const dailyForecasts = [];\n        const processedDates = new Set();\n\n        forecastData.list.forEach(forecast => {\n            const date = new Date(forecast.dt * 1000);\n            const dateKey = date.toISOString().split('T')[0];\n            \n            \/\/ Only take one reading per day (around noon)\n            const hour = date.getHours();\n            if (!processedDates.has(dateKey) && hour >= 11 && hour <= 13) {\n                processedDates.add(dateKey);\n                dailyForecasts.push({\n                    date: date,\n                    temp: forecast.main.temp,\n                    icon: forecast.weather[0].icon,\n                    description: forecast.weather[0].description,\n                    precipitation: forecast.pop * 100\n                });\n            }\n        });\n\n        \/\/ Create forecast HTML\n        const forecastHTML = dailyForecasts\n            .slice(0, 5) \/\/ Limit to 5 days\n            .map((data, index) => {\n                const dayName = data.date.toLocaleDateString('en-US', { \n                    weekday: index === 0 ? 'long' : 'short',\n                    timeZone: 'America\/Mexico_City'\n                });\n                return `\n                    <div style=\"\n                        display: flex;\n                        align-items: center;\n                        padding: 8px;\n                        border-bottom: ${index < 4 ? '1px solid rgba(255,255,255,0.1)' : 'none'};\n                    \">\n                        <div style=\"flex: 1; font-size: 12px;\">${index === 0 ? 'Today' : dayName}<\/div>\n                        <div style=\"width: 40px; display: flex; justify-content: center;\">\n                            <img decoding=\"async\" src=\"https:\/\/openweathermap.org\/img\/wn\/${data.icon}.png\" \n                                 alt=\"${data.description}\"\n                                 style=\"width: 30px; height: 30px; margin: -6px;\">\n                        <\/div>\n                        <div style=\"flex: 1; text-align: right; font-size: 12px;\">\n                            <span title=\"Precipitation\">${Math.round(data.precipitation)}%<\/span>\n                            <span style=\"margin-left: 8px;\" title=\"Temperature\">${Math.round(data.temp)}\u00b0C<\/span>\n                        <\/div>\n                    <\/div>\n                `;\n            }).join('');\n\n        const weatherInfo = `\n            <div style=\"\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                gap: 8px;\n                margin-bottom: 12px;\n            \">\n                <img decoding=\"async\" src=\"https:\/\/openweathermap.org\/img\/wn\/${currentData.weather[0].icon}@2x.png\" \n                     alt=\"${currentData.weather[0].description}\" \n                     style=\"width: 40px; height: 40px; margin: -8px;\">\n                <div>\n                    <div style=\"font-size: 24px; font-weight: 600; line-height: 1;\">${Math.round(currentData.main.temp)}\u00b0C<\/div>\n                    <div style=\"font-size: 12px; opacity: 0.9; text-transform: capitalize;\">${currentData.weather[0].description}<\/div>\n                <\/div>\n            <\/div>\n            <div style=\"\n                display: grid;\n                grid-template-columns: repeat(2, 1fr);\n                gap: 8px;\n                font-size: 12px;\n                text-align: left;\n                background: rgba(255, 255, 255, 0.1);\n                padding: 10px;\n                border-radius: 8px;\n                margin-bottom: 12px;\n            \">\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83d\udca7<\/span> ${currentData.main.humidity}%\n                <\/div>\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83d\udca8<\/span> ${Math.round(currentData.wind.speed * 3.6)} km\/h\n                <\/div>\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83c\udf05<\/span> ${sunrise}\n                <\/div>\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83c\udf07<\/span> ${sunset}\n                <\/div>\n            <\/div>\n            <div style=\"\n                text-align: left;\n                background: rgba(255, 255, 255, 0.1);\n                padding: 10px;\n                border-radius: 8px;\n            \">\n                <div style=\"\n                    font-size: 13px;\n                    font-weight: 500;\n                    margin-bottom: 8px;\n                    padding-bottom: 4px;\n                    border-bottom: 1px solid rgba(255,255,255,0.1);\n                \">5-Day Forecast<\/div>\n                ${forecastHTML}\n            <\/div>\n        `;\n        \n        document.getElementById('weather-info').innerHTML = weatherInfo;\n    } catch (error) {\n        document.getElementById('weather-info').innerHTML = 'Weather data unavailable';\n        console.error('Error fetching weather data:', error);\n    }\n}\n\ngetWeatherData();\nsetInterval(getWeatherData, 600000);\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Puerto Vallarta Weather Loading&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-661","post","type-post","status-publish","format-standard","hentry","category-what-to-do"],"_links":{"self":[{"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/posts\/661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/comments?post=661"}],"version-history":[{"count":3,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/posts\/661\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/posts\/661\/revisions\/664"}],"wp:attachment":[{"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/media?parent=661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/categories?post=661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/tags?post=661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}