{"id":54,"date":"2022-06-10T22:37:35","date_gmt":"2022-06-10T22:37:35","guid":{"rendered":"https:\/\/megadoug.com\/wp-customtheme\/?page_id=54"},"modified":"2022-06-10T22:57:22","modified_gmt":"2022-06-10T22:57:22","slug":"weather-page","status":"publish","type":"page","link":"https:\/\/megadoug.com\/wp-customtheme\/weather-page\/","title":{"rendered":"Weather Page"},"content":{"rendered":"\n<p>about:blank<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Weather Page<\/h1>\n\n\n\n<pre id=\"block-f39167c5-04de-4517-b757-bad8c028fa56\" class=\"wp-block-preformatted\"><\/pre>\n\n\n\n<link\n            href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\"\n            rel=\"stylesheet\"\n            integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\"\n            crossorigin=\"anonymous\"\n        \/>\n<div id=\"weather-container\" class=\"container\">\n            <div class=\"my-row row\">\n                <div\n                    id=\"todaysWeatherIcon\"\n                    class=\"my-col col-4 col-md-2 text-center align-self-center\"\n                >\n                    \u2601\ufe0f\n                <\/div>\n                <div\n                    class=\"my-col col-4 col-md-2 mb-3 mb-md-0 text-center text-md-start align-self-center\"\n                >\n                    <span id=\"todaysTemp\">48<\/span>\n                    <div class=\"standard-font-size\">\n                        <strong>\u00b0F<\/strong> | \u00b0C\n                    <\/div>\n                <\/div>\n                <div\n                    id=\"todaysDetails\"\n                    class=\"my-col col-4 col-md-3 mb-3 mb-sm-0 text-sm-center text-md-start smallFontSize align-self-center\"\n                >\n                    Precipitation: 88%<br \/>\n                    Humidity: 86%<br \/>\n                    Wind: 10mph\n                <\/div>\n                <div\n                    class=\"my-col col-0 col-md-5 text-md-end order-first order-md-last px-4 standard-font-size\"\n                >\n                    <div>\n                        <select name=\"\" id=\"location\">\n                            <option value=\"Ocean City\">\n                                Ocean City, NJ 08226\n                            <\/option>\n                            <option value=\"Syracuse\">Syracuse, NY 13224<\/option>\n                            <option value=\"San Francisco\">\n                                San Francisco, CA 94109\n                            <\/option>\n                        <\/select>\n                    <\/div>\n                    <div id=\"today\">Today<\/div>\n                    <div id=\"weather-now\">Cloudy<\/div>\n                <\/div>\n            <\/div>\n            <hr \/>\n            <div\n                id=\"forecast\"\n                class=\"my-row row align-items-stretch justify-content-around\"\n            ><\/div>\n            <hr \/>\n            <div id=\"zip-form\" class=\"row d-flex align-items-center\">\n                <div id=\"city-name\" class=\"col-12 col-sm-6\"><\/div>\n                <div class=\"col-12 col-sm-6\">\n                    <label for=\"zip\">beta: Enter zipcode<\/label>\n                    <input\n                        type=\"text\"\n                        name=\"zip\"\n                        id=\"zip-input\"\n                        minlength=\"5\"\n                        maxlength=\"5\"\n                        size=\"5\"\n                    \/>\n                    <button id=\"zip-button\">GET WEATHER BY ZIP<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n<style>\n.right-align-text {\n    text-align: right;\n}\n.left-align-text {\n    text-align: left;\n}\n#sampleimage {\n    width: 100%;\n    margin-top: 0;\n}\n#today,#weather-now {\n    margin-right: 1rem;\n}\n#todaysWeatherIcon {\n    font-size: 76px;\n}\n#todaysTemp {\n    font-size: 36px;\n    font-weight: 700;\n}\n.standard-font-size {\n    font-size: 18px;\n}\n.smallFontSize {\n    font-size: 14px;\n}\n.small-icon {\n    font-size: 36px;\n}\n#weather-container {\n    padding: 16px;\n    margin-bottom: 10vh;\n    \/* border: 1px solid white; *\/\n    border-radius: 0.5rem;\n    background-color: rgba(255, 255, 255, 0.65);\n    box-shadow: inset 1rem 1rem 1rem -0.5rem white,\n        inset -1rem -1rem 1rem -1rem #add8e6, 0 0 5rem rgba(0, 101, 148, 0.5);\n    text-shadow: 0 0 1rem white;\n}\nselect {\n    background-color: transparent;\n    border: none;\n}\n#forecast {\n    position: relative;\n}\n.forecast-day {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n.forecast-day .day {\n    font-weight: bold;\n}\n.forecast-day .description {\n    font-size: 0.9em;\n    line-height: 1.1em;\n}\n#city-name {\n    color: #222;\n    font-weight: bold;\n    font-size: 1.2rem;\n    text-align: left;\n    letter-spacing: 0.05em;\n}\n#zip-form {\n    margin-top: 1rem;\n    \/* border-top: 0.25px solid silver; *\/\n    padding: 0 1rem 0.5rem;\n    font-size: 0.8rem;\n    text-align: right;\n    color: grey;\n}\n#zip-input {\n    border: 1px solid grey;\n    color: #333;\n    background-color: transparent;\n    \/* box-shadow: inset 0 0 0.5rem grey; *\/\n}\n#zip-button {\n    border: 1px solid grey;\n    border-radius: 1rem;\n    font-size: 0.9em;\n    background-color: transparent;\n    box-shadow: inset 0 0 0.5rem white;\n    color: #333;\n    margin-left: 0.5rem;\n}\n#zip-button:hover {\n    background-color: lightgrey;\n    \/* color: white; *\/\n}\n<\/style>\n<script>\nconst cities = {\n    \"Ocean City\": {\n        state: \"NJ\",\n        country: \"USA\",\n        \/\/ temp: 77,\n        \/\/ wind: 10,\n        \/\/ humidity: 50,\n        \/\/ precipChance: 25,\n        \/\/ weatherIcon: \"\ud83c\udf24\",\n        \/\/ forecast: [\n        \/\/     { day: \"Wed\", temp: 74, icon: \"\ud83c\udf26\" },\n        \/\/     { day: \"Thu\", temp: 72, icon: \"\ud83c\udf26\" },\n        \/\/     { day: \"Fri\", temp: 79, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Sat\", temp: 82, icon: \"\ud83c\udf24\" },\n        \/\/     { day: \"Sun\", temp: 100, icon: \"\ud83d\udd25\" },\n        \/\/ ],\n    },\n    Syracuse: {\n        state: \"NY\",\n        country: \"USA\",\n        \/\/ temp: 45,\n        \/\/ wind: 50,\n        \/\/ humidity: 88,\n        \/\/ precipChance: 110,\n        \/\/ weatherIcon: \"\ud83c\udf27\",\n        \/\/ forecast: [\n        \/\/     { day: \"Weds\", temp: 46, icon: \"\ud83c\udf27\" },\n        \/\/     { day: \"Thu\", temp: 51, icon: \"\ud83c\udf27\" },\n        \/\/     { day: \"Fri\", temp: 57, icon: \"\ud83c\udf27\" },\n        \/\/     { day: \"Sat\", temp: 55, icon: \"\ud83c\udf26\" },\n        \/\/     { day: \"Sun\", temp: 56, icon: \"\ud83c\udf27\" },\n        \/\/ ],\n    },\n    \"San Francisco\": {\n        state: \"CA\",\n        country: \"USA\",\n        \/\/ \"lat\": 37.7790262,\n        \/\/ \"lon\": -122.419906,\n        \/\/ \"country\": \"US\",\n        \/\/ \"state\": \"California\",\n        \/\/ temp: 65,\n        \/\/ wind: 5,\n        \/\/ humidity: 0,\n        \/\/ precipChance: 0,\n        \/\/ weatherIcon: \"\u2600\ufe0f\",\n        \/\/ forecast: [\n        \/\/     { day: \"Weds\", temp: 65, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Thu\", temp: 66, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Fri\", temp: 70, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Sat\", temp: 67, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Sun\", temp: 66, icon: \"\u2600\ufe0f\" },\n        \/\/ ],\n    },\n};\n\n\/\/ We'll use these in updateHTML\n\/\/ Source: https:\/\/openweathermap.org\/weather-conditions\n\n\/\/ .weather.main categories (umbrellas for .weather.description)\n\/\/  Thunderstorm, Drizzle, Rain, Snow, Atmosphere, Clear, Clouds\n\/\/ Subdivide Clouds.  Also, Atmosphere has different Mains for each weather type.\nconst icons = {\n    \/\/ description : icon\n    Clear: \"\u2600\ufe0f\",\n    \"few clouds\": \"\ud83c\udf24\",\n    \"scattered clouds\": \"\u2601\ufe0f\",\n    \"overcast clouds\": \"\u2601\ufe0f\",\n    \"broken clouds\": \"\u2601\",\n    Rain: \"\ud83c\udf27\",\n    Thunderstorm: \"\u26c8\",\n    Snow: \"\u2744\ufe0f\",\n    Mist: \"\ud83c\udf2b\",\n    Squall: \"\ud83d\udca8\",\n    Tornado: \"\ud83c\udf2a\",\n    Drizzle: \"\ud83c\udf27\",\n};\nconst getIcon = (weather) => {\n    let weatherType = weather.main;\n    if (\n        weatherType === \"Mist\" ||\n        weatherType === \"Smoke\" ||\n        weatherType === \"Haze\" ||\n        weatherType === \"Dust\" ||\n        weatherType === \"Fog\" ||\n        weatherType === \"Sand\" ||\n        weatherType === \"Ash\"\n    ) {\n        weatherType = \"Mist\";\n    } else if (weatherType === \"Clouds\") {\n        \/\/ get specific clouds type\n        weatherType = weather.description;\n    }\n    console.log(\"weatherType: \", weatherType);\n    return icons[weatherType];\n};\nconst weekdays = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst months = [\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"Decembar\",\n];\n\nconst zipButton = document.getElementById(\"zip-button\");\nzipButton.addEventListener(\"click\", (event) => {\n    const zip = document.getElementById(\"zip-input\").value;\n    if (zip && zip.length === 5) {\n        \/\/ check legit zip code\n        getWeatherByZipcode(zip);\n    }\n});\ndocument.addEventListener(\"keydown\", (event) => {\n    console.log(event.code);\n    if (event.code === \"Enter\" || event.code === \"NumpadEnter\") {\n        const zip = document.getElementById(\"zip-input\").value;\n        if (zip && zip.length === 5) {\n            \/\/ check legit zip code\n            getWeatherByZipcode(zip);\n        }\n    }\n});\n\nconst locSelector = document.getElementById(\"location\");\nlocSelector.addEventListener(\"change\", (event) => {\n    \/\/ Get cityData from object above\n    const cityName = locSelector.value;\n    const cityData = cities[locSelector.value];\n    \/\/ Get lat\/lon of that city\n    const responsePromise = fetch(\n        `https:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=${cityName},${cityData.state},${cityData.country}&limit=1&appid=587105ef534143cf16cb1c401766f57d`\n    );\n    responsePromise\n        .then((response) => {\n            return response.json();\n        })\n        .then((data) => {\n            const lat = data[0].lat;\n            const lon = data[0].lon;\n            getWeatherByLatLon(lat, lon);\n        });\n});\n\nconst getWeatherByZipcode = async (zip) => {\n    const response = await fetch(\n        `https:\/\/api.openweathermap.org\/data\/2.5\/weather?zip=${zip}&units=imperial&appid=587105ef534143cf16cb1c401766f57d`\n    );\n    const data = await response.json();\n    updateHTML(data);\n};\n\nconst getWeatherByLatLon = async (lat, lon) => {\n    console.log(\"getWeatherByLatLon()\");\n    \/\/ Get weather for that lat\/lon\n    const weatherRequest = await fetch(\n        `https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=${lat}&lon=${lon}&units=imperial&appid=587105ef534143cf16cb1c401766f57d`\n    );\n    const weatherInfo = await weatherRequest.json();\n    updateHTML(weatherInfo);\n};\n\nconst updateHTML = async (weatherInfo) => {\n    const dateInSecs = weatherInfo.dt;\n    const dateInMS = dateInSecs * 1000;\n    const date = new Date(dateInMS);\n    const todayInt = date.getDay();\n    const todayString = weekdays[todayInt];\n    const todayMonth = months[date.getMonth()];\n    const todayDay = date.getDate();\n    const todayYear = date.getFullYear();\n    const today = `${todayString}, ${todayMonth} ${todayDay}, ${todayYear}`;\n    const lat = weatherInfo.coord.lat;\n    const lon = weatherInfo.coord.lon;\n    \/\/ Display city name\n    document.getElementById(\"city-name\").innerHTML =\n        weatherInfo.name + \" - \" + today;\n    \/\/ Show that weather in the HTML page\n    document.getElementById(\"todaysTemp\").innerHTML = weatherInfo.main.temp;\n    document.getElementById(\n        \"todaysDetails\"\n    ).innerHTML = `${weatherInfo.weather[0].description}<br\/>\n    Humidity: ${weatherInfo.main.humidity}%<br\/>\n    Wind: ${weatherInfo.wind.speed}mph`;\n    \/\/ Precipitation: ${cityData.precipChance}%<br\/>\n    document.getElementById(\"weather-now\").innerHTML =\n        weatherInfo.weather[0].main;\n\n    document.getElementById(\"todaysWeatherIcon\").innerHTML = getIcon(\n        weatherInfo.weather[0]\n    );\n\n    \/\/ 5 Day Forecast\n    \/\/ api.openweathermap.org\/data\/2.5\/forecast?lat=43.0481221&lon=-76.1474244&cnt=1&units=imperial&appid=587105ef534143cf16cb1c401766f57d\n    const fiveDayResponse = await fetch(\n        `https:\/\/api.openweathermap.org\/data\/2.5\/forecast?lat=${lat}&lon=${lon}&cnt=5&units=imperial&appid=587105ef534143cf16cb1c401766f57d`\n    );\n    const fiveDayData = await fiveDayResponse.json();\n    const fiveDays = fiveDayData.list;\n    let forecastHTML = \"\";\n    let dayIndex = todayInt;\n    let count = 0;\n    for (let day of fiveDays) {\n        dayIndex++;\n        dayIndex = dayIndex % weekdays.length;\n        forecastHTML += `<div class=\"forecast-day col-2 text-center\">\n        <div class=\"day\">${weekdays[dayIndex]}<\/div>\n        <div class=\"description\">${day.weather[0].description}<\/div>\n        <div class=\"small-icon\">\n            ${getIcon(day.weather[0])}\n        <\/div>\n        ${day.main.temp}\u00b0\n    <\/div>`;\n    }\n    document.getElementById(\"forecast\").innerHTML = forecastHTML;\n};\n\n\/\/ Current Weather\n\/\/ https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=43.0481221&lon=-76.1474244&units=imperial&appid=587105ef534143cf16cb1c401766f57d\n\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q={city name},{state code},{country code}&limit={limit}&appid={API key}\n\n\/\/ Syracuse\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=Syracuse,NY,USA&limit=1&appid=587105ef534143cf16cb1c401766f57d\n\/\/ [{\"name\":\"Syracuse\",\"local_names\":{\"ru\":\"\u0421\u0438\u0440\u0430\u043a\u044c\u044e\u0441\",\"uk\":\"\u0421\u0456\u0440\u0430\u043a'\u044e\u0441\",\"en\":\"Syracuse\"},\"lat\":43.0481221,\"lon\":-76.1474244,\"country\":\"US\",\"state\":\"New York\"}]\n\n\/\/ Ocean City\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=Ocean-city,NJ,USA&limit=1&appid=587105ef534143cf16cb1c401766f57d\n\/\/ [{\"name\":\"Ocean City\",\"lat\":39.2776156,\"lon\":-74.5746001,\"country\":\"US\",\"state\":\"New Jersey\"}]\n\n\/\/ San Fran\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=Sanfrancisco,CA,USA&limit=1&appid=587105ef534143cf16cb1c401766f57d\n\/\/\n\n\/\/const startEvent = new Event(\"change\");\n\/\/locSelector.dispatchEvent(startEvent);\ntriggerEvent(locSelector,\"change\");\n\nfunction triggerEvent(el, type) {\n    \/\/ IE9+ and other modern browsers\n    if ('createEvent' in document) {\n        var e = document.createEvent('HTMLEvents');\n        e.initEvent(type, false, true);\n        el.dispatchEvent(e);\n    } else {\n        \/\/ IE8\n        var e = document.createEventObject();\n        e.eventType = type;\n        el.fireEvent('on' + e.eventType, e);\n    }\n}\n<\/script>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link\n            href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.1.3\/dist\/css\/bootstrap.min.css\"\n            rel=\"stylesheet\"\n            integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\"\n            crossorigin=\"anonymous\"\n        \/>\n&lt;div id=\"weather-container\" class=\"container\">\n            &lt;div class=\"my-row row\">\n                &lt;div\n                    id=\"todaysWeatherIcon\"\n                    class=\"my-col col-4 col-md-2 text-center align-self-center\"\n                >\n                    \u2601\ufe0f\n                &lt;\/div>\n                &lt;div\n                    class=\"my-col col-4 col-md-2 mb-3 mb-md-0 text-center text-md-start align-self-center\"\n                >\n                    &lt;span id=\"todaysTemp\">48&lt;\/span>\n                    &lt;div class=\"standard-font-size\">\n                        &lt;strong>\u00b0F&lt;\/strong> | \u00b0C\n                    &lt;\/div>\n                &lt;\/div>\n                &lt;div\n                    id=\"todaysDetails\"\n                    class=\"my-col col-4 col-md-3 mb-3 mb-sm-0 text-sm-center text-md-start smallFontSize align-self-center\"\n                >\n                    Precipitation: 88%&lt;br \/>\n                    Humidity: 86%&lt;br \/>\n                    Wind: 10mph\n                &lt;\/div>\n                &lt;div\n                    class=\"my-col col-0 col-md-5 text-md-end order-first order-md-last px-4 standard-font-size\"\n                >\n                    &lt;div>\n                        &lt;select name=\"\" id=\"location\">\n                            &lt;option value=\"Ocean City\">\n                                Ocean City, NJ 08226\n                            &lt;\/option>\n                            &lt;option value=\"Syracuse\">Syracuse, NY 13224&lt;\/option>\n                            &lt;option value=\"San Francisco\">\n                                San Francisco, CA 94109\n                            &lt;\/option>\n                        &lt;\/select>\n                    &lt;\/div>\n                    &lt;div id=\"today\">Today&lt;\/div>\n                    &lt;div id=\"weather-now\">Cloudy&lt;\/div>\n                &lt;\/div>\n            &lt;\/div>\n            &lt;hr \/>\n            &lt;div\n                id=\"forecast\"\n                class=\"my-row row align-items-stretch justify-content-around\"\n            >&lt;\/div>\n            &lt;hr \/>\n            &lt;div id=\"zip-form\" class=\"row d-flex align-items-center\">\n                &lt;div id=\"city-name\" class=\"col-12 col-sm-6\">&lt;\/div>\n                &lt;div class=\"col-12 col-sm-6\">\n                    &lt;label for=\"zip\">beta: Enter zipcode&lt;\/label>\n                    &lt;input\n                        type=\"text\"\n                        name=\"zip\"\n                        id=\"zip-input\"\n                        minlength=\"5\"\n                        maxlength=\"5\"\n                        size=\"5\"\n                    \/>\n                    &lt;button id=\"zip-button\">GET WEATHER BY ZIP&lt;\/button>\n                &lt;\/div>\n            &lt;\/div>\n        &lt;\/div>\n\n.right-align-text {\n    text-align: right;\n}\n.left-align-text {\n    text-align: left;\n}\n#sampleimage {\n    width: 100%;\n    margin-top: 0;\n}\n#today,#weather-now {\n    margin-right: 1rem;\n}\n#todaysWeatherIcon {\n    font-size: 76px;\n}\n#todaysTemp {\n    font-size: 36px;\n    font-weight: 700;\n}\n.standard-font-size {\n    font-size: 18px;\n}\n.smallFontSize {\n    font-size: 14px;\n}\n.small-icon {\n    font-size: 36px;\n}\n#weather-container {\n    padding: 16px;\n    margin-bottom: 10vh;\n    \/* border: 1px solid white; *\/\n    border-radius: 0.5rem;\n    background-color: rgba(255, 255, 255, 0.65);\n    box-shadow: inset 1rem 1rem 1rem -0.5rem white,\n        inset -1rem -1rem 1rem -1rem #add8e6, 0 0 5rem rgba(0, 101, 148, 0.5);\n    text-shadow: 0 0 1rem white;\n}\nselect {\n    background-color: transparent;\n    border: none;\n}\n#forecast {\n    position: relative;\n}\n.forecast-day {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n.forecast-day .day {\n    font-weight: bold;\n}\n.forecast-day .description {\n    font-size: 0.9em;\n    line-height: 1.1em;\n}\n#city-name {\n    color: #222;\n    font-weight: bold;\n    font-size: 1.2rem;\n    text-align: left;\n    letter-spacing: 0.05em;\n}\n#zip-form {\n    margin-top: 1rem;\n    \/* border-top: 0.25px solid silver; *\/\n    padding: 0 1rem 0.5rem;\n    font-size: 0.8rem;\n    text-align: right;\n    color: grey;\n}\n#zip-input {\n    border: 1px solid grey;\n    color: #333;\n    background-color: transparent;\n    \/* box-shadow: inset 0 0 0.5rem grey; *\/\n}\n#zip-button {\n    border: 1px solid grey;\n    border-radius: 1rem;\n    font-size: 0.9em;\n    background-color: transparent;\n    box-shadow: inset 0 0 0.5rem white;\n    color: #333;\n    margin-left: 0.5rem;\n}\n#zip-button:hover {\n    background-color: lightgrey;\n    \/* color: white; *\/\n}\n&lt;script>\nconst cities = {\n    \"Ocean City\": {\n        state: \"NJ\",\n        country: \"USA\",\n        \/\/ temp: 77,\n        \/\/ wind: 10,\n        \/\/ humidity: 50,\n        \/\/ precipChance: 25,\n        \/\/ weatherIcon: \"\ud83c\udf24\",\n        \/\/ forecast: &#91;\n        \/\/     { day: \"Wed\", temp: 74, icon: \"\ud83c\udf26\" },\n        \/\/     { day: \"Thu\", temp: 72, icon: \"\ud83c\udf26\" },\n        \/\/     { day: \"Fri\", temp: 79, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Sat\", temp: 82, icon: \"\ud83c\udf24\" },\n        \/\/     { day: \"Sun\", temp: 100, icon: \"\ud83d\udd25\" },\n        \/\/ ],\n    },\n    Syracuse: {\n        state: \"NY\",\n        country: \"USA\",\n        \/\/ temp: 45,\n        \/\/ wind: 50,\n        \/\/ humidity: 88,\n        \/\/ precipChance: 110,\n        \/\/ weatherIcon: \"\ud83c\udf27\",\n        \/\/ forecast: &#91;\n        \/\/     { day: \"Weds\", temp: 46, icon: \"\ud83c\udf27\" },\n        \/\/     { day: \"Thu\", temp: 51, icon: \"\ud83c\udf27\" },\n        \/\/     { day: \"Fri\", temp: 57, icon: \"\ud83c\udf27\" },\n        \/\/     { day: \"Sat\", temp: 55, icon: \"\ud83c\udf26\" },\n        \/\/     { day: \"Sun\", temp: 56, icon: \"\ud83c\udf27\" },\n        \/\/ ],\n    },\n    \"San Francisco\": {\n        state: \"CA\",\n        country: \"USA\",\n        \/\/ \"lat\": 37.7790262,\n        \/\/ \"lon\": -122.419906,\n        \/\/ \"country\": \"US\",\n        \/\/ \"state\": \"California\",\n        \/\/ temp: 65,\n        \/\/ wind: 5,\n        \/\/ humidity: 0,\n        \/\/ precipChance: 0,\n        \/\/ weatherIcon: \"\u2600\ufe0f\",\n        \/\/ forecast: &#91;\n        \/\/     { day: \"Weds\", temp: 65, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Thu\", temp: 66, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Fri\", temp: 70, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Sat\", temp: 67, icon: \"\u2600\ufe0f\" },\n        \/\/     { day: \"Sun\", temp: 66, icon: \"\u2600\ufe0f\" },\n        \/\/ ],\n    },\n};\n\n\/\/ We'll use these in updateHTML\n\/\/ Source: https:\/\/openweathermap.org\/weather-conditions\n\n\/\/ .weather.main categories (umbrellas for .weather.description)\n\/\/  Thunderstorm, Drizzle, Rain, Snow, Atmosphere, Clear, Clouds\n\/\/ Subdivide Clouds.  Also, Atmosphere has different Mains for each weather type.\nconst icons = {\n    \/\/ description : icon\n    Clear: \"\u2600\ufe0f\",\n    \"few clouds\": \"\ud83c\udf24\",\n    \"scattered clouds\": \"\u2601\ufe0f\",\n    \"overcast clouds\": \"\u2601\ufe0f\",\n    \"broken clouds\": \"\u2601\",\n    Rain: \"\ud83c\udf27\",\n    Thunderstorm: \"\u26c8\",\n    Snow: \"\u2744\ufe0f\",\n    Mist: \"\ud83c\udf2b\",\n    Squall: \"\ud83d\udca8\",\n    Tornado: \"\ud83c\udf2a\",\n    Drizzle: \"\ud83c\udf27\",\n};\nconst getIcon = (weather) => {\n    let weatherType = weather.main;\n    if (\n        weatherType === \"Mist\" ||\n        weatherType === \"Smoke\" ||\n        weatherType === \"Haze\" ||\n        weatherType === \"Dust\" ||\n        weatherType === \"Fog\" ||\n        weatherType === \"Sand\" ||\n        weatherType === \"Ash\"\n    ) {\n        weatherType = \"Mist\";\n    } else if (weatherType === \"Clouds\") {\n        \/\/ get specific clouds type\n        weatherType = weather.description;\n    }\n    console.log(\"weatherType: \", weatherType);\n    return icons&#91;weatherType];\n};\nconst weekdays = &#91;\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst months = &#91;\n    \"January\",\n    \"February\",\n    \"March\",\n    \"April\",\n    \"May\",\n    \"June\",\n    \"July\",\n    \"August\",\n    \"September\",\n    \"October\",\n    \"November\",\n    \"Decembar\",\n];\n\nconst zipButton = document.getElementById(\"zip-button\");\nzipButton.addEventListener(\"click\", (event) => {\n    const zip = document.getElementById(\"zip-input\").value;\n    if (zip &amp;&amp; zip.length === 5) {\n        \/\/ check legit zip code\n        getWeatherByZipcode(zip);\n    }\n});\ndocument.addEventListener(\"keydown\", (event) => {\n    console.log(event.code);\n    if (event.code === \"Enter\" || event.code === \"NumpadEnter\") {\n        const zip = document.getElementById(\"zip-input\").value;\n        if (zip &amp;&amp; zip.length === 5) {\n            \/\/ check legit zip code\n            getWeatherByZipcode(zip);\n        }\n    }\n});\n\nconst locSelector = document.getElementById(\"location\");\nlocSelector.addEventListener(\"change\", (event) => {\n    \/\/ Get cityData from object above\n    const cityName = locSelector.value;\n    const cityData = cities&#91;locSelector.value];\n    \/\/ Get lat\/lon of that city\n    const responsePromise = fetch(\n        `http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=${cityName},${cityData.state},${cityData.country}&amp;limit=1&amp;appid=587105ef534143cf16cb1c401766f57d`\n    );\n    responsePromise\n        .then((response) => {\n            return response.json();\n        })\n        .then((data) => {\n            const lat = data&#91;0].lat;\n            const lon = data&#91;0].lon;\n            getWeatherByLatLon(lat, lon);\n        });\n});\n\nconst getWeatherByZipcode = async (zip) => {\n    const response = await fetch(\n        `https:\/\/api.openweathermap.org\/data\/2.5\/weather?zip=${zip}&amp;units=imperial&amp;appid=587105ef534143cf16cb1c401766f57d`\n    );\n    const data = await response.json();\n    updateHTML(data);\n};\n\nconst getWeatherByLatLon = async (lat, lon) => {\n    console.log(\"getWeatherByLatLon()\");\n    \/\/ Get weather for that lat\/lon\n    const weatherRequest = await fetch(\n        `https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=${lat}&amp;lon=${lon}&amp;units=imperial&amp;appid=587105ef534143cf16cb1c401766f57d`\n    );\n    const weatherInfo = await weatherRequest.json();\n    updateHTML(weatherInfo);\n};\n\nconst updateHTML = async (weatherInfo) => {\n    const dateInSecs = weatherInfo.dt;\n    const dateInMS = dateInSecs * 1000;\n    const date = new Date(dateInMS);\n    const todayInt = date.getDay();\n    const todayString = weekdays&#91;todayInt];\n    const todayMonth = months&#91;date.getMonth()];\n    const todayDay = date.getDate();\n    const todayYear = date.getFullYear();\n    const today = `${todayString}, ${todayMonth} ${todayDay}, ${todayYear}`;\n    const lat = weatherInfo.coord.lat;\n    const lon = weatherInfo.coord.lon;\n    \/\/ Display city name\n    document.getElementById(\"city-name\").innerHTML =\n        weatherInfo.name + \" - \" + today;\n    \/\/ Show that weather in the HTML page\n    document.getElementById(\"todaysTemp\").innerHTML = weatherInfo.main.temp;\n    document.getElementById(\n        \"todaysDetails\"\n    ).innerHTML = `${weatherInfo.weather&#91;0].description}&lt;br\/>\n    Humidity: ${weatherInfo.main.humidity}%&lt;br\/>\n    Wind: ${weatherInfo.wind.speed}mph`;\n    \/\/ Precipitation: ${cityData.precipChance}%&lt;br\/>\n    document.getElementById(\"weather-now\").innerHTML =\n        weatherInfo.weather&#91;0].main;\n\n    document.getElementById(\"todaysWeatherIcon\").innerHTML = getIcon(\n        weatherInfo.weather&#91;0]\n    );\n\n    \/\/ 5 Day Forecast\n    \/\/ api.openweathermap.org\/data\/2.5\/forecast?lat=43.0481221&amp;lon=-76.1474244&amp;cnt=1&amp;units=imperial&amp;appid=587105ef534143cf16cb1c401766f57d\n    const fiveDayResponse = await fetch(\n        `https:\/\/api.openweathermap.org\/data\/2.5\/forecast?lat=${lat}&amp;lon=${lon}&amp;cnt=5&amp;units=imperial&amp;appid=587105ef534143cf16cb1c401766f57d`\n    );\n    const fiveDayData = await fiveDayResponse.json();\n    const fiveDays = fiveDayData.list;\n    let forecastHTML = \"\";\n    let dayIndex = todayInt;\n    let count = 0;\n    for (let day of fiveDays) {\n        dayIndex++;\n        dayIndex = dayIndex % weekdays.length;\n        forecastHTML += `&lt;div class=\"forecast-day col-2 text-center\">\n        &lt;div class=\"day\">${weekdays&#91;dayIndex]}&lt;\/div>\n        &lt;div class=\"description\">${day.weather&#91;0].description}&lt;\/div>\n        &lt;div class=\"small-icon\">\n            ${getIcon(day.weather&#91;0])}\n        &lt;\/div>\n        ${day.main.temp}\u00b0\n    &lt;\/div>`;\n    }\n    document.getElementById(\"forecast\").innerHTML = forecastHTML;\n};\n\n\/\/ Current Weather\n\/\/ https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=43.0481221&amp;lon=-76.1474244&amp;units=imperial&amp;appid=587105ef534143cf16cb1c401766f57d\n\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q={city name},{state code},{country code}&amp;limit={limit}&amp;appid={API key}\n\n\/\/ Syracuse\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=Syracuse,NY,USA&amp;limit=1&amp;appid=587105ef534143cf16cb1c401766f57d\n\/\/ &#91;{\"name\":\"Syracuse\",\"local_names\":{\"ru\":\"\u0421\u0438\u0440\u0430\u043a\u044c\u044e\u0441\",\"uk\":\"\u0421\u0456\u0440\u0430\u043a'\u044e\u0441\",\"en\":\"Syracuse\"},\"lat\":43.0481221,\"lon\":-76.1474244,\"country\":\"US\",\"state\":\"New York\"}]\n\n\/\/ Ocean City\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=Ocean-city,NJ,USA&amp;limit=1&amp;appid=587105ef534143cf16cb1c401766f57d\n\/\/ &#91;{\"name\":\"Ocean City\",\"lat\":39.2776156,\"lon\":-74.5746001,\"country\":\"US\",\"state\":\"New Jersey\"}]\n\n\/\/ San Fran\n\/\/ http:\/\/api.openweathermap.org\/geo\/1.0\/direct?q=Sanfrancisco,CA,USA&amp;limit=1&amp;appid=587105ef534143cf16cb1c401766f57d\n\/\/\n\nconst startEvent = new Event(\"change\");\nlocSelector.dispatchEvent(startEvent);\n&lt;\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>about:blank Weather Page \u2601\ufe0f 48 \u00b0F | \u00b0C Precipitation: 88% Humidity: 86% Wind: 10mph Ocean City, NJ 08226 Syracuse, NY 13224 San Francisco, CA 94109 Today Cloudy beta: Enter zipcode GET WEATHER BY ZIP<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-54","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":6,"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":62,"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/pages\/54\/revisions\/62"}],"wp:attachment":[{"href":"https:\/\/megadoug.com\/wp-customtheme\/wp-json\/wp\/v2\/media?parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}