Interactive Sign Up form

Community feedback

• 

  Harsh Kumar•3,550

  @thisisharsh7

  Posted 29 days ago

  Fantastic work! Great job using references to overcome challenges while adapting solutions to your code.

  To make the form more interactive and improve validation:

  1. Real-time validation: Add event listeners for input events to check data as the user types. For example:

     firstName.addEventListener('input', () => {
       firstName.nextElementSibling.classList.toggle('hidden', firstName.value.trim().length >= 4);
     });
  

  This shows/hides errors instantly.

  2. Visual feedback: Add a green border or checkmark for valid inputs using a class like .valid { border-color: var(--color-green-600); }.

  3. Disable submit button: Disable the button until all fields are valid using button.disabled = !isValid;.

  4. Responsive improvements: Use rem for padding/margins (e.g., padding: 1rem) and media queries to adjust .wrapper width for smaller screens.

  Good work overall-Keep experimenting!

  11

  Marked as helpful
• 

  Marzia Jalili•7,750

  @MarziaJalili

  Posted 29 days ago

  You're crashing it! 🔥

  🌟 Tweaks?

  ✅ You could simply use the property below for the radio buttons and checkbox to change the color instead of building everything from scratch yourself:

  accent-color: green; 
  

  ✅ On mobile, the size and position of the success box are a bit off, bro. Like we hit the submit button, waiting for something to pop up, but nothing is there unless we scroll back to the top.

  ✨ Here's how to fix this:

  • set the width to a larger number to avoid too match stretching.

  • change absolute positioning to fixed to make it show up all across the page.

  • we will add a nice little animation for better user experience. 😀

  width: 94%;
  position: fixed;
  /* Fun stuff */
  transform: translateY(-10%);
  opacity: 0;
  transition: 1s;
  animation: pop-up 1s ease-in 1 forwards;
  
  @keyframes pop-up {
    to {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  

  Other than that, the code is just flawless!

  😎😎😎

  10

  Marked as helpful