-
Notifications
You must be signed in to change notification settings - Fork 577
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Funky Weather Forecast #401
Conversation
Sunrise and sunset feature
updated forecast and started with some styling
…ll images missing. now fixed
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Your design is amazing 🤩!!! I like how you style the background based on the weather and it looks very cool. Your code also looks neat and clean - love it! Just one small suggestion - I didn't see you round any numbers to 1 decimal place, maybe this is something you could look into and challenge yourself to find a solution?
|
||
//function to display all weather data for the upcoming days | ||
const displayForecast = (array) => { | ||
array.forEach((day) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would use arr instead of array as that's probably a reserved word.
const temp = Math.round(data.list[0].main.temp) | ||
|
||
//sunrise and sunset | ||
const rise = new Date(data.city.sunrise * 1000).toLocaleTimeString([], { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice function choice!
.then((data) => { | ||
updateHtml(data) | ||
}) | ||
.catch((error) => console.log('error fetching data', error)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice catch!
opacity: 1; | ||
} | ||
|
||
::-ms-input-placeholder { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like how you manage this selector to control the placeholder styling for IE browser.
//Eventlisteners | ||
searchButton.addEventListener('click', handleSearch) | ||
searchInput.addEventListener('keyup', function (event) { | ||
if (event.key == 'Enter') { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what if the user doesn't input anything? could this also be a condition checked by if else statement?
} | ||
|
||
//Function that styles the background and colors to fit weather | ||
const styleAfterWeather = (weather, temp) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great styling function!
} else { | ||
displayForecast(fourDaysFilter) | ||
} | ||
console.log(fourDaysFilter) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
would be better to remove those two console.log as these are mainly for development purposes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi Izabel, good job finishing your assignment!
Please pay attention to these basic requirements:
- The app should have: 4-day forecast You are displaying all 5 days when we requested 4
- the temperature should be rounded to 1 decimal
- the app should follow as close as possible the chosen design
Fix these things and you're good to go:) Keep up the awesome work 🚀
Netlify link
(https://funkyweatherforecast.netlify.app/)