Advice generator app using a public api

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Megan,

  Good work! The API works well and the designs match the mockup reasonably well. Just a few things:

  • Your button needs an accessible name for screen readers and assistive technologies
  • Locally host your Google fonts for privacy and performance reasons. Since you're using Tailwind, you can add them to your config file (either extending or overriding the current theme.) Just make sure to convert the downloaded fonts to woff2 first and remove the @import directive in your input.css Here's a link in the Discord channel where I've added more info on this Link
  • Your child elements are overflowing out of your parent container between the breakpoints 1024px and 1472px, because of the classes which have placed an explicit width of 33.333%. You might want to debug this on your end. Ideally, avoid placing fixed width values on your containers. Use max-width values with a width: 100% declaration and let the child elements occupy the space naturally.
  • I'd also suggest changing the color of the attribution text, as its very difficult to make out against the background, and subsequently isn't meeting background/foreground contrast ratio for accessibility

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Megan Kullu•180

  @MeganKulluPosted over 1 year ago

  Thank you for the valuable feedback Aman. I will implement the changes you have suggested, for the button element what element do you suggest I use instead because I have to have an inner text which is not needed since were are using an svg . @asbhogal

  1

  

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  @MeganKullu no problem :) for the button, the accessible name just needs to be added to the element itself using aria. Here's a good article on how to add this:

  Button Names

  Hope this helps

  0