How can I make it better?

Hi! Thanks for reading! I have made a react weather app.

This is my first complete project in react, and i tried to refactor every single line of code.

Could you please tell me what do you think about the project? Am I on a good way? Should I improve something?

Please, don’t be afraid to destroy my self-steem, i really wanna get better at writing code and also at web design, to make my work hireable.

This is my GitHub repo: GitHub - claragenovese/Weather-App

Have a nice week guys!

Hey, this looks very nice and seems to work well. Great job! I am going to give you some accessibility pointers since that’s my main area of expertise.

  • Most of your headings are not headings. For example, all of the headings that just have a temperature in them are not headings, they are the actual content. Headings introduce the content that follows. They are very important for people who can’t see your page but rather listen to it. So you’ll want to organize your heading structure based on the content, not how it looks on the page. Your <h1> is fine. But then you’ll need to decide how the content is organized and add headings based on that. For example, there might be a heading for “Current temperature”. Then under that heading you would have a <p> element with the current temperature. You could also have subheadings underneath this heading for the various other stats (humidity, visibility, etc…) The daily temperatures should probably be under a heading and then each of the days could be a subheading and then the actual temperature for the day would be in a <p>. I’m just giving you are a rough idea here, this isn’t meant to tell you exactly what to do, other than you need to create a better heading structure. Also, you can visually hide headings on the page but still have them there for screen reader users.

  • Any content that is presented in non-text form (such as icons/pics) should have alternative text so people who are listening to your page can hear the content. In the main temp box you have both an icon and text describing the icon, so you are good there. But in the daily temps you only have the icon, so you’ll need to add the text for the icon. Since you are using an <img> tag for these icons the easiest way to do this would be through the image’s alt attribute. For example, if the icon is a sun then the alt text needs to say “sunny”.

  • The canvas graph is cool but it too needs a text alternative. The easiest way would be to create a table out of the data and include it on the page. You could hide the table visually and then provide a button to display it for people who needed it. Also, this graph needs its own heading as well.

  • The color contrast in your search input is too low and so the text you are typing is too hard to see. Use black instead of white or make the background a lot darker.

I know some of the above adds a lot of work to what you’ve already done. I don’t expect you implement any of it if you don’t want to. I just wanted to let you know that accessibility is a big issue nowadays (companies are being sued over their inaccessible sites) and so if this were being created for a paying customer or employer then you would definitely have to address these issues.