{"id":649,"date":"2024-10-25T12:31:57","date_gmt":"2024-10-25T17:31:57","guid":{"rendered":"https:\/\/vallartahotel.com\/?p=649"},"modified":"2024-10-25T12:56:22","modified_gmt":"2024-10-25T17:56:22","slug":"weather-widget","status":"publish","type":"post","link":"https:\/\/vallartahotel.com\/espanol\/weather-widget\/","title":{"rendered":"Weather Widget"},"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: 240px;    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 = '7f6606c1f3b7e749cad2f29c7693a7f4'; \/\/ 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 weatherData = await weatherResponse.json();\n        \n        \/\/ Get forecast data for precipitation probability\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        \/\/ Get next 3-hour precipitation probability\n        const precipProb = forecastData.list[0].pop * 100; \/\/ Converts from 0-1 to percentage\n        \n        const sunrise = new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-US', { \n            timeStyle: 'short',\n            timeZone: 'America\/Mexico_City'\n        });\n        const sunset = new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-US', {\n            timeStyle: 'short',\n            timeZone: 'America\/Mexico_City'\n        });\n        const localTime = new Date().toLocaleTimeString('en-US', {\n            timeStyle: 'short',\n            timeZone: 'America\/Mexico_City'\n        });\n\n        \/\/ Calculate feels like difference\n        const tempDiff = Math.round(weatherData.main.feels_like - weatherData.main.temp);\n        const feelsLikeText = tempDiff !== 0 \n            ? `Feels like ${Math.round(weatherData.main.feels_like)}\u00b0C`\n            : '';\n\n        const weatherInfo = `\n            <div style=\"\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                gap: 8px;\n                margin-bottom: 8px;\n            \">\n                <img decoding=\"async\" src=\"https:\/\/openweathermap.org\/img\/wn\/${weatherData.weather[0].icon}@2x.png\" \n                     alt=\"${weatherData.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(weatherData.main.temp)}\u00b0C<\/div>\n                    <div style=\"font-size: 11px; opacity: 0.9;\">${feelsLikeText}<\/div>\n                    <div style=\"font-size: 12px; opacity: 0.9; text-transform: capitalize;\">${weatherData.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: 8px;\n            \">\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83d\udd52<\/span> ${localTime}\n                <\/div>\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83d\udca7<\/span> ${weatherData.main.humidity}%\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                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            \">\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83d\udca8<\/span> ${Math.round(weatherData.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\udf27\ufe0f<\/span> ${Math.round(precipProb)}%\n                <\/div>\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83d\udcca<\/span> ${Math.round(weatherData.main.pressure)} hPa\n                <\/div>\n                <div style=\"display: flex; align-items: center; gap: 4px;\">\n                    <span style=\"opacity: 0.8;\">\ud83d\udc41\ufe0f<\/span> ${Math.round(weatherData.visibility \/ 100)}%\n                <\/div>\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-649","post","type-post","status-publish","format-standard","hentry","category-what-to-do"],"_links":{"self":[{"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/posts\/649","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=649"}],"version-history":[{"count":10,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/posts\/649\/revisions"}],"predecessor-version":[{"id":660,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/posts\/649\/revisions\/660"}],"wp:attachment":[{"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/media?parent=649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/categories?post=649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vallartahotel.com\/espanol\/wp-json\/wp\/v2\/tags?post=649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}