Signup Form - SCSS

Community feedback

• 

  Nurcholis•420

  @cholis04Posted over 2 years ago

  Hi Pon Huang. Great job on this challenge!

  Looks like you're having a little trouble in this challenge. Let's take a look at the problem you're having:

  - Error icon and message appear only on first input

  All icons and error messages have the same class name. So you need to tell the browser specifically which icon and error message is given the class name 'hidden'

  You can select the icon and error message based on the input element itself :

  const  invalidateElement = (element) => {	
  	const currentElement =  element;
  	const errorIcon = currentElement.nextElementSibling;
  	const errorMessage = currentElement.parentElement.nextElementSibling;
  
  	currentElement.classList.add('invalid');
  	errorIcon.classList.remove('hidden');
  	errorMessage.classList.remove('hidden');
  };
  

  You can do the same for your reset element function. So you don't have to select icons and error messages by document, you can delete the previous code :

  
  const errorMessage = document.querySelector(".error-message"); // remove this line
  const errorIcon = document.querySelector(".error-icon"); //remove this line
  

  - Error icon not center align

  You should remove the margin-bottom property on the input tag.

  input {
  	display: block;
  	width: 100%;
  	height: 5.6rem;
  	/* margin-bottom: 0.6rem;  Remove this line */
  	padding-left: 2.5rem;
  	font-family: inherit;
  	border: 1px solid $color-grayish-blue;
  	border-radius: 5px;
  }
  

  Maybe a little suggestion, you should give the margin-top and margin-bottom properties with the value 1rem in your error message.

  Hopefully can help. Happy coding

  Marked as helpful

  1

  ---

  

  Pon Huang•210

  @ponhuangPosted over 2 years ago

  @cholis04 Hello Nurcholls, how are you?

  This helps a lot :D In the beginning, I was thinking do I have to use loop to make it work, but after it came out crazy complicate solution don't even know how to write and fix. But your method is much simple and easier to understand.

  Thank you so much, and thanks for helping.

  Have a nice day~

  1

  

  Nurcholis•420

  @cholis04Posted over 2 years ago

  @ponhuang Glad to help. Have a nice day too ✌️

  0