Frontend Mentor | Flexbox / Grid + Simple input validation via Regex / vanilla JS coding challenge solution

@pikapikamart

Posted over 2 years ago

Hey, awesome work on this one. Desktop layout looks fine, it is somehow responsive but the image is not taking full height when the screen-width changes. Mobile layout looks great though.

Kirin already gave feedback on this, just going to add some suggestions as well:

It would be great to have a base styling with these properties

html {
  box-sizing: border-box;
  font-size: 100%;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

On your body tag change the background-image: url(/images/bg-pattern-desktop.svg); to background-image: url(./images/bg-pattern-desktop.svg); using / or root path in github does not work.
Always have a main element to wrap the main content of your page. On this one, the .wrapper should be using the main instead of div.
Website-logo img should be using the website's name as the alt like alt="base apparel". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
h1 should be text-align: left and you don't need to use those span inside it to make each text wrap onto another row, you should just use max-width on the h1 and let the text wraps.
Your input tag lacks an associated label tag on it. Since there are visible-label, the label would be a screen-reader only label, meaning it would make user of like sr-only class. The text-content should describe what the input needs like the value on the placeholder.
error-icon is not showing, check for / path usage.
Now, the form error works but only limited for sighted users. A great way to make the input more accessible should be done like this:

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");

The error-message element should have an id attribute which is referenced by the aria-describedBy attribute on the input element. By doing that, your user will know that the input is wrong because of aria-invalid and they will know what kind of error they made because of the aria-describedBy

Another idea to implement to further improve accessibility is to have an aria-live element that will announce if the form submission is a success or not. If you are confused on what said, have a look at this simple snippet that I made for accessible form you can always ask me if you have any questions about this one^^

Aside from those, great work again on this one.

Flexbox / Grid + Simple input validation via Regex / vanilla JS

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community