My Quote Machine - Your Thoughts?

Code Feedback
1

Hello everyone,

Here is a link to my Random Quote Machine on codepen: https://codepen.io/L51332/pen/pWpLbX
I was hoping I could get some feedback about the project.

Do you like the interface?
Does the code seem to be reasonably well written?
Do you have any other thoughts about it?

I would really appreciate any feedback I can get about it.

Thanks,

  • Alex
2

You need to make it responsive, because it does not look good on a mobile device or smaller width screen:

image
image429×560 20 KB

As far as the code goes, it seems fine. Since you were going with a minimalist approach, why not take it a step further by rewriting your $.get call as:

     $.get('https://random-quote-generator.herokuapp.com/api/quotes/random', function(data){
        var quote = data.quote;
        var author = data.author.length ? data.author : 'unknown';
        $('#quoteDisplay').html('<p id="quoteText">' + quote + '</p><p id="authorText"> ' + '- ' + author + '</p>');     
      });
   });

Finally, why not have a quote load when the page first loads?

3

Thanks for the insights. You’ve made very good points and I really appreciate it a lot. I will make sure to make the appropriate changes. I think this will be a good opportunity for me to practice CSS media queries.

4

Your buttons don’t look very buttoney.

Consider how buttons usually look:

  • Font size is similar or slightly smaller than body text
  • When you hover over them, something changes to indicate that they’re clickable (background color, border color, your cursor, or some combination)
  • Often, clicking them shows yet another state (e.g. appearing as if the button has been depressed)

Consider using the CSS pseudo-classes :hover and :active to implement some of these effects.

5