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

vanilla JS sign up form

@Aklog-1

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


If you guys see some bushing around on my java script and know some clever ways, please share them to me. And, one another thing, what can I do to refresh the page/stop preventing the default/ and actually submit it to back end if there are no errors?

Community feedback

hardy 3,660

@hardy333

Posted

Hi, super nice solution everything is on point good job.

Here is Few thing that might be slightly different in design files compared to your implementation:

  • Heading need to be have way bigger font-size..
  • Paragraph text has to low contrast compared to its' background, it needs to be more white and less transparent(to have more opacity value).
  • Padding on form card need to be bigger.

You can try to change those thing but this way as it is now is also Ok. Also validation works quite nice and was happy to see that website is fully responsive.

About form submit on backend: I am sure you know there is event.preventDefault() property in javascript which prevents page from refreshing after submit event is fired. In order to submit your for data first of all you need to have backend xD and use method="POST" attribute on form element and action attribute as well.

there are also ways to collect form data without writing backend your own, for example netlify has that feature and there are buch of services which provide that functionality for free.

Marked as helpful

3

@Aklog-1

Posted

@hardy333 all right, thank you buddy

4
hardy 3,660

@hardy333

Posted

@Aklog-1 No probelm

4

@MartineauRemi

Posted

hey ! Congrats on your solution, you did a great job :)

In your javascript functions from script.js, when you want to return a boolean value, you don't need the 'if/else' blocks. So for example this :

    function empty(field) {
        if (field === "") {
            return true;
        }
        return false;
    }

does the same thing as this :

    function empty(field){
        return field === "";
    }

but the second is a bit shorter and easier to read.

Happy coding !

Marked as helpful

1

@Aklog-1

Posted

@MartineauRemi oh yeah! u saved me 4 lines, thanks

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