All comments

• 

  Barney•370

  @waikooSubmitted about 2 years ago

  Answer as few or as many as you like. Thanks!

  1. Tried to use clamp for the font size of the title, unsure if correctly, but it looks good to me, please tell me what you think.

  2. Still unsure if I'm doing all right with grid, I set the columns to 56% and 44%, is that okay? Good practice? Can it be done any better? What about the template rows?

  3. If you don't complete the email field and click submit, you'll see that the placeholder text is changed from 'Email Address' (set in CSS) to 'email@example/com' (in JS) however I couldn't figure out how to color it on the condition of the form being submitted. Any tips on that? Is there a better solution?

  4. My JS is very clunky, I know. Any tips on how to improve upon that? I first thought about getting all the input fields based on a class selector but I know you're getting back different types of arrays with querySelectorAll and getElementsByClassName and wasn't sure about the logic coming after the iteration so I went the hardheaded way. Any JS tips are severely welcome!

  5. Added the icons with absolute positioning relative to the form, which feels clunky too. Display: hidden, on click display: block. Any better way to do it?

  6. What do you think about my class names? It's a combination of all the different naming conventions I went through today before starting out, but it's mainly BEM.

  7. I've seen a use case for writing a data-error property on the input field and making use of that in the CSS with attr(data-error) as a before/after element's content, anyone heard of that before?

  

  Intro component with signup form

  2

  30
  

  Ilya•100

  @IlyaChichkovPosted about 2 years ago

  Hi Barney, congratulations for this solution!

  -Use the ::placeholder CSS pseudo-element for changing placeholder style. -You could simplify the validation JS code by separating the if body into a single function

  function(el, n, b){
  	el.style.display = 'block';
  	n.style.marginBottom = '0';
  	n.style.borderColor = '#ff7a7a';
  	n.placeholder = '';
  	b.style.display = 'block';
  }
  

  -What about wrong input icons, I think it's better use visibility CSS property so that your elements were taken into account by the time page loaded and displayed when necessary.

  Hope this will help with some of the questions.

  1