Just finished the weather app, check this out!

Code Feedback
1

Hello Everyone, please help to review my project and leave me some comment, so that I can improve!

Here is my project link:

https://fredfw.github.io/weatherStation/

1 Like
2

I like the backdrop. Does it change based on the weather? I like how you can change cities and that there is a default manual selection if geolocation fails.

A few things I noticed:

  1. A link to your code would be useful.
  2. Your text is very small in comparison with the rest of the screen. Could you bump it up?
  3. Your font is the same throughout and most users want to home in on the weather symbol and the temperature. There is a lot of other text present that tends to make a user have to hunt for that information. Perhaps make these features stand out more?
  4. The link to change from C to F is top left and easily missed as the eye is drawn to the information in the middle of the screen. Perhaps put the links in-line with the information?
  5. The text does not appear to be bordered so if it was on a very light background, it might not be readable.
  6. On my screen, I have to scroll down to see the extended forecast. I did not even notice it at first, which is a shame as it clearly has a lot of work put into it. There is a lot of empty real estate (only filled with the background image). Could you not put the extended forecast on the main screen without the need to scroll down?
  7. The task was to write the code in codepen.io whereas your code is in github.

Hope this helps.
Regards
Mark

3

Hi Moriartynz,

Thanks for the comment. I hv made some adjustment and hopefully these can provide some improvement. If you hv time, would you please review again and see if it looks better now?

Below are the remarks:

  1. The backdrop change every time, I am using the Unsplash API and I really love those free images.

  2. The words are enlarged and the weather information be more standing out now.

  3. No more top row and I hv put the links inline with content.

  4. The text still don’t bordered. Originally there is the overlay between backdrop and content, color in black, opacity 0.2. I hv adjusted the opacity to 0.3 to ensure the text can be read on the very light backgrounds.

  5. The extended forecast is still in same position. I tried to put it at the bottom of window, but I think it do not look well on both desktop and mobile. Instead I added a small flashing “Scroll Down” tag to the screen to remind user the webpage can be scroll down.

  6. You may find the code of this project on Github.

Once again, big thanks!
Best regards,
Fred

4

Hey Fred,

The app looks a prettier and more functional now.

For me, the overlay makes the whole thing dark and while it enhances the text, the image does not pop. Just a personal preference.

You have two different link styles - one for changing the city and the other for the changing of the temperature units. This could confuse a user.

Also, I think “Click here” is redundant in modern coding. Most users will tap or click to see what can be changed if it is clear that there is a link so if you could clearly identify the city name as a link then you could eliminate some text.

Your interface is still very verbose. I would try to go more minimal on your interface and only show the most important information.Perhaps not putting in so much information into the page would be useful and rather offer self-evident links for more information. The basic information required is only location and current weather. Last updated information is probably not that interesting to users. Also “Currently at:” is self-evident and can be eliminated.

The scroll down tag is not working for me (Chrome browser in Windows).

Hope this helps.

Regards
Mark

5

Hi Mark,

You are my super advisor!

Originally the scroll down tag is just a flashing animation without any link / function, and I didn’t aware that the user would expect something will happen after clicking on it, thanks for reminding this. I hv added the link on it.

In this weekend I have adjusted the layout of weather information, hopefully it would look better now. I agree with you I should try to go more minimal, however it’s really hard to decide if any information should be removed. I would like to keep all current information as these information is the minimum information I expect a weather app would tell me. I prefer to keep the words “Observe At” to remind user this is the weather station location instead of current user location. What do you think?

Big Thanks!

Best Regards,
Fred