Random Quote Machine Help. Really want to look at the solution. Also can't beleive I can pass all the tests without any logic in the code

[ankurchaulagain]

I thought the projects might be relatively easy/more doable than the first time I encounter it for me since I had built a heavy to do list app before but Initially I was totally lost, :

I was initially lost thinking where do I get the quotes and authors from like I don’t know APIs and stuff then I realized after reading some posts that I can use say an array of random quotes or now I think of it an array of objects with quote and author property.

Another question I have is where do I build all the components, it is in the JavaScript section of the Codepen right?

Do I have to import things to import anything like react and all for it work or does it work by default?

I used the create React app where everything was already set up to create my first to do list app but I am getting lost here can someone help me get started by telling me what are the things I need to do to begin building. in CODEPEN. I mean in VS code I could create all the ids into separate components right. How do I do in codepen? Keep rendering different things in different ids through get element by id. I really want to look at the solution code should I just to get started like not look at the logic but just the way things are set up?

Can’t believe I can pass all the tests with something like this.

<div id="quote-box"> 

  <div id="text">
  
  </div>
  
  <div id="author">
  
  </div>
  
  <button id="new-quote">
    New Quote
  </button>
  <a id="tweet-quote" href="twitter.com/intent/tweet"> Tweet Quote </a>

</div>

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 OPR/78.0.4093.147

Challenge: Build a Random Quote Machine

Link to the challenge:

freeCodeCamp.org

[jwilkins.oboe]

Hi @ankurchaulagain !

You wrote a whole bunch of questions so hopefully I can answer them all

@ankurchaulagain

I was initially lost thinking where do I get the quotes and authors from like I don’t know APIs and stuff then I realized after reading some posts that I can use say an array of random quotes or now I think of it an array of objects with quote and author property.

For your first attempt, It is totally fine to just use an array of quotes.
That’s what I did.

Then you can go back and play around with fetch api.
There are plenty of tutorials on how to get data from an api.
Here is one from the react docs

@ankurchaulagain

I have is where do I build all the components, it is in the JavaScript section of the Codepen right?

For codepen, you can have your child components and parent on the same page since you are not alowed to create multiple files.

But also, I would personally suggest codesandbox.
That supports multiple files.

you can create your child components and then import them inside your app.js

@ankurchaulagain

Do I have to import things to import anything like react and all for it work or does it work by default?

You do have to modify some settings with codepen.
First choose, babel for the prepocessor.

then choose react and react dom

If you use codesandbox then you can just choose the react template.

@ankurchaulagain

I mean in VS code I could create all the ids into separate components right.

I don’t think you need a separate component for each id.
you can just have one child component for the quote logic and then nest that inside the app.js

In your html, make sure you add this

<div id="root"></div>

and don’t forget the render at the bottom in your javascript for codepen.

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

If you don’t feel comfortable setting all of that up in codepen, then just use codesandbox.

Hope that helps!

[ankurchaulagain]

Thank you. I will set up these settings in Codepen. I also have another question, do I use Bootstrap int he similar way that is search like React and React Dom?

[jwilkins.oboe]

Looks like you can

If that doesn’t work, then you can just add it manually.

[ankurchaulagain]

Thanks I just added it.

On the side note I was just intimidated when I saw the project. I completely forgot how almost all components in FreeCodeCamp was in a single page. Remembering that I am feeling much more comfortable now.

I am going to create each of the ids as a child components like new quote, text, author etc and container as a parent component in the Javascript section of Codepen. Hope this is one of the right way to do it.