Skip to content
Submitted over 3 years ago

Intro Comp. with Signup Form built with SCSS, BEM, & Vanilla JS

P
Ken•4,915
@kens-visuals
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I'm really proud of this project for a couple of reasons. First, I've always avoided working with HTML forms, but in the challenge I had to "face my fears". I think I did pretty good considering that this was the first time, using Vanilla JS 🟨 to validate any type of form. Second, this was the first time when I used Vanilla JS 🟨 without any outside source, tutorial, or anything like that. Besides RegExp of course (for the record, I know RegExp, but not that good to write an email or password validator), but I mean common it's still pretty cool, eh? 👨🏻‍💻 Anyhow, cool project, simple design, a bunch of cool stuff to learn and practice.

What comes to continued development 🤓 I'd like to sharpen my skills of animations and how to manipulate them with Vanilla JS 🟨 I'm planning on implementing some basic animations for this project because it looks pretty raw without them 🤔

P. S. I have added some extra challenges for myself, there's also a password validation, and different error messages when you leave it blank or insert a wrong password. Also, there's a success message at the end, when everything is submitted successfully.

If you have feedback 👨🏻‍💻 feel free to leave it in the comments section. Cheers 👾

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, awesome work on this one. Layout in desktop looks great, it is responsive and the mobile state looks great as well. Though I suggest lowering down the breakpoint since right now, at 114px it already shows the mobile/table layout which is too big for those and desktop layout could use more those screen-time.

    It is great having to see lots of others giving feedbacks, just going to add some suggestions as well:

    • Right now, the error works but is only limited for sighted users right now. To make the form more accessible:
      1. the error-message for each input should have an id attribute.
      2. When input is wrong add an aria-invalid="true" to inform a user when they navigate on the input that it is invalid.
      3. When input is wrong add an aria-describedBy attribute on it, the value of this attribute will be the id of each error-message. This way, they will know what kind of error they had made based on the text-content of each error-messages.
      4. Making it more accessible, have an aria-live element. This element will announce if the form submitted has successfully submitted or if it has any errors. This way, user will be informed right away about errors.

    A pseudocode of steps 1-3 looks like:

    if ( input is wrong )
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedBy", id of the error-message);
else 
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedBy");

    To implement the aria-live have a look at this simple accessible form that I created. This implemented the other attributes I mentioned as well, see the structuring and the manipulation of the attributes.

    If you have any queries, just drop it here okay. Aside from those, great work again on this one.

    Marked as helpful
  • Marlon Passos•920
    @MarlonPassos-git

    Congratulations on your completed 10 Challenge 🎉🎉🎉

    I really liked your solution, flexible, functional and similar to the original version.

    However I have some suggestions for you to improve even more.

    • "Terms and Services" should be an <a> tag as this usually takes the user to another page

    -As a good practice and to avoid future bugs, I recommend putting the script tag just before the closing </body> tag rather than in the <head> section of your HTML, any doubt I recommend reading https://levelup.gitconnected.com/all-about-script-87fea475b976

    • Another nice thing to do is enable the hover effect when using TAB, just add , :focus-visible to your hover CSS. Example
    .intro__button:hover, .intro__button:focus-visible {
        cursor: pointer;
        opacity: 0.65;
 }

    • When I get out of 750px width the designe shrinks at once, I think if you set a maximum width in the form and only changed the button it would leave a lot more space for the user to interact.

    • About the title, there is a really cool technique where you could make the font size of the title flexible media query using clamp(), I recommend you read this article https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#for-those-who-dont-mind-that-edge-case

    Marked as helpful
  • GabrielAlberini•60
    @GabrielAlberini

    Waw! Good interactivity. Can you explain to me how you went about resetting the form and its styles once submitted? I can not do it :(

    Minutes ago, I uploaded the same project (if you want, you can look at my code) :)

    Thanks! I follow you :D

  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    1- The expected interactivity of the cta is missing.

    2- There's no point for setting the alt attribute without any value and it can cause unexpected behavior such as screen reader reading out the value for src attribute instead of the alt. The alt should be set to an empty string but in this case you've the aria-hidden which removes it from the accessibility tree so there is no need for it.

    Keep coding :=)

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