From 6909f4788db103cd86effde29d555ec65fb66397 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Mon, 22 Jan 2024 20:58:21 -0500 Subject: [PATCH] feat: project complete --- weather/src/components/weather.js | 12 +----- weather/src/components/website.js | 22 ++++++++--- weather/src/style.css | 64 ++++++++++++++++++++++++++++--- 3 files changed, 77 insertions(+), 21 deletions(-) diff --git a/weather/src/components/weather.js b/weather/src/components/weather.js index 81dc560..b7cc125 100644 --- a/weather/src/components/weather.js +++ b/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); -// }); diff --git a/weather/src/components/website.js b/weather/src/components/website.js index 99b359c..cd9b439 100644 --- a/weather/src/components/website.js +++ b/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) { - const input = document.querySelector('#zipcode'); - // this.updateWeatherComponent({ temp: { current: 98 } }); + // one more sanity check before submit + const span = document.querySelector('.zipcode-span'); + 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'); } } diff --git a/weather/src/style.css b/weather/src/style.css index ca0a2d3..5219464 100644 --- a/weather/src/style.css +++ b/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%); }