Random Quote Machine - Sean Medlin

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.



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:


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