Frontend Mentor | intro-component-whit-login-form coding challenge solution

Community feedback

@correlucas

Posted almost 2 years ago

👾Hello @EddySea69, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

1.Add the hover states to improve the interaction in the button.

2.Add the website favicon inserting the svg image inside the <head>. <link rel="icon" type="image/x-icon" href="./images/favicon-32x32.png">

3.IMPROVE YOUR WORKFLOW using VSCODE you can code your whole page using px and then in the end use a plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

✌️ I hope this helps you and happy coding!

Marked as helpful

Eddy Sea• 90

@EddySea69

Posted almost 2 years ago

@correlucas wow, I didn't have idea about this plugin, thank you very much

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

Hey @EddySea69, great job on this project!

Some suggestions to improve you code:

Currently, your code isn't properly validating the inputs.

For the first/last names, I can type in only numbers and your code accepts it. For your password input, if I type in only number (by itself) your code accepts it. The only one that seems to be working is the email input.

To fix, you want to set up your inputs in this manner:

     <input
            type="text"
            name="firstName"
            id="firstName"
            placeholder="First Name"
            required
            pattern="[A-Za-z]+"
          />

          <input
            type="text"
            name="lastName"
            id="lastName"
            placeholder="Last Name"
            required
            pattern="[A-Za-z]+"
          />

The pattern="[A-Za-z]+" ensures that your users only input letters only for their names.

          <div>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="Email Address"
              required
            />

          </div>
          <input
            type="password"
            name="password"
            id="password"
            placeholder="Password"
            required
            minlength="8"
            autocomplete="new-password"
          />

For the password, you'll notice the minlength="8" and autocomplete="new-password".

the minlength tells the browser that the password has to be a minimum of 8 characters.

The autocomplete="new-password" helps browser in proving users with strong passwords.

You'll also notice that each input has a required attribute, this attribute tells the browser that this field is required.

I'll include a link with more detail. This is from Google themselves for their developers.

Source: **https://web.dev/learn/forms/

Happy Coding!

Marked as helpful

Eddy Sea• 90

@EddySea69

Posted almost 2 years ago

@vcarames you're right, I really need that... Thank you, I'll do it soon as possible.🙏

バレンタイン 😈• 64,190

@VCarames

Posted almost 2 years ago

@EddySea69

Glad I could help!

intro-component-whit-login-form

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community