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

Intro Component built using SCSS, & Vanilla Javascript with validation

#sass/scss
Kehindeβ€’ 660

@jonathan401

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my solution to the Intro Component with Sign-Up form Challenge. I had gotten most of the inspiration of this project from @vanzasetia.

I struggled a lot while building this challenge. I'm very sure my solution was a clean one. So I might probably be trying out this challenge again but till then, your feedback and suggestions would be appreciated.

Community feedback

Vanza Setiaβ€’ 27,855

@vanzasetia

Posted

Hi, Majay! πŸ‘‹

Congratulations on finishing this challenge! πŸ‘

The hardest part of this challenge for me was when I created the Regular Expression for the validations. πŸ˜… How about you?

Anyway, here is some feedback from me.

  • The alert message for the first name input says, "Must be made of alphabets, not contain numbers and contain 5-12 characters". But, when I only input two characters, it is a valid input. The same goes for the last name input.
  • For the error-image, I recommend making it a background image instead of the input element. This way, you can clean up the HTML a little bit.
  • input with type="submit" was used before the button element exist. It's best to avoid using legacy elements. So, I recommend using button element instead.

I notice that main.css is minified. It makes me harder to give feedback to your CSS because I have to open the Sass files one by one. So, I recommend adding the "non-minified" CSS for people to review.

I hope this helps! Keep up the good work! πŸ‘

Marked as helpful

0

Kehindeβ€’ 660

@jonathan401

Posted

@vanzasetia Thanks for pointing out the error with the first name and last name regex pattern πŸ˜„. I had completely forgot to update it while I was still testing validation on the input fields πŸ˜…. And for the error-image, I'll try fixing that as soon as I can ☺️. I'll also make sure I fix that submit button up too 😁.

And lastly for the main.css I had used the live sass compiler extension in Vs code, not really sure if I could configure this to not make the main.css file not minified. I'll also be fixing that up too πŸ˜„. Thanks so much for your review ☺️

0
Vanza Setiaβ€’ 27,855

@vanzasetia

Posted

@jonathan401 No problem! πŸ‘

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