Tip Calculator App

Community feedback

• 

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  Hi, The solution looks good. I'd suggest the following additions to your HTML structure and CSS, as follows:

  • <img src="images/logo.svg"> try and add the following attributes aria-hidden="true" since the logo is purely decorative and will help screen readers to skip it. Also the addition of the alt="" will be good pratice.

  • <button>5%</button> include the type="button".

  In additon to the other CSS properties add to the .calculator class the following:

   .calculator {
     max-width: 75%;
     margin: 0 auto;
  }
  

  The above will give a nicer look to the calculator not allowing the overall width to expand too much.

  • Lastly, it'd be nice to look into using semantic HTML like for example wrapping your <img> tag in a <figure> tag as this provides more meaning to screen readers.

  Hope the above helps!

  Wonderful work!

  Best of luck with your coding journey!

  0