Random Quote Machine Help

JavaScript
1

I need help to find out why my code does fail the tests while I appear working so fine.
I designed it so it gives color names instead of quotes and changes background colors due to color name
it works so fine to me, so I can’t find out what I miss.
this is my code pen link: https://codepen.io/M-Nasr/pen/poZjQyg?editors=0110
this is the challenge link: https://www.freecodecamp.org/learn/front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine
Thank you all.

2

When I run the test, I see this:

When the #new-quote button is clicked, my quote machine should fetch a new quote and display it in the #text element.
Script error. (:0)
Error: Script error. (:0)
at r.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575: …

So, it’s not just that it’s failing that test - the code is throwing an error and crashing out of the test.

When I just run the app and look in the console, I see the same errors:

bundle.js:575 Uncaught Error: Script error. (:0)
    at r.onerror (bundle.js:575:14032)
r.onerror @ bundle.js:575
react-dom.production.min.js:144 Uncaught TypeError: document.getElementById(...).style.backgroundColor is not a function
    at App.submitQuote (pen.js:31:77)
    at Object.Th (react-dom.production.min.js:143:79)
    at Object.invokeGuardedCallback (react-dom.production.min.js:143:279)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:143:391)
    at Wd (react-dom.production.min.js:14:339)
    at Cg (react-dom.production.min.js:146:1)
    at Vg (react-dom.production.min.js:146:164)
    at Va (react-dom.production.min.js:15:125)
    at yc (react-dom.production.min.js:16:208)
    at Yd (react-dom.production.min.js:16:373)

So, the problem is not with the test, something is wrong with your code.

This line surprises the heck out of me:

document.getElementById(...).style.backgroundColor is not a function

In React, never ever manipulate the app directly.

Let’s say you have a lot of money and businesses and investments. You hire the best money and asset manager in the world. In order for her to do her job, you have to give her complete control and do all money actions through her. But you are running around, taking money out of accounts, selling stocks, buying properties … all without her knowing. And you expect her to be able to do her job well?

These lines should not be in your code:

    ReactDOM.render(
      (document.getElementById("body").style.backgroundColor = colorList[num])
      (document.getElementById("quote-box").style.backgroundColor = colorList[num])
    );

I don’t know why that is giving you an issue, but I don’t care - you shouldn’t be doing it anyway. In a React app, the only direct DOM manipulation/querying you should do is:

ReactDOM.render(
  <App />, document.getElementById("App")
 );

That’s it. I don’t know a single reason why you should need to manipulate the DOM directly in a React app, but I can think of some HUMONGOUS reasons not to do it.

You need to fix that. Those HTML elements should be inside your React code and you apply conditional styling to them through React.

3

I used this way to change background color of body element as body element can’t be inside React code. If there is a better way please explain to me.
Also I don’t know how to reach state property from outside the React component, I hope getting help with this too.
Thank you very much for your time and advices I really appreciate it.

4

If you had body inside your app, like:

const App = () => {
  const backgroundColor = 'white'
  return (
    <body style={{ backgroundColor }}>
      {/* ... */}
    </body>
  )
}

If you don’t want to or can’t do that, you can just use a div that takes up the whole screen, getting the same effect.

5

I found a way to achieve my design and pass the test following your advice.
I’m grateful to you.

6

Yeah, that looks better, good work.

7

The only thing I’d add is it would be more “React-y” to break that up unto sub-components. Try to think about that on your next project. I know this is small enough that you can get away with not doing this, but it will become important pretty quickly - it’s best to start developing those habits early.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.