Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive pricing component with vanilla JS.

Take 400

@ttakeyaya

Desktop design screenshot for the Interactive pricing component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions would be appreciated!

Community feedback

@pikapikamart

Posted

Hey, awesome work on this one. Layout in general seems fine but the main layout needs the box-shadow to be adjusted like smooth and have some rounded-corners.

Some other suggestions would be:

  • The pricing of the component could use a heading tag, since primarily it serves as the pricing label for the whole form or component.
  • The slider needs to be an input to be used properly. Using div is not accessible at all, only mouse is the peripheral that can interact with it. Remember, an interactive component needs to use interactive element.
  • Same goes for the billing section, it should have used input, those text on the left and right side of it are the label for the input element. Take a look at my solution on this one forgive me about the lack of main element, this solution I made was very long ago and I haven't exactly know much before. But look at the structure of it, also in my billing section, I could have used fieldset along with a legend to make it more accessible.
  • But really, making the component a form element would be really great, so that you are like simulating a real app. The button as well should have type="submit" because that will submit the form.

Aside from those, great work again on this one.

Marked as helpful

0

Take 400

@ttakeyaya

Posted

@pikamart

I've never thought about making the component with form. I didn't realize the importance of the accessibility. I'll tweak the code.

I appreciate your suggestions!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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