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.
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.
<a id="tweet-quote" href="twitter.com/intent/tweet"> Tweet Quote </a>
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:
Hi @ankurchaulagain !
You wrote a whole bunch of questions so hopefully I can answer them all
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
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
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.
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
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!
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?
Looks like you can
If that doesn’t work, then you can just add it manually.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.