Intro component with sign up form solution with HTML, CSS, JS

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  Hello and great job ! Here I have a suggestion for you :

  • Try to follow DRY principles ! in matter of fact it was a little bit confusing for me to figure out your JS code

  Also I opened a pull request to your github repository which will improve your script.js file

  ✅ I hope this was helpful for you

  Marked as helpful

  1

  ---

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @Yazdun That's wonderfull, thanks a lot ! It was a bit hard for me to understand what happens exactlly in the script.js file you updated, but I think I catch the main idea.

  On side, you made me train Git, which is pretty valuable ! I managed to merge your PR. It was very instructive, hope I'll be able to collaborate again with you later !

  Thanks a lot !

  P.S. : Your code formatting drove me crazy !

  0

  

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  @FlorianJourde You're welcome ! Here is a short summary of what happened in script.js file :

  There is principle which is called DRY which stands for don't repeat your self. for example you wrote :

  if ( testInputs(firstName) ) { setErrors(firstName, "errorFirstName"); errorMessage.push("firstname"); } else { removeErrors(firstName); }

  if ( testInputs(lastName) ) { setErrors(lastName, "errorLastName"); errorMessage.push("lastname"); } else { removeErrors(lastName); }

  as you can see there is so much repetition, right? following DRY we can write a function to handle this repetition, so we can maintain our code much easier. here is my approach:

  const handleErrors = (element, errorType, errorPush, errorPushArr) => { if (testInputs(element)) { setErrors(element, errorType); errorPushArr.push(errorPush); } else { removeErrors(element); } };

  as you can see, It's similar to your code but this function receive repeated parts as param and handle it for us.

  now this code => handleErrors(firstName, "errorFirstName", "firstname", errorMessage);

  now is same as =>

  if ( testInputs(firstName) ) { setErrors(firstName, "errorFirstName"); errorMessage.push("firstname"); } else { removeErrors(firstName); }

  but don't you think DRY approach is more efficient?

  I hope this makes sense for you, I tried my best to explain DRY as it's made my life much easier 🙂. if you have any other question I will be glad to help

  Marked as helpful

  1

  

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  @Yazdun Yes, I get the idea, but my problem is all about the syntax : I still need to train a lot in JavaScript, particulary when it's about disociated functions and parameters. As a beginner, I'm more confortable with procedural code.

  Thanks for your reply, what a pleasure to see people supporting each other ! I trully don't regret to go by this professionnal sector !

  1