Practice-30-Form

Community feedback

• 

  Mateusz•40

  @MateuszSobiechPosted 2 months ago

  Hi, good work. Consider to change state from booleans to number or string. I think it might simplify the code.

    const [stepOne, setStepOne] = useState(true);
    const [stepTwo, setStepTwo] = useState(false);
    const [stepThree, setStepThree] = useState(false);
    const [stepFour, setStepFour] = useState(false);
  

  type StepState = 1 | 2 | 3 | 4;
  
  const [step, setStep] = useState<StepState>(1);
  
  switch(step) { ... }
  

  Marked as helpful

  1

  ---

  

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  @MateuszSobiech thanks, that's a good idea :)

  1
• 

  Emmanuel Ranone•20

  @emmanuelranonePosted 2 months ago

  Hi, the design is very well done. The only thing that feels a bit off is that when the validation message 'StepOne_errorText__ABYh5' appears, it changes the spacing between the components. I would suggest finding a way to maintain consistent spacing at all times.

  Regards !!

  Marked as helpful

  0

  ---

  

  Emmanuel Ranone•20

  @emmanuelranonePosted 2 months ago

  @SvitlanaSuslenkova f.e. in 1920 x 1080... Only seen when "Phone number must contain + and 10 numbers" validation is enabled. But it is a detail, the rest is very nice.

  0

  

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  @emmanuelranone thanks, it's solved. I cut it :D

  0
• 

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted 2 months ago

  Hey! This is a beautiful solution... I'm thinking of doing it as my next challenge. The only problem I faced was with your phone number verification. It only accepts a + followed by 10 digits but my country code has two extra digits, making it 12. I think you could just increase the range of accepted number of digits to be from 10 - 12 digits.

  Happy coding!

  1

  ---

  

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 2 months ago

  @tesla-ambassador thanks, I just made it as in the design, noone is going to put real number anyway :). Can I ask you a qestion. Have you already got a job as a frontend dev?

  0

  

  Tesla_Ambassador•3,000

  @tesla-ambassadorPosted 2 months ago

  @SvitlanaSuslenkova I put my real number 😭. I haven't yet gotten a job cause I took time off to concentrate on finishing my bachelors... but I'm back at it and hopefully I'll get one soon!

  0
• 

  Dylan Heslop•1,130

  @dylan-dot-cPosted 20 days ago

  Well done! You did great on this challenge and it all looks good. I'm not much of a pro so I can't give much valuable feedback. only thing I did realize was that for the addons step, each addon can be focused twice(once for the button and second for the input:checkbox) maybe you could make the label the entire wrapper instead of the button, but im not too sure. Overall you did good and you could also remove code comments to make ur code look cleaner.

  I also did this challenge with React along with tailwindCSS, Framemotion and Zustand for state management, would love if you could check it out and give me some feedback(it's not perfect)

  0

  ---

  

  Svitlana Suslenkova•5,320

  @SvitlanaSuslenkovaPosted 19 days ago

  @dylan-dot-c about the addons - don't see any problem. Easy to click, no need to search for checkbox. For your case - yes it works for words, but not for white space inside the border. How should the client know about it? They don't know about "label".

  0