Email register website with validation

Community feedback

• 

  Juan Bonilla•610

  @juanpb96Posted over 3 years ago

  Hi @Sloth247

  Good job on your solution 👍

  To help you with your questions I consider:

  • Hover works for buttons but you are having a problem with a background property that is not working, try using opacity and you will see the change on hover. So, please review your background property 👁️‍🗨️
  • You can use backgroud-repeat: no-repeat. However, I can't understand your question pretty well.
  • Did you use form.addEventListener('submit', function(){})?

  Hope my suggestions could help you. 🙌

  Happy coding!

  Marked as helpful

  2

  ---

  

  Yuko Horita•645

  @Sloth247Posted over 3 years ago

  @juanpb96

  Hi Juan, thank you for your review. I set hover on button but it didn't work. How can background property relate to hover? I meant light pink background image, how can I code to look completely same as the original design?

  Yes, I have used form.addEventListener as you can see my Github but still does not work :(

  0

  

  Juan Bonilla•610

  @juanpb96Posted over 3 years ago

  @Sloth247

  Hi again Sloth. I was checking your css and within this selector :

  #arrow:hover, #arrow:focus {
      background: linear-gradient(135deg, hsl(0, 0%, 100%), to hsl(0, 100%, 98%));
      
  }
  

  -I found your hover state and the background property I told you. If you remove the to of the linear-gradient it will work.

  • I'm not quite sure. But looking at your code, I found you are using a container tag that does not exist in HTML. You can replace it with div.
  • In your GitHub, you only use arrow to listen for 'click' events but your const form is not being used.

  0

  

  Yuko Horita•645

  @Sloth247Posted over 3 years ago

  @juanpb96 Hi Juan, thank you very much and I'm sorry to take your time for this. I have updated your suggestions on my coding.

  • hover: solved, thanks
  • container: fixed to <div>
  • I have changed to form.addEventListener("submit", function (event) { but when you try in my live site, you'll see there is no warning message/icon when you click "submit".

  0

  

  Juan Bonilla•610

  @juanpb96Posted over 3 years ago

  @Sloth247

  Hi once again Sloth. Don't worry, it is good that my suggestions can help you 😄

  • You're almost done 🙌, you only need to insert in your HTML the novalidate attribute in your form tag.

  Hope this helps!

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  @Sloth247 Greetings.

  • put eventPreventDefault outside the if statement. Let it be above the if statement.

  0

  

  Yuko Horita•645

  @Sloth247Posted over 3 years ago

  @juanpb96 Hi Juan,

  Wow it worked! I still need to figure out the logic but you're a star! Thank you very much 😁

  1

  

  Yuko Horita•645

  @Sloth247Posted over 3 years ago

  @ChamuMutezva I fixed it. Thank you for your help as always 🙌

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  Hey @Sloth247, congrats on submitting your first challenge solution! 🎉

  I'd recommend checking out the accessibility and HTML validation reports. A good habit to get into is learning more about the issues, updating your code, and generating a new report to see if they've been resolved. That will help boost your knowledge further!

  Here are a few more pointers:

  • Limit your use of br tags as much as possible. They can clutter your HTML, and you should typically let content flow naturally based on the space within the containing element.
  • It looks like you're not indenting your code properly in your HTML. Practising proper code indentation is really valuable and something I'd recommend focusing on. It helps improve the readability of your code and will save you (and others) time when reviewing your code.
  • Avoid using IDs as CSS selectors. They have high specificity and can't be reused on the page, so they're not good for the purpose of styling. Instead, I'd recommend sticking to class, attribute, pseudo, and type selectors. Using these will help keep your CSS more maintainable.
  • You can see in the design comparison slider that your solution is a bit different from the design. It would be great practice to try reworking your solution to get it closer to the design.

  Nice work using the ValidityState Web API for the form validations. This is something I didn't actually know existed before reading your code, so I've learned something new myself!

  I hope my pointers are helpful. Let me know if you have any questions. Keep up the great work! 👍

  Marked as helpful

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  Other things to look at are highlighted in the feedback report. I see the image logo has an h1 as the parent - change that h1 to a div instead. A site is recommended to have one h1 tag.

  This course can get you started with responsive sites

  Marked as helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi @Sloth247

  I think you should pause working on this and go and do some of the smaller newbie ui challenges first. There is a lot to work on and fix here, too many for me to write out in feedback.

  You will build much better foundations if you learn from smaller challenges first.

  Good luck

  0