Random Quote Generator with React

Please can I ask for some help? I am quite new to this and still getting my bearings… So I thought it would be good to practice React for this project. When I run the tests I occasionally get all of the tests passing, and sometimes I get stuck at User story #6, #7 & #9. When I test the generator I can see that it is working so I am not sure why these tests sometimes do not pass. I get a different outcome each time I run the tests, I’ve even managed to get it with all tests passing once… My project is linked below. Thanks for your help!

User Story #6: On first load, my quote machine displays a random quote in the element with id=“text”.

User Story #7: On first load, my quote machine displays the random quote’s author in the element with id=“author”.

User Story# 9. My quote machine should fetch the new quote’s author when the #new-quote button is clicked and display it in the #author element.

Also , can anyone advise how I can tweet the current quote? (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 its href attribute to tweet the current quote. ) I’ve patched through this one but out of interest would like to know how to do this for future ref.

Thanks!!!

Your browser information:*

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

I’ve run the tests a dozen of times and they all passed without any problems :wink:

To tweet a quote we have to use Twitter API.
In this link they describe in details how to go about tweeting some text but in short what we need to do is to construct a special URL.

First we’re going to have a base URL

https://twitter.com/intent/tweet

Then we have to concat this URL with additional parameter, in our case it’s going to be text.

https://twitter.com/intent/tweet?text=

And here we have to add the text that we actually want to tweet so our quote but we cannot just paste the text here. We have to use what’s called URL Encoding.

w3schools:
URL encoding converts characters into a format that can be transmitted over the Internet.

So finally we should have something like this:

https://twitter.com/intent/tweet?text=${encodeURIComponent("quote-text")}

And this is the url that you should pass to href of your link.

Sorry if this explanation is not 100% clear but I was just learning about this couple of weeks ago so I’m not an expert but I hope that at least it’s going to give you an overall idea :slight_smile:

2 Likes

Thank You that’s really helpful! I tried Google-consult but i guess the search terms were too broad!!

I wonder if there is something with the settings on my browser then… but I’m glad it’s passed and ready to submit! :slight_smile: