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 typescript react

Kvisus 60

@Kvisus

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

Community feedback

Damjan 220

@iDamjan

Posted

Hi,

Good job finishing this challenge!

In case you are keen to feedback i will provide some comments.

  • You should never state checking the window size, only to change an image. You should do this in CSS using media queries, it would be a lot simpler and easier for you.
  • Try to make the <App> component as clean as possible and to only contain other components and not a custom logic, here you can extract all the logic and JSX for the Input to be a separate component.
  • Form/input validations its really common thing, although you achieved to validate the input i would suggest couple of things. You should validate on every keystroke and update the value (like you are currently doing) and show the validation classes onBlur, or when the user clicks somewhere else outside of the input, AFTER he started typing. This is really good and common approach. (fun thing to investigate is the validity object, which is native object from HTML5 that can help you with validation really easy :)) )
  • I know this is just a practice challenge but just try to clean out all the comments which you have left, its a good practice to have :D
  • To make your life easier with naming stuff, especially CSS classes as that is the hardest thing in programing, try looking into the BEM standard of naming, it solves this problem for you

I hope this comments helps you and not just make you nervous :p Regards, Damjan.

Marked as helpful

1

Kvisus 60

@Kvisus

Posted

@iDamjan tnx, i'll try not to panic and pay attention to your feedback. :D

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