Interactive pricing component with vanilla JS.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  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

  @ttakeyayaPosted about 3 years ago

  @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