Random Quote Machine - Sean Medlin

Code Feedback
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.

1 Like
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:
poor_color

1 Like
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

1 Like