Base Apparel coming soon page solution using CSS grid and flexbox

Community feedback

• 

  Agustin•340

  @agusc01Posted over 2 years ago

  Hi the below sentence code is wrong...

  emailError.textContent = 'Email should be at least ${email.minLength} characters';

  you have to use `` instead of ' '.

  Interpolation only works with ``.

  Marked as helpful

  1

  ---

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted over 2 years ago

  thanks @agusc01, I barely done the testing, thanks for pointing me out this.

  0
• 

  P

  Dave•5,295

  @dwhensonPosted over 2 years ago

  Hello @shameerkamaludeen - nice work here! 🙌

  I'm no expert but I'll try and give you some feedback on the validation:

  • I would suggest adding the the novaldiate attribute as your JS loads. This way you can take advantage of the browser validation if JS fails for any reason
  • Just to simplify your code a bit could your addClass and removeClass functions be replaced by just using classList.toggle?

  I think the main problem is that at the moment the validation starts as soon as I focus on the input. This means that it's telling me I'm wrong before I've finished, which isn't nice!! 😜

  I would suggest adding the input event listener only after a submit event has failed. This way you give people a chance to try, and if they mess up they get instant feedback as they type.

  You can see how I managed this here: https://github.com/dwhenson/frontend-mentor/blob/master/28.%20fylo-landing-page/js/main.js it's not perfect!

  I used keydown but I think input that you chose is better, and I would add the listener inside the if statement, and probably just use trim() on the value to test for empty inputs, but it should give you the idea.

  Don't forget you can also use the API for styling CSS, for example in this case you could use the :invalid pseudo-class with all your error styles - that may also help to simplify your JS a little more.

  Great job though!!! 👍

  Cheers 👋

  Dave

  Marked as helpful

  0

  ---

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted over 2 years ago

  Hi @dwhenson much appreciation for having time to validate the solution.

  about novalidate is it ok to add that in the form element itself in HTML itself?

  classList.toggle is really a helpful function, thanks for pointing me out that.

  you were absolutely right on the error being shown while started typing the email itself, I would definitely improve it.

  I will consider the remaining suggestion you made, I really appreciate that.

  could you help me with one more thing, if you look at the background pattern on the desktop which is not taking the whole height of the body even though using background-size: auto 100%; can you figure out why it is?

  1

  

  P

  Dave•5,295

  @dwhensonPosted over 2 years ago

  @shameerkamaludeen you can add novalidate in the HTML, but then it if JS fails you get no validation at all. The advantage of adding it through your JS, is that you get progressive enhancement. If JS doesn't load, the built-in browser validation will still work - not great, but better than nothing.

  Regarding the background image, these are tricky things, one thing I tend to do is write all the background properties out long-hand as it's easier to understand what's going on. I'm not sure it'll solve your problem, but I often use background-size: cover; in this kind of situation.

  Cheers Dave

  Marked as helpful

  1

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted over 2 years ago

  ok I get it now about novalidate, it is of course a good one, Thank you @dwhenson

  0
• 

  Olimpio•50

  @rnrnshnPosted over 2 years ago

  This is the best solution so far on this challenge

  0

  ---

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted over 2 years ago

  Thank you @rnrnshn

  0