My Random Quote Machine with added bonus

My Random Quote Machine with added bonus
0

#1

Hi fellow campers,

Here is my Random Quote Machine:

https://codepen.io/johancleve/pen/prKREy

I’ve added as a bonus the ability to click the author of the quote to do a google search on him/her.

Happy coding!


#2

Great job with the design, and good idea for the extra functionality (Googling the author is often the first thing I do after seeing a good quote)!

Couple of things that could be improved in your code:

  • Use encodeURIComponent() for URI components (such as what you’re putting in your Google and Twitter URLs).
  • At the moment, your code is very WET. Put all the quote generation stuff in a function and DRY it up.

#3

Hey. I always like your designs, good job!

You could try and make the links (your name and freeCodeCamp) a little more visible, they almost merge with the background as it stands. Also, i would make the whole tweet div clickable, making it easier to click instead of having to hover on the text by itself.


#4

Thanks a lot for the advice.

I’ve changed the page according to your suggestions and made the following changes:

  1. I’ve made the code more DRY. You think this is ok or could it be more DRY?
  2. The whole ‘Tweet This Quote’ div can now be clicked.
  3. The link for my name and for freeCodeCamp is now easier to read.

I tried to use encodeURIComponent(), but this gave me some trouble. Codepen couldn’t handle the links.


#5

Much better!

You could have the anchors in your HTML and then just fill the necessary informations of those same anchors, without changing the html everytime.

As an example for your setName function:

JS

var setName = function(name) {
  var url = 'https://www.google.be/search?q=' + encodeURIComponent(name);
  $("#name > a").attr('href', url).text(name); 
};

HTML

<div class="col-md-4 mx-2 text-center quoteStyle" id="name"><a href="" target="_blank"></a></div>

Also, as an advice, you can remove the twitter button <script> and the class “twitter-share-button” from the anchor. Just add this https://platform.twitter.com/widgets.js in your javascript files and it will work the same. Lastly, twitter intent has a “hashtags” query paramater as well, so you don’t need to add the hashtag symbol yourself.