Need help with Random Quote Machine project

Need help with Random Quote Machine project
0

#1

Please I need corrections; there are many things I think I didn’t do well on my Random Quote machine; twitter for instance - what should I do?
Project Link - https://codepen.io/Perkyprince/full/YeYbyq/


Random Quote Generator - Feedback
#2

I moved your question to a new topic, because you have questions about your own project instead of giving feedback to the OP’s project.

Can you describe each thing you want help with? For each issue you are having, make sure to describe what you want to happen versus what is actually happening that you do not want.


#3

Hi PerkyPrince,

In the js code you are using 2 jQuery functions ($() and attr() below) to change the twitter button href attribute:

$('.twitter-share-button').attr('href', tweetQuote);

Since your page does not have the jQuery library added to it, using these functions throws an error. You can see the error in developer tools in your browser (ctrl+shift+i and switch to “console”):

image

To fix this, you have to either replace the jQuery functions with javascript, e.g.:

document.querySelector('.twitter-share-button').setAttribute('href', tweetQuote);

or add jQuery to your page/pen. In codepen you can do this very easily via your pen’s Settings: https://blog.codepen.io/documentation/editor/using-javascript-libraries/

For more on jQuery basics see: https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery

Also, when generating the tweetQuote string, first remove the <br> tag, then encode the string using encodeURIComponent(), like this:

var tweetQuote = tweetQuote.split('<br>').join('');
tweetQuote = encodeURIComponent(tweetQuote)

otherwise various punctuation marks, etc may cause issues.

You can also remove the <br> tag using the replace() method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

2 sidenotes:

  • You don’t have to put the first quote and twitter link in your HTML code. Just execute the newQuote() function right after you define it in JS.
  • Placing the quotes array at the top of your code would be better practice

Hope this helps!