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

newsletter-sign-up-with-success-message With react.js

P

@Moulaye-dagnon

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

@luismadf

Posted

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 helpful

0

P

@Moulaye-dagnon

Posted

@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 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