(()=>{"use strict";var e={426:(e,t,n)=>{n.d(t,{Z:()=>s});var r=n(81),o=n.n(r),i=n(645),a=n.n(i)()(o());a.push([e.id,":root {\n    --dark-color: hsla(146, 14%, 10%, 0.897);\n    --lgiht-color: hsla(160, 6%, 90%, 0.89);\n    --light-color: hsl(0 0% 90%);\n    --interface-color: rgba(235, 236, 236, 0.726);\n    --font-size: 18px;\n\n    --report-box-shadow: 0px 1px 1px hsl(0deg 0% 0% / 0.075),\n        0px 2px 2px hsl(0deg 0% 0% / 0.075), 0px 4px 4px hsl(0deg 0% 0% / 0.075),\n        0px 8px 8px hsl(0deg 0% 0% / 0.075),\n        0px 16px 16px hsl(0deg 0% 0% / 0.075),\n        0px 32px 32px hsl(0deg 0% 0% / 0.075);\n\n    --title-box-shadow: 0px 2px 2px hsl(0deg 0% 0% / 0.1),\n        0px 4px 4px hsl(0deg 0% 0% / 0.1), 0px 8px 8px hsl(0deg 0% 0% / 0.1);\n}\n\nhtml,\nbody {\n    padding: 0;\n    margin: 0;\n    font-size: var(--font-size);\n    font-family: 'Inter', sans-serif;\n    font-optical-sizing: auto;\n    font-weight: 400;\n    font-style: normal;\n    font-variation-settings: 'slnt' 0;\n    background-color: var(--interface-color);\n    height: 100vh;\n}\n\nbutton {\n    border-radius: 0.2rem;\n}\n\n.title {\n    font-size: 3rem;\n    font-weight: 800;\n    text-align: center;\n    margin: 0;\n    background-color: var(--dark-color);\n    color: hsl(146, 30%, 90%);\n    font-family: 'Indie Flower', cursive;\n    box-shadow: var(--title-box-shadow);\n}\n\n.form {\n    display: flex;\n    gap: 10px;\n    padding: 20px;\n    margin: 20px 0;\n}\n\n.form-input {\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    align-items: center;\n}\n\n.form button {\n    align-self: baseline;\n    flex: 1;\n    height: 42px;\n}\n\n.form-input input {\n    padding: 10px;\n    font-size: 1rem;\n    margin-bottom: 5px;\n    color: var(--dark-color);\n    border: 1px;\n    box-shadow:\n        inset 0 2px 2px hsla(0, 0%, 0%, 0.2),\n        0 2px 0 hsla(0, 0%, 100%, 0.15);\n}\n\n.form-input input:focus {\n    outline: none;\n}\n\n.form-input span {\n    color: hsla(0, 79%, 54%, 0.829);\n    margin-left: 5px;\n}\n\n.form-input span {\n    font-size: 0.8rem;\n}\n\n.btn {\n    font-size: 0.8rem;\n    padding: 10px;\n    background-color: hsl(61.8, 85%, 66.7%);\n    box-shadow:\n        inset 0 1px 0 var(--light-color),\n        0 1px 3px hsla(0, 0%, 0%, 0.2);\n}\n\n.btn:hover {\n    background-color: hsl(62.1, 85%, 78.6%);\n}\n\n.weather-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.report-container {\n    display: none;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 20px;\n    justify-items: center;\n    align-items: center;\n    padding: 50px;\n    box-shadow: var(--report-box-shadow);\n    border-radius: 1rem;\n    background-color: var(--light-color);\n}\n\n.show-report {\n    display: grid;\n}\n\n.city {\n    grid-column: 1 / span 3;\n}\n\n.temp {\n    grid-column: 1 / span 1;\n    grid-row: 2 / span 1;\n    font-size: 4rem;\n    font-weight: 900;\n}\n\n.icon-img {\n    grid-column: 2 / span 2;\n    grid-row: 2;\n}\n\n/* .conditions { */\n/*     grid-column: 3 / span 1; */\n/*     grid-row: 2 / span 1; */\n/* } */\n.conditions-desc {\n    grid-column: 2 / span 2;\n    grid-row: 3 / span 1;\n    color: hsl(0 0% 30%);\n    align-self: start;\n}\n\n.temp-details-container {\n    grid-row: 3 / span 1;\n    display: flex;\n    flex-direction: column;\n    gap: 7px;\n    color: hsl(0 0% 30%);\n}\n",""]);const s=a},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var s=0;s<this.length;s++){var p=this[s][0];null!=p&&(a[p]=!0)}for(var c=0;c<e.length;c++){var d=[].concat(e[c]);r&&a[d[0]]||(void 0!==i&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=i),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),t.push(d))}},t}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var i={},a=[],s=0;s<e.length;s++){var p=e[s],c=r.base?p[0]+r.base:p[0],d=i[c]||0,l="".concat(c," ").concat(d);i[c]=d+1;var h=n(l),u={css:p[1],media:p[2],sourceMap:p[3],supports:p[4],layer:p[5]};if(-1!==h)t[h].references++,t[h].updater(u);else{var m=o(u,r);r.byIndex=s,t.splice(s,0,{identifier:l,updater:m,references:1})}a.push(l)}return a}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var s=n(i[a]);t[s].references--}for(var p=r(e,o),c=0;c<i.length;c++){var d=n(i[c]);0===t[d].references&&(t[d].updater(),t.splice(d,1))}i=p}}},569:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var i=n.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={id:r,exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.nc=void 0,(()=>{class e{constructor(e){this.apiKey=e}currentWeatherData=void 0;async getWeatherReport(e){const t=`https://api.openweathermap.org/data/2.5/weather?zip=${e}&appid=${this.apiKey}`;let n=await fetch(t);if(200!==n.status)return;let r=await n.json();r&&(this.setCurrentWeather(r),this.parseWeatherData())}parseWeatherData(){const e=this;let t={time:this.currentWeatherData.dt,icon:`https://openweathermap.org/img/wn/${this.currentWeatherData.weather[0].icon}@2x.png`,weather:{main:this.currentWeatherData.weather[0].main,description:this.currentWeatherData.weather[0].description},temp:{current:this.currentWeatherData.main.temp,feelsLike:this.currentWeatherData.main.feels_like,minTemp:this.currentWeatherData.main.temp_min,maxTemp:this.currentWeatherData.main.temp_max},wind:this.currentWeatherData.wind,sunrise:this.currentWeatherData.sys.sunrise,sunset:this.currentWeatherData.sys.sunset,city:this.currentWeatherData.name,convertTemp(t){this[t]={};const n="F"===t?e.convertToFarenheit:e.convertToCelsius;Object.keys(this.temp).forEach((e=>{this[t][e]=n(this.temp[e])}))}};t&&(this.parsedWeatherData=t)}async getWeather(e){try{return await this.getWeatherReport(e),this.parsedWeatherData||{error:"Sorry, unable to fetch current weather at this time. :("}}catch(e){return console.log(e.message),{error:"issue occured while fetching weather data!"}}}convertToCelsius(e){return Math.round(e-273.15)}convertToFarenheit(e){return Math.round(1.8*(e-273.15)+32)}setCurrentWeather(e){this.currentWeatherData=e}}var t=n(379),r=n.n(t),o=n(795),i=n.n(o),a=n(569),s=n.n(a),p=n(565),c=n.n(p),d=n(216),l=n.n(d),h=n(589),u=n.n(h),m=n(426),f={};f.styleTagTransform=u(),f.setAttributes=c(),f.insert=s().bind(null,"head"),f.domAPI=i(),f.insertStyleElement=l(),r()(m.Z,f),m.Z&&m.Z.locals&&m.Z.locals;const x=new class{constructor(t){this.weatherComponent=new e(t),this.container=document.createElement("div"),this.form=document.createElement("form")}websiteStructure(){this.container.classList.add("container"),this.formStructure(),this.weatherComponentStructure();const e=document.createElement("h1");return e.classList.add("title"),e.textContent="How is it outside?",this.container.append(e,this.weatherDiv),this.container}weatherComponentStructure(){this.weatherDiv=document.createElement("div"),this.weatherDiv.classList.add("weather-container"),this.reportDiv=document.createElement("div"),this.reportStructure(),this.reportTempDetails.append(this.reportTempFeelsLike,this.reportMinTemp,this.reportMaxTemp),this.reportDiv.append(this.reportCity,this.reportConditionDescription,this.reportTemp,this.reportTime,this.reportTempDetails,this.reportIcon),this.weatherDiv.append(this.form,this.reportDiv)}reportStructure(){this.reportDiv.classList.add("report-container"),this.reportCity=document.createElement("h2"),this.reportCity.classList.add("city"),this.reportTemp=document.createElement("span"),this.reportTemp.classList.add("temp"),this.reportTime=document.createElement("span"),this.reportTime.classList.add("time"),this.reportTempDetails=document.createElement("div"),this.reportTempDetails.classList.add("temp-details-container"),this.reportTempFeelsLike=document.createElement("span"),this.reportTempFeelsLike.classList.add("feels-like"),this.reportMaxTemp=document.createElement("span"),this.reportMaxTemp.classList.add("max"),this.reportMinTemp=document.createElement("span"),this.reportMinTemp.classList.add("min"),this.reportIcon=document.createElement("img"),this.reportIcon.classList.add("icon-img"),this.reportConditionDescription=document.createElement("span"),this.reportConditionDescription.classList.add("conditions-desc")}updateReportComponents(){const e=[this.reportTime,this.reportCity,this.reportTemp,this.reportMaxTemp,this.reportMinTemp,this.reportConditionDescription];return{clearValues:function(){e.forEach((e=>{e.textContent=""}))},updateReportTemperatureText:function(e,t,n){e.textContent=`${n}: ${t}°`},updateReportText:function(e,t){e.textContent=`${t}`}}}formStructure(){const e=document.createElement("div");e.classList.add("form-input"),this.form.classList.add("form"),this.form.method="post",this.form.action="#";const t=document.createElement("input");t.id="zipcode",t.name="zipcode",t.type="text",t.placeholder="Search by zipcode",t.required=!0,t.addEventListener("input",(e=>this.formInputValidationChecker(e.target)));const n=document.createElement("span");n.classList.add("zipcode-span"),this.button=document.createElement("button"),this.button.type="submit",this.button.classList.add("btn"),this.button.textContent="Get report",this.button.addEventListener("click",(e=>this.handleSubmit(e))),e.append(t,n),this.form.append(e,this.button)}formInputValidationChecker(e){this.ensureValidZipCode(e)}handleSubmit(e){e.preventDefault();const t=document.querySelector(".zipcode-span"),n=document.querySelector("#zipcode");this.validZipcode&&""!==n.value?(this.weatherComponent.getWeather(n.value).then((e=>this.updateWeatherComponent(e))),n.value=""):t.textContent="Please enter a 5 digit zip code!"}ensureValidZipCode(e){const t="Please enter a 5 digit zip code!";e.minLength=5,e.maxLength=5,e.pattern="\\d{5}",e.validity.tooShort||e.validity.patternMismatch||e.validity.tooLong?(e.setCustomValidity(t),e.nextSibling.textContent=t,this.validZipcode=!1):(e.setCustomValidity(""),e.nextSibling.textContent="",this.validZipcode=!0)}updateWeatherComponent(e){const t=this.updateReportComponents();t.clearValues(),e.convertTemp("C"),e.convertTemp("F"),t.updateReportText(this.reportCity,e.city),t.updateReportText(this.reportTemp,e.F.current),t.updateReportText(this.reportConditionDescription,e.weather.description),t.updateReportTemperatureText(this.reportTempFeelsLike,e.F.feelsLike,"Feels like"),t.updateReportTemperatureText(this.reportMaxTemp,e.F.maxTemp,"max"),t.updateReportTemperatureText(this.reportMinTemp,e.F.minTemp,"min"),this.reportIcon.src=e.icon,this.reportDiv.classList.add("show-report")}}("bd5d23eea5751c12b0ef75344e3df932");!function(){let e=document.createElement("link");e.rel="preconnect",e.href="https://fonts.googleapis.com";let t=document.createElement("link");t.rel="preconnect",t.href="https://fonts.gstatic.com",t.crossOrigin=!0;let n=document.createElement("link");n.rel="stylesheet",n.href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Inter:wght@100..900&display=swap",document.head.appendChild(e),document.head.appendChild(t),document.head.appendChild(n)}(),document.body.appendChild(x.websiteStructure())})()})();