tip calculator app with html, css and javascript

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Edy, I think you did a great job here, and everything works well for me!

  In terms for feedback, I just got a few things:

  1. I think you can try adding cursor: pointer on all the buttons, as this would be better for user experience!

  2. In your report you got some accessibility issues; one of them is that label is missing for the inputs. For inputs where you don't actually have text (like the custom one), you can add a label and then add a visually-hidden class (need to search for the CSS here!), and for labels where the text is seen, here's what you can try:

     <div class="input-label">
        <label for="input-people">Number of People</label>
        <span class="message-active-state"></span>
     </div> 
     <div class="input-box">
        <input type="text" id="input-people" class="input" value="0" required/>
        <img class="icon" src="./images/icon-person.svg" alt="" />
     </div>
     

  3. I suggest having a way to store the "custom" input because right now when I click on another tip button, I lose the custom input and I'd need to type it in again. Maybe some users just want to compare the tip amounts, so having the custom value stored would help with user experience!

  Marked as helpful

  0

  ---

  

  Edy•530

  @EvannyPosted about 2 years ago

  @elaineleung thanks for the suggestions, I will apply them in this and future challenges

  0