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 sign up form solution with HTML, CSS, JS

P
Ctrl+FJ• 750

@FlorianJourde

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


Hey ! I used this simple accessible form from @pikamart to realise this challenge. Learned a lot of JS validation checking and DOM manipulation. Tell me what you think about it !

Community feedback

Yazdun• 1,310

@Yazdun

Posted

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

P
Ctrl+FJ• 750

@FlorianJourde

Posted

@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

@Yazdun

Posted

@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
P
Ctrl+FJ• 750

@FlorianJourde

Posted

@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

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