feat: project complete

weather/src/components/weather.js

@@ -25,6 +25,7 @@ export default class WeatherComponent {
         const self = this;
         let data = {
             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,
@@ -83,14 +84,3 @@ export default class WeatherComponent {
         this.currentWeatherData = data;
     }
 }
-
-// const api = 'bd5d23eea5751c12b0ef75344e3df932';
-//
-// const weather = new WeatherComponent(api);
-// weather.getWeather(20716).then((data) => console.log(data));
-// weather.getWeather(22030).then((data) => {
-//     data.convertTemp('C');
-//     console.log(data);
-//     data.convertTemp('F');
-//     console.log(data);
-// });

weather/src/components/website.js

@@ -43,6 +43,7 @@ class MainWebsite {
             this.reportTemp,
             this.reportTime,
             this.reportTempDetails,
+            this.reportIcon,
         );
 
         this.weatherDiv.append(this.form, this.reportDiv);
@@ -72,6 +73,8 @@ class MainWebsite {
         this.reportMinTemp = document.createElement('span');
         this.reportMinTemp.classList.add('min');
 
+        this.reportIcon = document.createElement('img');
+        this.reportIcon.classList.add('icon-img');
         // this.reportConditions = document.createElement('span');
         // this.reportConditions.classList.add('conditions');
 
@@ -119,7 +122,7 @@ class MainWebsite {
         input.id = 'zipcode';
         input.name = 'zipcode';
         input.type = 'text';
-        input.placeholder = 'Zipcode';
+        input.placeholder = 'Search by zipcode';
         input.required = true;
         input.addEventListener('input', (input) =>
             this.formInputValidationChecker(input.target),
@@ -131,7 +134,7 @@ class MainWebsite {
         this.button = document.createElement('button');
         this.button.type = 'submit';
         this.button.classList.add('btn');
-        this.button.textContent = 'Submit';
+        this.button.textContent = 'Get report';
         this.button.addEventListener('click', (e) => this.handleSubmit(e));
 
         div.append(input, span);
@@ -144,13 +147,17 @@ class MainWebsite {
 
     handleSubmit(e) {
         e.preventDefault();
-        if (this.validZipcode) {
+        // one more sanity check before submit
-            const input = document.querySelector('#zipcode');
+        const span = document.querySelector('.zipcode-span');
-            // this.updateWeatherComponent({ temp: { current: 98 } });
+        const input = document.querySelector('#zipcode');
+
+        if (this.validZipcode && input.value !== '') {
             this.weatherComponent
                 .getWeather(input.value)
                 .then((report) => this.updateWeatherComponent(report));
             input.value = '';
+        } else {
+            span.textContent = 'Please enter a 5 digit zip code!';
         }
     }
 
@@ -216,6 +223,11 @@ class MainWebsite {
             weatherReportData.F.minTemp,
             'min',
         );
+
+        this.reportIcon.src = weatherReportData.icon;
+
+        // Set report div desplay to flex
+        this.reportDiv.classList.add('show-report');
     }
 }
 

weather/src/style.css

@@ -1,8 +1,18 @@
 :root {
     --dark-color: hsla(146, 14%, 10%, 0.897);
     --lgiht-color: hsla(160, 6%, 90%, 0.89);
+    --light-color: hsl(0 0% 90%);
     --interface-color: rgba(235, 236, 236, 0.726);
     --font-size: 18px;
+
+    --report-box-shadow: 0px 1px 1px hsl(0deg 0% 0% / 0.075),
+        0px 2px 2px hsl(0deg 0% 0% / 0.075), 0px 4px 4px hsl(0deg 0% 0% / 0.075),
+        0px 8px 8px hsl(0deg 0% 0% / 0.075),
+        0px 16px 16px hsl(0deg 0% 0% / 0.075),
+        0px 32px 32px hsl(0deg 0% 0% / 0.075);
+
+    --title-box-shadow: 0px 2px 2px hsl(0deg 0% 0% / 0.1),
+        0px 4px 4px hsl(0deg 0% 0% / 0.1), 0px 8px 8px hsl(0deg 0% 0% / 0.1);
 }
 
 html,
@@ -19,21 +29,26 @@ body {
     height: 100vh;
 }
 
+button {
+    border-radius: 0.2rem;
+}
+
 .title {
     font-size: 3rem;
     font-weight: 800;
     text-align: center;
     margin: 0;
     background-color: var(--dark-color);
-    color: var(--lgiht-color);
+    color: hsl(146, 30%, 90%);
     font-family: 'Indie Flower', cursive;
+    box-shadow: var(--title-box-shadow);
 }
 
 .form {
     display: flex;
     gap: 10px;
     padding: 20px;
-    margin: auto;
+    margin: 20px 0;
 }
 
 .form-input {
@@ -46,13 +61,22 @@ body {
 .form button {
     align-self: baseline;
     flex: 1;
-    height: 46px;
+    height: 42px;
 }
 
 .form-input input {
     padding: 10px;
     font-size: 1rem;
     margin-bottom: 5px;
+    color: var(--dark-color);
+    border: 1px;
+    box-shadow:
+        inset 0 2px 2px hsla(0, 0%, 0%, 0.2),
+        0 2px 0 hsla(0, 0%, 100%, 0.15);
+}
+
+.form-input input:focus {
+    outline: none;
 }
 
 .form-input span {
@@ -64,6 +88,19 @@ body {
     font-size: 0.8rem;
 }
 
+.btn {
+    font-size: 0.8rem;
+    padding: 10px;
+    background-color: hsl(61.8, 85%, 66.7%);
+    box-shadow:
+        inset 0 1px 0 var(--light-color),
+        0 1px 3px hsla(0, 0%, 0%, 0.2);
+}
+
+.btn:hover {
+    background-color: hsl(62.1, 85%, 78.6%);
+}
+
 .weather-container {
     display: flex;
     flex-direction: column;
@@ -71,11 +108,19 @@ body {
 }
 
 .report-container {
-    display: grid;
+    display: none;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     justify-items: center;
     align-items: center;
+    padding: 50px;
+    box-shadow: var(--report-box-shadow);
+    border-radius: 1rem;
+    background-color: var(--light-color);
+}
+
+.show-report {
+    display: grid;
 }
 
 .city {
@@ -89,17 +134,26 @@ body {
     font-weight: 900;
 }
 
+.icon-img {
+    grid-column: 2 / span 2;
+    grid-row: 2;
+}
+
 /* .conditions { */
 /*     grid-column: 3 / span 1; */
 /*     grid-row: 2 / span 1; */
 /* } */
 .conditions-desc {
-    grid-column: 3 / span 1;
+    grid-column: 2 / span 2;
     grid-row: 3 / span 1;
+    color: hsl(0 0% 30%);
+    align-self: start;
 }
 
 .temp-details-container {
     grid-row: 3 / span 1;
     display: flex;
     flex-direction: column;
+    gap: 7px;
+    color: hsl(0 0% 30%);
 }