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:
https://gabehaus.github.io/ReactQuotes3/
Thanks : )
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.