Intro component with sign up

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hey Lucy,

  You already have some error messages defined in your HTML, why don't you use them? ^^ You could define an .active class for example, that would change their display to block instead of the default display: none. And then you can toggle this class with JS, if the input is empty/email isn't correct. You seem to be overthinking the logic a bit (which I totally understand, if you're new to JS, it can feel overwhelming). Check out this video, it may give you an idea what would be a good approach. There's also a solution for this exact challenge on the channel. I didn't want to link here that one though, as you may want to try to implement it yourself first, before checking a full solution.

  As for the error-icon, you could use a position: absolute on it, while giving the "form-input" div a position: relative. Position it where you want and then you can apply the same logic here as before: toggle its display with a class.

  I'd also note a few other things:

  1. The purple text above the form is probably not a button. It does look like a button, but honestly, that's just a questionable and misleading design choice, I reckon >.< You can just put that text in a simple div and keep the styles.

  2. You could swap your container div to a main. As a general rule, most of your main content should go inside this element, unless it's something more fitting for footer/header.

  3. For this challenge you can also remove the action attribute from the form, it won't be needed. ^^

  Overall, I think you did pretty good on your first try though! Good luck with the JS part, if you have any questions you can of course ask here or on Slack ^^

  Marked as helpful

  1

  ---

  

  Lucy.Sujeong•10

  @chusu91Posted over 2 years ago

  @FluffyKas thanks a lot for the feedback! I changed my code with classList.add / remove. so it works well now! I think too much as u mentioned haha! thanks a lot again!

  0
• 

  Ganesh•280

  @Ganesh-RathorPosted over 2 years ago

  @Lucky Hey, great work bro 99 level perfection

  Marked as helpful

  0