Stuck with the random quote machine

Stuck with the random quote machine
0

#1

I got stuck with the Twitter button. I tried many ways to make it work but it did not work.
Can anybody help me with a simple solution?
My work is here http://codepen.io/Andrew1024/pen/PNpmvv


#2

You are using q variable in the twitter button listener, but you haven’t defined it, nor you have assigned a value to it.


#3

Apart from what @jenovs mentioned, the url you are using to post the tweet is not correct, this is the url you should be using instead - https://twitter.com/intent/tweet?text=


#4

I can not see the URL in your answer. Could you write it again, please?


#5

jenovs, but if I want to use tag q and everything that is inside it, how should I act?


#6

You need to replace q with jQuery like you did in $.getJSON only there you added to $("q") using html(data), here you need to retrieve from $("q").

Try .text().


#7

From my point of view it works now. And could you give me the correct URL?


#8

Try this as the twitter URL -

URL 1st part = http://twitter.com/intent/tweet
URL 2nd part = ?text=

Add the 2nd part of the URL to the first part in one line.

The reason I am posting it this way is that the software this forum is built with, for some reason, does not display the URL if it is in one line.

Ok, I’ll try posting the URL as an image file. Here goes -

After the text= part should be your variable in which you store the quote text for example.


#9

Your advice is working. And could you help me with the variable q? I do not understand why it does not work.


#10

You are very close to the correct answer.

Only one problem. Your statement - “var q = $(’#quote’).text();” is setting the variable q in the global namespace outside of any function (i.e. event handler function).

So when the script executes, in order of evaluation it correctly assigns the variable q. But at the time that it assigns it, your < q > element is empty and doesn’t contain any text. (since the user has not clicked on the “get quote” button - i.e. no quote has yet been retrieved).

Hence when you use “q” in your statement
> “$(’#tweet-quote’).click(function(){
> window.open(“http://twitter.com/intent/tweet?text=” + q);”

what happens is it uses the value stored in the variable “q” - which is blank. That is why you get an empty string as the result of your tweet.

You don’t need to save the text value of “#quote” in a variable.

You can simply use -

> $('#tweet-quote').click(function(){
>     window.open("http://twitter.com/intent/tweet?text=" + $('#quote').text());

Also, you can get rid of your var declaration if you want (i.e. remove the line “var q = $(’#quote’).text();” ) since you are not using “q” anymore.


#11

Can you look at my project again? something is wrong


#12

The way it’s right now you are missing one closing bracket ) at the end of the JS section.


#13

Now I have another problem. I don’t know why I can not change any property of h1 and p (like font-size and color). How can I fix it?


#14

Your h1 and p are inside a div with jumbotron class. To change properties for h1 inside jumbotron you put .jumbotron h1 into the css instead just h1. Or you can give the h1 it’s own id and then format that id.


#15

I think it is the final question :relaxed:. How to align jumbotron in the middle of the page?


#16

Set it’s left and right margins to auto.