Responsive sign up form with flex, grid and javascript

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  JAVASCRIPT 💢:

  • The way you declared variables are need to be well structured and organized

  ---

  • Take a look at the following example code which describes an efficient way of declaring variables

  const firstName = "Your";
  const lastName = "Name";
  const emailAddress = "example@some.com";
  const password = "supersecret";
  

  • instead try this,

  const firstName =  "Your",
         lastName =  "Name",
         emailAddress = "example@some.com"
         •••                
         •••         // n number of declarations
         password = "supersecret";   // make sure to add a semicolon at end of last declaration
  

  • This single line declaration with separated commas will helps you to have a better structured code and improves readability though

  ---

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  10

  Marked as helpful
• 

  vinu cyril•980

  @vinuman

  Posted over 2 years ago

  Hello,

  Good job completing the project.

  • You can make the position for the form as relative and give an absolute position for the error icon.

  • You can then use the top, right and transform property to have it where you want. For example, i have used the following for the first error sign(the one for the first name),

  .material-symbols-outlined{ position: absolute; top: 11%; right: 6rem; transform: translateY(-50%); color: #FF7979; display: none; }

  • Additionally, you can target the email input field to ensure that a correct email format is updated. This is the JS code i used, the error icon is the next element after the email input and the error message is the element after that. You can put this inside your button eventlistener.

  const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/; if(!(emailInput.value.trim().match(emailRegex))){ const errorMessage = emailInput.nextElementSibling.nextElementSibling; errorMessage.style.display = 'block'; const errorIcon = emailInput.nextElementSibling; errorIcon.style.display = 'block'; }

  • Finally you can remove the default outline for the input fields with the following CSS code,

  input:focus{ outline: 1px solid #5E54A4; }

  • Hope this helps, happy coding!!

  10

  Marked as helpful