Need help in submitting a react project created with node.js

So i created a project using node.js and i dont know know how to submit it using When i copy the same code from node to my pen in codepen it doesnt render the output. I have included all CDN’s in the codepen settings(react, react-dom). Please help!

import React from 'react';
import ReactDOM from 'react-dom'
import {Helmet} from 'react-helmet'
import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons"
import { faFacebookSquare } from "@fortawesome/free-brands-svg-icons"
import { faQuoteLeft, faQuoteRight } from "@fortawesome/free-solid-svg-icons"

const mainColor= ["#BDB76B", "#228B22", "#00FA9A", "#808000", "#6B8E23", "#008B8B", "#00BFFF", "#000080", "#7B68EE", "#FF00FF", "#4B0082", "#C71585", "#808080", "#2F4F4F", "#DAA520", "#800000", "#D2691E", "#778899", "#40E0D0", "#F0E68C"];
let index = Math.floor(Math.random()*20);

const QuoteBox = function(props){
    return (
      <div id="quote-box" className="container-fluid">
        <p id="text" style={{color: mainColor[props.randomIndex]}}>
		<FontAwesomeIcon icon={faQuoteLeft}/> {props.quotes[props.randomIndex].quote} <FontAwesomeIcon icon={faQuoteRight}/></p>
        <p id="author" style={{color: mainColor[props.randomIndex]}}>- {props.quotes[props.randomIndex].author}</p>
        <button id="new-quote" className="color" onClick={() => {props.onClick()}} className="btn btn-block" style={{background: mainColor[props.randomIndex]}}>New Quote</button><br/>
        <a id="tweet-quote" href={'"'+props.quotes[props.randomIndex].quote+'" -'+props.quotes[props.randomIndex].author} className="links" target="_blank">
			<FontAwesomeIcon icon={faTwitterSquare} size="3x" style={{color: mainColor[props.randomIndex]}}/>
		<a id="facebook" href="" className="links" target="_blank">
			<FontAwesomeIcon icon={faFacebookSquare} size="3x" style={{color: mainColor[props.randomIndex]}}/>

class Main extends React.Component{
		this.state = {
			quotes: [
        {quote: 'You either die a hero or live long enough to see yourself become  a villain.',
        author: 'Harvey Dent'},
        {quote: 'The greatest glory in living lies not in never falling, but in rising every time we fall.', 
        author: 'Nelson Mandela'},
        {quote: 'The way to get started is to quit talking and begin doing.', 
        author: 'Walt Disney'},
        {quote: "Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.", 
        author: 'Steve Jobs'},
        {quote: 'If life were predictable it would cease to be life, and be without flavor.', 
        author: 'Eleanor Roosevelt'},
        {quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.", 
        author: 'Oprah Winfrey'},
        {quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.", 
        author: 'James Cameron'},
        {quote: "Life is what happens when you're busy making other plans", 
        author: 'John Lennon'},
        {quote: "Spread love everywhere you go. Let no one ever come to you without leaving happier.", 
        author: 'Mother Teresa'},
        {quote: "When you reach the end of your rope, tie a knot in it and hang on.", 
        author: 'Franklin D. Roosevelt'},
        {quote: "Always remember that you are absolutely unique. Just like everyone else.", 
        author: 'Margaret Mead'},
        {quote: "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.", 
        author: 'Helen Keller'},
        {quote: "Whoever is happy will make others happy too.", 
        author: 'Anne Frank'},
        {quote: "Tell me and I forget. Teach me and I remember. Involve me and I learn.", 
        author: 'Benjamin Franklin'},
        {quote: "In the end, it's not the years in your life that count. It's the life in your years.", 
        author: 'Abraham Lincoln'},
        {quote: "Many of life's failures are people who did not realize how close they were to success when they gave up.", 
        author: 'Thomas A. Edison'},
        {quote: "Life is never fair, and perhaps it is a good thing for most of us that it is not.", 
        author: 'Oscar Wilde'},
        {quote: "Only a life lived for others is a life worthwhile.", 
        author: 'Albert Einstein'},
        {quote: "The purpose of our lives is to be happy.", 
        author: 'Dalai Lama'},
        {quote: "Love the life you live. Live the life you love.", 
        author: 'Bob Marley'}
			randomIndex: Math.floor(Math.random()*20)
    this.setState({randomIndex: Math.floor(Math.random()*20)});
					<style>{'body { background-color:'+ mainColor[this.state.randomIndex]+ '; }'}</style>
				<QuoteBox quotes={this.state.quotes} randomIndex={this.state.randomIndex} onClick={() => {this.generateRandomIndex()}}/>

ReactDOM.render(<Main/>, document.getElementById('root'));
<html id="root">
@import url('');
@import url('');
@import url('');

	position: relative;

  margin: 150px 0 0 -225px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 450px;
  border-radius: 8px;
  z-index: 1;
  background: #fff;

	font-family: 'Lora';
    font-size: 25px;

	font-family: 'Lato';
	font-size: 20px;
	text-align: right;

	font-family: 'Ubuntu';
	color: #fff;

	padding: 5px;


These are the 3 files (.html, .css, and .js)
How do i complete this same project in codepen??!

Hey Sherwin,

nice to meet you! :wave:

Can you elaborate on this? How did you build this NodeJS project?

Would be awesome to see your pen!

Looking forward to seeing your project.

Hey @miku86! Thanks for the reply.
So basically I installed all the required packages (react, react-dom, bootstrap, font-awesome etc.) using the npm package manager.

Then this is how i imported them into my JavaScrpitFile:

import React from 'react';
import ReactDOM from 'react-dom'
import {Helmet} from 'react-helmet'
import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons"
import { faFacebookSquare } from "@fortawesome/free-brands-svg-icons"
import { faQuoteLeft, faQuoteRight } from "@fortawesome/free-solid-svg-icons"

But apparently import doesn’t work in
So i tried using the cdn links in the settings of JavaScript
It still doesnt work though

This is what my original project looks like when i first created it with node.js and it works just fine as i want it to

Now i just wanna know how i can implement the same in codepen so that i can submit it on FreeCodeCamp

This is my Pen so far…

Alright, so you used npm to add the packages.

For React projects, I would use codesandbox and use the React Template in the Explore Templates section.

Then, you can click on Add dependency on the left section of your project to add packages like you would do withi node/npm.

If you got your project on Github, you can even create your project from there.

Appreciate the reply! So i used codesandbox and got my original project working as i wanted . Thanks alot
Can i submit this project on free code directly from codesandbox? And if i can how do i do it?

Hey! I figured it out. Thanks alot for suggesting codesandbox! Henceforth I’ll use this for my FCC Projects.
One last thing, how to run the tests with . It doesn’t appear in codesandbox like how it does for the projects in codepen

Hey there,

yeah, that’s a little bit confusing,
you have to add it here:


1 Like

Thanks alot! It worked.
I also tried adding it in <Helmet> in the React Component and it worked fine there too :+1:

    <script src=""></script>
	<style>{'body { background-color:'+ mainColor[this.state.randomIndex]+ '; }'}</style>

Anyway thanks alot for the help. Appreciate it :+1: :blush:

1 Like