Responsive intro component with signup form

Community feedback

• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  Hello dia !

  Congratulation for finishing this project

  I have some suggestion for you :

  1. You have some problems with your javascript, when I tried it with the preview site link, it returns in the console dev tool an error Uncaught TypeError: inputs.email is undefined

  2. I've found a website which can help you to understand better how to create regex, while testing them, I give you the link below :

  • How to create a regex

  3. For the password specifications, maybe you can try to make it explicit by showing it to the users to know what are the requirements to make a valid password on this page.

  4. You can make the effect hover of your button a bit smoother by adding a little transition :

  .form__button {
    border: none;
    text-transform: uppercase;
    background-color: var(--btn-clr);
    color: white;
    font-weight: 600;
    letter-spacing: 1.25px;
    padding: 1rem 2rem;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 5px 0px hsl(154, 59%, 42%);
    text-shadow: var(--text-shadow);
    transition: ease-in-out 0.3s;
  }
  
  

  I also give you a link about transitions when hovering a button :

  • MDN Button transition

  I hope it helps you, keep learning and happy coding!

  Marked as helpful

  1

  ---

  

  dia ♡•200

  @diaasaurPosted about 2 years ago

  @UrbanskiDev Hi Laharl, thanks for the detailed response! I've added the transition and it looks good.

  1. Trying to debug Uncaught TypeError: inputs.email is undefined but I've been unable to reproduce it, can you tell me what the form state was which gave you this error?
  2. Password specifications is a good idea but I'm lost on how to add it without spilling the form out of 100vh. Maybe a paragraph with all the requirements is okay for now?

  1

  

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  @diaasaur

  1. When your page is in initial state, just going to the page, I click on the button, with an empty form and the error pop ! I also tried by filling up the form but same error.

  You can try going to your url preview link, open your browser console dev tool, on the console tab, then click on your button and the error should popup inside your console. (That's what happened for me)

  If I follow what my console dev tool show me, the problem appear from this line if (!inputs?.email?.hasError && !isValidEmail(inputs.email.value))

  2. Yes, a paragraph is good enough !

  Marked as helpful

  1

  

  dia ♡•200

  @diaasaurPosted about 2 years ago

  @UrbanskiDev tysm! I found out the issue and fixed it

  1