Random Quote Machine Feedback Appreciated : )

Note - I used dynamic inline styling with conditions, that also changes when new quotes are pulled from the API, therefore I had to use forceUpdate() when the window resizes. I know this is not optimal code but I felt I had no choice.

Here is the app:


Thanks : )

  • You’ve removed the keyboard focus outline from the twitter link, which is an accessibility issue.
  • Very minor issue, there is a small delay in loading the background image when it first appears. It looks like you are using the same four images over and over, so when the page first loads you could preload all of them so they appear quickly when the user moves on to the next quote.

Thanks! I removed the focus on purpose because I don’t like how having one button constantly highlighted but the other not throws off the balance of the UI design.

I will think about how to pre-load the background images. I would love to get them to change faster.

Please check the border radius of your quote card, it looks nice in a portrait viewport, but ugly in a landscape viewport.

I’m using chrome v.80 on Mac OS 10.13.6

Instead of border-radius: 20%; use border-radius: 40px;

I understand your concerns about aesthetics but accessibility should not be sacrificed. You must make it clear to the keyboard user where the keyboard focus is on the page. You don’t necessarily have to use an outline but whatever you do it should be the same for both the reload button and the twitter link.

Thanks, I will consider your advice. I started with landscape view and thought that using this border-radius was more interesting than just using a simple rectangle. But if people think it is ugly I will reconsider.