newsletter-sign-up-with-success-message With react.js
Design comparison
Solution retrospective
First of all I had been struggle about how display the page thanks after submitting of form and secondly how to change the image src betwen the mobile screen and the desktop .
I am not sure of the App.jsx because I think there are others , much simpler paths.
I'd like the community to give me feedback on my code because that's the only place I can get it
Community feedback
- @luismadfPosted 11 months ago
Hi,
I recently completed this challenge too :)
I can help with some of the stuff you are asking about, but keep in mind there are many ways of doing things with code.
1. How to display the "Thanks" page:
Here the first thing I can recommend, is a little detail but it could be useful for people that are reading your code is to use a descriptive variable name instead of showPage, it could be something like isEmailConfirmed.
Besides this there are many ways of doing this, in my case I used React Router because in my mind I made sense to have different pages for this with differents URL's, but your case may be different. So I don't think you did a bad approach.
2. How to change the image src:
In my case I was using tailwind CSS which includes some utilities classes that make this really easy, using CSS media-queries instead of JS code will help your app performance, save you some lines of codes and complexity in your app.
This can be different depending on your CSS skills and the way you and your team are structuring the code of the app .I saw your code and you are using media-queries around your app already so I think it makes sense to use it for this case too.
Maybe you can try using two images tags instead of one?
This is the link to my code if you want to take a look.
3. The App.jsx file:
First, I'll recommend to use a code formatter tool such as Prettier so it will make your code more readable.
Second, It seems that you are creating the screen for the first page but then using a component for the "Thanks" page, my recommendation is to avoid "creating screens" in the App.js unless is a really small app, a common practice in the development community is to create a 'page' folder and place your pages there.
I hope this feedback can be helpful for you.
Greetings!
Marked as helpful0@Moulaye-dagnonPosted 11 months ago@luismadf Hi! I thank you very much for your feedback and I will take all your comments into account and this feedback will be very very helpful for me .
HAPPY NEW YEAR AND I WISH YOU ALL THE BEST
1
Please log in to post a comment
Log in with GitHubJoin 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