Built my quote machine in my own environment, can't get it to work in Codepen!

Tell us what’s happening:
As the title suggests, on my local machine, my quote machine looks great, truly a labor of love. However, I’m trying to get it up on Codepen so that I can submit it, but the React I’ve written is not simpatico! I added the React external scripts, so I’m not sure what I’m doing wrong. Any advice would be highly appreciated!

Your code so far

My Project on Codepen

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

your link goes to the blank test. put a link to your code and i’ll be happy to take a look

1 Like

oops! Sorry about that! Here it is!

I think you have too much going on. Take a look at this codepen: https://codepen.io/bradleyboy/pen/OPBpGw?editors=1010
A lot of the imports are done in the JS settings instead of in the editor. You also won’t have the same directory structure. You’re looking for a button
// import Button from ‘./Components/button’;
but you don’t have a separate Components directory to access in codepen.
I didn’t try to convert your code but let me know if these ideas get you all the way there!

1 Like

You would have to use a Codepen project to do it the way you are. But you can only have one project on a free account and there are other limitations as well (like max 10 files).

I’d suggest using codesandbox or stackblitz for React projects.


1 Like

On codepen, you can’t do this.

import React, { Component } from 'react';
import './App.css';
import Button from './Components/button';

just copy and paste all your components in the JS window and remove all the above.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';
import { random } from 'lodash';

For the above three, include the CDN in settings .
Change class App extends Component to class App extends React.Component

export default App; won’t work in codepen. Simply add

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

at the bottom.
You have some funny tags in your html. Remove everything else and leave.

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

I removed some code preventing your project from displaying. You can check it Here. Hopefully it will give you ideas on how to organise your app on codepen.

1 Like

Thanks for the help everyone! I wound up going with codesandbox… these different environments are quite confusing!