Responsive tip calculator app

Community feedback

• 

  tan•640

  @tan911Posted almost 2 years ago

  Hello @Decimo-10, Here's my suggestion that might improve your applications also to answer some of your questions as well.

  • I think you should, and they should be inside the fieldset if you want to make "Select Tip %" a label. Also you can use input="radio" for every percentage and hide it via visually-hidden class or sr-only class instead of normal button element and don't forget to add label to every input radio button.
  • You can use javascript to handle the validations for the input type text. If you do this, then you have to check if the input value can be converted by a number or not. If it is, do the calculations otherwise just give an error message there. When providing an error message you can add aria-describeby to your input element with the same value to the id of your error message or to your span element. This will benificial to your audience who use screen readers.

  <div class="label-wrapper">
          <label for="bill-input" class="input__label">Bill</label>
          <span id="your-error" class="input__error-message">Can't be zero</span>
        </div>
   <input type="text" id="bill-input"  aria-describedby="your-error" class="input__field" placeholder="0" inputmode="numeric" pattern="[1-9][0-9]*\.?[0-9]*">
  

  More info about fieldset

  Marked as helpful

  1