Front End Development Libraries Projects - Build a Random Quote Machine

Tell us what’s happening:
Describe your issue in detail here.
I can’t get the test cases to work, but my code really accomplishes the conditions. What am I missing?
Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/116.0

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

Hello there. I believe the issue is related to how Codepen handles React in general. It seems like your code isn’t being mounted. I’d recommend creating an app div on the webpage like this:

<div id="app"></app>

then adding the following to your Javascript.

React.render(<myApp />, document.getElementById('app'));

Additionally, you can’t use NPM packages here. All the imports need to disappear and be handled as external scripts because Codepen is set to use Babel to compile your React application.

Once that issue is resolved , you’ll have an application that loads. Some slight touching up will need to be done more than likely but it should be relatively simple.

Happy learning. :slight_smile:

Please post a working example when asking for help. Using Stackblitz or Codesandbox makes it easier to transfer local code as they use the same format.


#new-quote button is not a child of #quote-box

This is true, #new-quote is not inside #quote-box

#tweet-quote element is not a child of #quote-box

This is true, #tweet-quote is not inside #quote-box

The #tweet-quote element does not utilize the correct twitter intent expected ‘Some App URL’ to include ‘twitter.com/intent/tweet

Read the requirments

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.

The #quote-box wrapper element should be horizontally centered.

container-fluid is full width, and so is #quote-box. Full-width elements can’t be centered as they take up the full width.

Yes I do know that container-fluid is full width and I am going to fix it, but anyways, not a single case works and at least the ones you said should.

I tried that, but it seems I can’t create a stateful component with a class then. Do you know any other solution?

That is objectively not true. Please look at the following example. Notice how it is a stateful component, more importantly using a class.

You can search for external libraries over here. When you get the location and add them, you will be able to have the same variables without all the imports written in your code.

Yes I got your message wrong. Now its clear. Thank you.