Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Tell us what’s happening:

I created a React quote app using react and bootstrap. I also used puppeteer to scrape the quotes. The problem is, I have no idea how to submit the application. I tried code pen but using the html for the id’s seems counterintuitive for what React was designed for. I have a beautiful running app with all of the correct ids in the correct spots with quotes I scraped and styles implemented from bootstrap and color components for card styling. I kind of went a little crazy with the components. Nonetheless, I have a project that I am kind of proud of and am not sure how to submit it. I have it in a Git hub repo but that is the only place I have it, other than my vs code. How can I submit this project so I can move on to the next one?
Keep in mind, I have a QuoteCard.js file, index.js file, app.js file, app.css app.js file. I created this mess in the spirit of React for separate reusable code and components. None of the ways I have see allow you to submit the app without combining and eliminating most of what the purpose of the whole React project says it wants you to learn. No hurry on a response. I will be away from this till tomorrow.

Your code so far

I would paste all the code for this project here but there are so many different files it is likely to crash the entire eastern seaboard internet junctions. :rofl:

Your browser information:

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

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

2

Host it on Netlify, Vercel, Surge.sh, GitHub pages, etc.

Or use an online editor like Stackblitz or Codesandbox.

If you want to share your code on the forum post your GitHub repo.

Edit: Also, it sounds like you might have a misconception about how React code runs in production.

The React code as it exists in development is not what it looks like when deployed. It gets built and ends up as just plain HTML/CSS/JS which the browser can run, unlike a React app which the browser can’t run. This is a bit simplified, but for a SPA React app it is pretty much all there is to it.

1 Like
3

Thanks lasjorg,
Here is code pen link:

If you get time, can you take a look at this? I just changed everything from React to JavaScript. I had multiple JavaScript files requiring importing multiple components. Code pen doesn’t like importing these files unless they hosted somewhere. I now know I could have built this using esbuild and in the future, that is what I will use. For instance, I had a color.js file with a function to change the styling randomly with the new quote button press, and a quotes.js file with the scraped quotes array object. There were a couple of others there too due to trying to use Bootstrap with it. What I have in there now should pass based on the instructions. It passes 11/12; however, it fails being horizontally centered. Thank you in advance for any assistance you can provide.

4

You are centering the wrong element.

If you move the quote-box id to the element with the card class and it should pass.

5

That did it. Thanks so much!

1 Like