mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2024-12-25 22:10:43 -05:00
feat: project complete
This commit is contained in:
parent
a1973d1d55
commit
6909f4788d
3 changed files with 77 additions and 21 deletions
|
|
@ -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);
|
||||
// });
|
||||
|
|
|
|||
|
|
@ -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 span = document.querySelector('.zipcode-span');
|
||||
const input = document.querySelector('#zipcode');
|
||||
// this.updateWeatherComponent({ temp: { current: 98 } });
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue