Noob's React projects

Hello good people of FCC,
I’ve started playing with React recently and would love some feedback from you.

Thank you :slight_smile:

1 Like

Both projects look great.

For the Arrrays:

When I first saw it I thought I had to write code but it’s a neat way to just show some array method examples.

It might be nice if the code examples had some syntax highlighting. I would suggest stacking the page sooner (move the breakpoint up for the flex wrap) and maybe make sure the barrel images at the bottom do not sit on top of the buttons when the page is stacked.

Speaking of buttons, divs are not buttons and there are issues with using them as such (accessibility/semantics).

Didn’t look much at the source but I’m guessing there might be a way to simplify some of the components, like the Ship component. I don’t really have a great suggestion, but maybe you can use the props and how assets are named, etc. to make it more generic and not have so many conditional branches.

For the Chameleon:

It has some fairly impossible colors to guess, for example, this green color.

rgb(85, 197, 91)

Knowing how much red vs blue the color is using is almost a crapshoot. I think most people can barely tell the difference between the two colors. Maybe look at the random numbers used for generating the colors and check if the difference between the numbers is above some value and re-roll the numbers if not.

It would be nice if the player was able to switch between color modes after being given the color to guess without it resetting.

Again, I didn’t really look much at the source so I don’t really have any comments. But there are a few methods on the Container component that might be better suited as utility functions you just bring in, instead of them being methods on the component.

All in all, I think the projects look really good, great job!

1 Like

Thank you for your time and feedback,
Points taken and issues will be fixed soon. I’m glad you liked them and appreciate your help , have a great day mate :slight_smile:

I can tell you put a lot of work into these and they do look nice and are quite impressive.

Unfortunately, these are completely inaccessible by keyboard. You should be using buttons and anchors where appropriate, or if you absolutely do not want to do that then you have to make sure that you add all necessary functionality to the <div>s you are using so that they provide all of the functionality needed to be accessible. And that is a lot more work than you might think.

Sorry, I don’t mean to sound too critical here, I really do like what you have done. But one of the first things I always test is keyboard accessibility and thus this jumped out at me right away.

1 Like

Thank you for taking the time, mate. Will look in those issues. Have a great day.