Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice slip generator with react.js ,axios, advice slip API

#bootstrap#node#react#sass/scss#typescript

@yusufweb

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my second project using reactjs, though simple but i learned alot while doing it. Your feedback is highly welcome.

Community feedback

CyrusKabir 1,885

@CyrusKabir

Posted

hello my dear friend ♥ besides of good points @MikeBish13 said I just want mention that your component it's not interactive with keyboard (tab key). I mean it is but we can't understand because there is no outline (because your component button have 0 outline) or something that tells the button is focused so it's equal to non interactive with keyboard

0

@yusufweb

Posted

@CyrusKabir thank you for your response, I would look into that.

0

@MikeBish13

Posted

Great job! The app functions pretty smoothly so well done.

A couple of things I noticed in terms of the design:

1). Some of the sizings seem to be a little off, specifically the size of the central box and the text of the quotes compared to the design. See if you can line these up more accurately.

2). The green button doesn't appear to be centred in the middle of the advice box. There is a million and one ways of doing this, so have a play around and see if you can come up with something.

0

@yusufweb

Posted

@MikeBish13 thank you so much for your feedback, I will look into the project again to solve the problems you highlighted

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord