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/
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”):
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!