Random Quote Machine - Sean Medlin

Random Quote Machine - Sean Medlin
0.0 0

#1

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


#2

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.


#3

CSS:

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;

with

max-width: 600px
width: 100%;

you’ll app become somewhat responsible.


JS:

You can re-factor this:

$('#quote-text').html(post.content);
$('#quote-author').html(post.title);
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.
$('#quote-author').html(post.title);
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:


#4

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


#5

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?


#6

It would be smarter to implement CSS Grids