Submitted almost 2 years ago

Mobile first (iphone 5SE) interactive rating component made with form

Marko•80

@smarko-web

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

First; as I noticed in previous projects that I had worked on, some people with smaller screen sizes, specifically that have the iPhone 5SE, were having trouble viewing my projects. That is why I was working with the 214 pixel screen size from the start

As can be seen in my repo, the first version that was made was not using HTML form(I was made aware of this issue by a helpful mentor on Slack). That is why I had to redo the project in it’s entirety, with the radio buttons I reinforced my previous knowledge of giving them labels(which were styled as buttons that I reused from the first version) associated with their corresponding (radio) inputs.

Quick question: how would I go about making the error message reflash every time the submit button is clicked on (and the rating value is 0)

Of course any other feedback is welcome as I would like to improve my web development/design skills! All though WCAG is not implemented here, I would like any suggestions on how I could start doing so?

Community feedback

Grace•31,270
@grace-snowPosted almost 2 years ago
Hello

You're misusing the article element here. That's for standalone content that can be syndicated across multiple places/sites. These panels should just be divs inside a main element. The attribution also needs to be in a footer landmark.

JS should not be manipulating styling like this. Instead use js to toggle classes or attributes, not to append inline styles

You need to change the way you are hiding inputs. They are inaccessible the way you're doing it at the moment. Look up how to accessibly hide / visually hide content. Once that's fixed, you'll need to ensure keyboard focus works on the form.

Good luck with it
1
Marko•80
@smarko-webPosted almost 2 years ago
@grace-snow always appreciate your feedback, I’m using assistive technology to use my computer, so it takes me a while to make these changes
0
Marko•80
@smarko-webPosted almost 2 years ago
@grace-snow just finished the landmarks implementations
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