Oscar Wilde's Random Quote Machine - What do you think?

Code Feedback
1

Hi! Here is my Random Quote Machine. All the quotes are from Oscar Wilde! What do you think? :grinning:

Oscar Wilde Random Quote Machine

2

Good functionality, a few UI notes:

  1. It’s not a requirement, but the most common button (Refresh in your case) is often in the bottom-right, and is colored differently (like the reply button below posts in this forum). Your users (like me!) will automatically expect it there.

  2. That theme, tho. It’s got a lot of bright white space with very thin lines. While flat white sites are often in vogue now, your choice of font and thin borders make the user’s eyes work too much. Increase font weight or size (your heading is fine), thicken up those borders, or put a slightly less intense background on.

  3. This is nitpicky, and I see from your portfolio that you don’t design in English (Catalan?), but “Refresh” alone isn’t very informative. Maybe “Refresh Quote” or “Get New Quote”?

Nice job on all those sites, btw!

1 Like
3

Hi.

I think it looks nice.
The tweet and refresh button’s color are clashing in my opinion.
I would use the same color or more matching colors.

For secons, i notice you use a self defined array to get your quotes.
I would say to try and play around with a quote api.

1 Like
4

Thank you very much for your response @vipatron! Your comments are very appreciate for me.

  1. Thank you! You’re right. I also expect it here.
  2. Absolutely! I tried to emulate the new Material Design 2 design concepts that are appearing in Gmail, Tasks, etc… but you’re right. I fixed this. What do you think now?
  3. I opted to use Get New Quote. (Yes, I am from Catalonia).

Thank you very much!!!

Oscar Wilde Random Quote Machine (1.0)

5

Thank you @Manuuzzz. With the colors I tried to evoke the Twitter color, but you’re right. Now the color is the same of the main background. What do you think? :slight_smile:

About the implementation of an API! I’m very excited to implement it! Can you, please, send me a link with some information about how to start?

Thank you very much!

Oscar Wilde Random Quote Machine (1.0)

6

Much easier on the eyes now. I did notice this time around that, while using it, sometimes the “get new quote” button retrieves the same quote. I ran into the same issue on my project. You probably want a while loop that tests to make sure the random phrase you get with following line of code isn’t the same as what is already displayed:

$("#getMessage").on("click", function() {
  var i = Math.floor(Math.random() * (phrases.length - 1));

I did mine with React, not jQuery, but i’m sure you can figure it out. The UX when that happened was a moment of “did it work?” To test that it wasn’t happening once I wrote my while loop, I commented out my original quote (phrases) array, made it two quotes long, and ensured that they alternated. Good luck!

7

I think the colors are way better now.

For the API:
I used this API:
https://talaikis.com/api/quotes/random/

The goal is to retrieve random quotes via AJAX (xmlhttprequest -> you get a json file back as a result).
An example of my random quote machine (just check to source to get an idea on how to do it, i’m not experienced, so don’t take my code as if it is correct! )