Hi, It has taken me two full days to get this working, way too long, but I was determined to get it to work… feedback anyone can give on the JS/jQuery code would be awesome. I know it’s probably cringe-worthy. 
I have no prior coding experience to speak of.
There are a few TODO notes I’ve left at the bottom of the code:
// TODO: Try to figure out why the twitter button disappears after the first press of the quote button. Think it’s something to do with the way Twitter implements their widgets.js voodoo, as the code works if put directly into html.
// TODO: Shorten the twitter quote if > 140 chars including the author
// TODO: Try this with a quotes JSON api
// TODO: Refactor to remove some of the repetition?
Thanks,
Tim
You have such a limited pool of quotes right now that sometimes the same quote shows up twice (or more, in some of my tests) in a row, which then makes it seem like your button is randomly occasionally dysfunctional. (I actually thought it was randomly occasionally dysfunctional until I ran a quick console.log() test!)
You don’t have to use the Twitter share button on your site–you can also just create your own button and code it so that when the user clicks on it, it still goes to the same destination as the Twitter share button. (And voila! No iframes or things you don’t want!)
You also don’t need to put the Twitter share code in each of your two “sections,” and I would actually advise you not to get in the habit of doing things like that–it’s typically considered bad practice to have a lot of repetition in your code because that typically means you’re coding inefficiently.
Your code in general seems a little inefficient to me–you can accomplish the same thing in 2 relatively short .click() methods, one for the Twitter button and one for the quote button.
Also, this: “the twitter button disappears after the first press of the quote button” does not happen for me.
Thanks for taking the time to look Beth!
When you say you did a console.log test I’m interested to know what did that actually entail? I know how to use console.log but intrigued as to how you used it to set up a test?
I will definitely remove the Twitter stuff and code a button myself… I think it causes more trouble than it’s worth for now.
As I was coding it I got the feeling that it wasn’t quite right but couldn’t put my finger on why it felt wrong. I will apply the two .click() methods and see if I can improve it.
Interesting that the twitter button didn’t go away for you! it disappears and leaves just a Twitter text link for me. Tried on different browsers and on phone over the 4G network and was the same. Oh well, won’t be an issue once I remove the Twitter code.
Thanks Beth
I just added this line to the on clicking quote button section of the code: console.log(item);
So, every time you click the quote button, whatever quote is generated will be printed to the console. This allowed me to see if the same quote was being generated multiple times in a row (indicating the quote button is pulling a quote like it’s supposed to) vs. not being produced (indicating a dysfunction in the quote button).
I use the console.log A LOT when building things, because it allows you to see the exact output of your code, whether or not something shows up somewhere. In general, if you’re having issues, it’s helpful to console.log every step and see exactly where things are going wrong.
Oh, yes, I see what you were saying about the button–I didn’t realize that it existed before you click the quote. It disappears for me as well.
Oh yes, I see. I’ve recently started doing that. I had forgotten about keeping the dev tools open whilst I’m working; it does help a lot.
Thanks Beth.
1 Like