Random Quote Machine - Sean Medlin

All feedback is welcomed! https://codepen.io/Medlinator/full/jLwZrK

Hi, I like your use of color shifting animations, it makes the page more vibrant! One tiny aesthetic thing I might suggest is having the twitter button turn blue on hover instead of the delay thing it does right now.

1 Like


Avoid using ids in CSS. Use classes for styling and ids for JavaScript. Also not a big fan of !important.

If you replace

width: 600px;


max-width: 600px
width: 100%;

you’ll app become somewhat responsible.


You can re-factor this:

randomQuote = '"' + post.content + '" - ' + post.title;
randomQuote = randomQuote.replace(/<\/?[^>]+>|\\n/gi, '');
randomQuote = randomQuote.replace(/&#(\d+);/g, function(match, dec) {
  return String.fromCharCode(dec);

into this:

const quoteText = $('#quote-text');  // remember quote-field
quoteText.html(post.content);  // add quote to quote-text. It'll convert brackets and entities.
randomQuote = '"' + quoteText.text() + '" - ' + post.title; // quoteText.text() will get text-only from quote-text

If you try to tweet a quote containing some special character (like ;) it gets cut off. Look into encodeURIComponent()

Sometimes your generated color will be just too light:

1 Like

Thank you for the suggestion! I’ll be implementing it soon :slight_smile:

Thanks for the feedback! I was just thinking about updating it you make it mobile friendly. Would it be smarter to just implement the bootstrap grid system?

It would be smarter to implement CSS Grids

1 Like