Submitted over 3 years ago

Ping coming soon page using Bootstrap

María Daniela•185

@mdagudo

Preview site View code

This is a solution for...Ping single column coming soon page

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello there! With this challenge I've used a little Bootstrap for the form input and button, so they can smoothly move responsive when the screen resizes.

This is my first newbie JS challenge, and I'm reeeeally new to this. I've been struggling with learning Javascript so if someone have any suggestion about my code, I would really appreciate that. I feel like I used really simple DOM manipulation, I don't know if I hardcoded some things, like

else if (email == '') {
        empty.style.display="block";
        error.style.display="none";
        document.getElementById('email').style.borderColor = 'red';
        return false;
}

I used the error.style.display="none" because if I tried submitting an invalid email and then an empty one, both errors showed up, so I feel like I hardcoded it this way. There is any way to improve this? Thanks!

Community feedback

ApplePieGiraffe•30,545
@ApplePieGiraffePosted over 3 years ago
Hi, María Daniela! 👋

Good work on this challenge! 👍 Your solution looks pretty nice! 🙌

At the moment, the form is letting me submit empty and invalid values for the email input element. You might want to prevent the default behavior of the form and set it to not refresh the page when the submit button is pressed so that there's time for you to evaluate the input and show any error messages that you need to.

Changing the display property to hide/show the error message is a good idea, but it might be easier if you group all the error message styles in a single class and simply toggle that class on/off with JS to hide/show the error message. That will mean less JS code and make it easier to add more error message styles in the future. 😉

Let me know if you have any more questions or need clarification for anything! 🙂

Keep coding (and happy coding, too)! 😁
0

Please log in to post a comment

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