Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

intro-component-with-signup-page

Vani 160

@VANIMEHTA

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Looks like my java script is not working fine. Pls suggest changes.

Community feedback

Paola 320

@paolas771

Posted

Hello, you did a good job! Some tips

  • their is a form attribute(<form></form>) that you can use instead of using a div for forms.
  • When naming variable and functions, I would recommend using camelcase so it is easier to read for example firstName, lastName. So the first world starts with a lowercase and every word after that the first letter should be uppercase.
  • As for the javascript they should be if else statements in all the validate functions so if(x === "") {....; return false} else {return true} otherwise it will always return true.
  • you also want to do x == "" instead of x === " " in the if statements since the === compares data type as well.
  • On the input type submit you want to change the onsubmit to onclick.
  • In the css file on line 93 take away the .form-p class name that is what is causing the errors not to show.
  • instead of using classList.toggle I would recommend using classList.add in the if statement and then add classList.remove in the else statement that way if the user makes more than one mistake it is not toggling back and forth every time they click the button.
  • also add a event.preventDefault() in the validate() function so it is not reloading the page every time the user click the submit button. I hope this helps if anything is not clear let know so I can explain it better!!

Marked as helpful

0

Vani 160

@VANIMEHTA

Posted

@paolas771 heyy thank you so much for helping out! Its working now but even before clicking submit its showing error msgs could u pls suggest changes for that

0
Paola 320

@paolas771

Posted

@VANIMEHTA Hey good job on fixing it!!

  • So I noticed in the css file you had change in .form_p display to block you want to change that back to display:none. This is what is causing the errors to show before clicking the button.
  • Also I noticed you have an event listener for the button so you can remove the onsubmit="validate()" from that element.
  • on the event listener in javascript you just need the function validate(); followed with e.preventDefault(); you don't need to add any other function since validate() goes through the other functions.
  • make sure in the if statements you are not using === since this compare data type as well. Instead use == this only compares the value and get rid of the space between the quotes. so your if statement should look like (x == "")
  • For the classList.add and remove you want to change it to "show" so classList.add("show") in the if and classList.remove("show") in the else. Do this in every function.
  • Also the email error looks different because the class name is not the same as the rest so change the class name to "form_p" in your html file. I hope this helps!! If you need me to clear something up let me know I'm happy to help!!

Marked as helpful

0
Vani 160

@VANIMEHTA

Posted

@paolas771 hi thank u so much again ,its working fine now :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord