HTML & CSS USING GRID

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted almost 4 years ago

  Well done Harold, looks good and is responsive.

  Design Feedback:

  • the styling for your btn-trial is better applied to your anchor tag inside. If you need to make the anchor tag behave like a div. Add display: block to your link. Currently the only section that is clickable is the text. If clicking on the purple background nothing happens.
  • add a focus style to your form submit. At the moment I can't see any visual cue when I tab to it.
  • the "Terms and Services" usually would redirect a user to a separate page. Anchor tag with a hover state is recommended

  Javascript Feedback:

  • There's two classes you toggle between in your form but I don't see any styling for .valid and .invalid, could be removed.

  • Add an event listener using the "submit" event instead of the onclick=validate. So when the form fails validation you can stop the form from submitting.

  form.addEventListender("submit", validateForm);
  
  function validateForm(event) {
      event.preventDefault();
  }
  

  • For the error styling of the text boxes. I suggest wrapping "each field with their error span" into one div. Example below then when "First name" becomes invalid you can add the .validate class to the div which takes care of the error styling like the border color.

  .validate {
     input {
        borderColor: "red";
     }
  }
  <div id="some-identifier-for-first-name" class="validate">
      <input type="text" id="fname" name="fname" placeholder="First Name">
      <span id="error-fname"></span>
  </div>
  <div id="some-identifier-for-last-name">
      <input type="text" name="lname" id="lname" placeholder="Last Name">
      <span id="error-lname"></span>
  </div>
  

  • I would challenge yourself to make a new function that accepts two arguments, the id of the field error div and an error message. That way you consolidate calling activating the error styling and messages.

  Overall great job 👍👍

  0