Feedback about weather app

Code Feedback
1

Hi Campers,
Can you please look at my weather app. I would love to know if it determines your location accurately and anything I can do to make it better.

1 Like
2

Well, I’m not having much luck using it :frowning: Look in the JS console to see the errors.

The input text box should have a <label> (placeholder text is not a suitable replacement).

You do have a <header> but you should also probably have a <main> as well.

And only one <h1>.

The keyboard focus indicator on the button in the top right needs to be visible.

Also, you’ve got a link to openweathermap.org which is not visible on the page but is in the tab order when tabbing through the page. Ahh, I see, it is part of the content that pops up when you click on the button in the upper left. You need to hide it so it is not active when the button is not pressed. In fact, you need to hide all of the content in that pop-up when the button is not active. And then you need to make that button an accessible toggle button:

Manually increasing the text size does cause some issues with your header (“Weather App” breaks, your toggle content doesn’t look very good).

I know I’m throwing a lot at you here, especially concerning accessibility. I don’t mean to sound too critical. Just trying to make you aware of issues that you will face if you do this professionally. Always test your work in different view port widths ranging from extremely narrow to extremely wide and always test with very large text sizes.

1 Like
3

@bbsmooth. Thanks for the feedback. This project is still work in progress. I have worked on SEO, next is move to fixing a11y and performance. I already did a performance audit on lighthouse and the score is very low and much worse on mobile.

I want to know a couple of things if you don’t mind.

  1. If you say “I’m not having much luck using it”, what do you exactly mean? Do you have some weather information in the browser? Has the page failed to load completely? Because I have failed to trace the errors in the console to my code. I suspect it is react and the tons of dependencies it comes with that is giving me those headaches.
  2. The other main feedback I would love to get is whether the app retrieves your location fairly accurately. That has been my main worry and focus because my goal is to retrieve local weather information for the client as soon as he/she navigates to the web page and display it. The multiple API calls I have to make is causing performance issues on mobile devices. The other issues can be fixed fairly easily.
4

Sorry, I should have been clearer on the problems I was having. I am not able to use it at all. When I load the page I get the following error in the console:

Loading module from “https://cloudygem.netlify.app/src/index.js” was blocked because of a disallowed MIME type (“text/html”)

When I type my city, state in and click submit query I get following errors in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://json.geoiplookup.io/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

GEThttps://api.openweathermap.org/data/2.5/onecall?lat=null&lon=null&units=metric&exclude=current,minutely,hourly&appid=…
[HTTP/1.1 400 Bad Request 79ms]

1 Like
5

Hi @nibble. Looks good. But, it didn’t find my location correctly. I am living in Trivandrum and it detected my location as Mumbai (which is too much far!!!). Also, the input field is too small.

Anyway, good job. I like it.

1 Like
6

Thanks for the feedback. I will definitely work on the input field.

I might have to ditch the service I am using to retrieve the client information and use another one perhaps.

1 Like
7

Hi. I think the reason it detected Mumbai is because my internet provider’s head office is there (Reliance). So, I think you are using the IP address or something for this.

1 Like
8

Yep. I am using the client’s IP address to retrieve the weather data. I think it is best if I used geolocation API and by default I think a client has to first provide permission to be able to access their location. To be honest asking a client to provide permission for an app to access his/her location is a turn off for most people, me inclusive.

1 Like
9

Ok.

That’s true. I am also lazy to provide access to my location. But, using geolocation will give better results.

1 Like
10

It doesn’t work, has errors related to cors and input field.

1 Like