Help with Random Quotes Machine

1

Hi guys,

I’m trying to practice “functional” programming with the quotes machine project. Below is my codepen, and the issues I’m having:

I’m not sure how to trigger the Twitter button properly. Is the click handler in the right place? I’m not sure if passing the author and quote from the getQuotes function is proper organization.

Also it seems like I’m calling the buttons.tweet function every time the page is loaded, or I request a new quote. You can see this in action in the console. It keeps calling buttons.tweet even when the button isn’t clicked.

Lastly, I’m stuck with the twitter url. I can’t seem to put in double quotes, and escaping it properly. I assume I have to use window.open once the url is organized.

Thanks in advance! I would put this in the Project Feedback, but since it’s not finished, I feel like this is the appropriate forum(?)

2

You need to make your tweet button an anchor tag that has a href attribute with the value of the url you have constructed.

You can apply the button class to the anchor element.

1 Like
3

AH Thank you! :smiley: this works now

Do you have any insight on how to not make the buttons move when a new quote is shown? I believe it moves because the elements above the buttons are removed from the DOM – but I would like to make it stick if that’s possible heh…

4

Yeah, HTML is just a bunch of boxes in boxes essentially.

The size of the box that is collapsing is dependent on the content inside of it, at the moment.

You will have to set the element that contains the quote and your buttons to a fixed size, or remove the buttons from your quote box and put them in their own space below.

Add the css

.content {
  height: 300px;
}

That should give you roughly what you want.

1 Like