Interactive pricing component | Pug, Scss & Vanilla JS

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  Hey @ MasterKrab 👋 - this looks great!! 🙌 You've matched the design really well and the site is nice and responsive.

  Some, very small, suggestions for you:

  1. There is some inconsistency in your focus states (you've styled the range input and checkbox really nicely, but the button gets the default styles). I have recently started adding the following to my code as a basis for catching this:

  `:focus-visible { outline: 3px dotted currentColor; outline-offset: 0.25rem; }

  :focus:not(:focus-visible) { outline: transparent; }`

  This helps me catch this error. Of course you might have to change the color etc but I find it generally works. And don't forget to set your pointer to cursor! This will help let your users know where they can click.

  2. I had to google whether it's OK to have two labels for one element, and it's not clear that it is. I think this page suggests it would fail a lighthouse test: https://web.dev/form-field-multiple-labels/ but this page has a much better assessment (scroll down for the summary table): https://scottaohara.github.io/tests/html-inputs/double-label.html Seems like Safari is the main issue in this case.

  Your JS seems really solid and I'll be having another look at your code there as I think it is much more concise than mine when I tried this challenge!

  Great work on this one! Really nice job and I've learnt somethings reviewing the code, which is always great! 🎆

  2

  ---

  

  MasterKrab•940

  @MasterKrabPosted over 3 years ago

  @dwhenson Thank you!

  0