Submitted almost 3 years ago

Email register website with validation

Yuko Horita• 645

@Sloth247

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

=== Re-done on 2 September 2021. ===

Added proper email custom validation in JS.
Improved accessibility for error messages.

=== This is original issues raised in July 2021 ===

This is my first submission on frontendmentor. I could not solve below, however most of design is satisfactory;

Hover on arrow button: hover does not work on buttons?
Background image: do I need repeat and gradient? I could not figure out to do the same as original design.
addEventListener('submit', function (){} : it did not work, so I used click instead to show error messages and icon.

I appreciate if you provide me good feedbacks.

Many thanks

Community feedback

Juan Bonilla• 610

@juanpb96

Posted almost 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

Yuko Horita• 645

@Sloth247

Posted almost 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 :(

Juan Bonilla• 610

@juanpb96

Posted almost 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.

Yuko Horita• 645

@Sloth247

Posted almost 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".

Juan Bonilla• 610

@juanpb96

Posted almost 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!

Chamu• 12,970

@ChamuMutezva

Posted almost 3 years ago

@Sloth247 Greetings.

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

Yuko Horita• 645

@Sloth247

Posted almost 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 😁

Yuko Horita• 645

@Sloth247

Posted almost 3 years ago

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

Matt Studdert• 13,611

@mattstuddert

Posted almost 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

Chamu• 12,970

@ChamuMutezva

Posted almost 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

Grace• 27,870

@grace-snow

Posted almost 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

Please log in to post a comment

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