Your quote generator “works” in the sense that it accomplishes what it is supposed to, but not in a way that it can be tested - or at least not in the way that the FCC test works. We could debate the fairness of, but this is sometimes how web dev is - sometimes you have do not just what the specs say very specifically to do, but also how they say to do it.
The instructions say:
-
User Story #10: I can tweet the current quote by clicking on the
#tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in it’s href attribute to tweet the current quote.
It is saying that the complete url for the tweeting must be in the anchor tag. You didn’t solve the problem that way, you did it with a click handler. This is a perfectly reasonable way to handle the problem, but is not what you were told to do.
Your anchor is:
<a id = "tweet-quote" href = "#">Tweet Quote</a>
The test looks at that id and sees that it is not what it is expecting.
- I can tweet the current quote by clicking on the #tweet-quote element. This element should include the “twitter.com/intent/tweet” path in it’s href attribute to tweet the current quote.
The #tweet-quote element does not utilize the correct twitter intent : expected ‘https://s.codepen.io/boomerang/iframekey-29c51022-e3f7-8b01-1a71-7fd7835234b7/index.html#’ to include ‘twitter.com/intent/tweet’
AssertionError: The #tweet-quote element does not utilize the correct twitter intent : expected ‘https://s.codepen.io/boomerang/iframekey-29c51022-e3f7-8b01-1a71-7fd7835234b7/index.html#’ to include ‘twitter.com/intent/tweet’…
The simplest way to do this is to not use a click handler for the tweet, but when you generate the quote your function getQuote, to also use jQuery to change the href in that element.
For example, if I wanted to make that button open up google, I would do:
$("#tweet-quote").attr("href", "http://google.com");
That goes out into the DOM and overwrites the href of that element so it points to where I want it to go. jQuery explains it here.
The other thing you’ll need to do is give that element and attribute of target = "_blank". This is peculiar to codepen and is necessary if you want it to open up a new window. Without it it will pass the test but not work physically as expected.
The last thing I might suggest is to call getQuote as the last thing in your $(document).ready callback. This is not necessary to pass the test, but that way the tweet button has something to tweet if they press it before getting a new quote.
When I make these changes, your app passes the tests.
I know it’s frustrating, but a big part of web dev is paying attention to small details. And sometimes the specs expect you to do things that you don’t think are the “best” way.