Can't get CodePen to work with task: Build a Random Quote Machine

JavaScript
1

Tell us what’s happening:
I’ve built the app in VScode using create-react-app, and it works well locally, but I’ve tried to get the same code work in codepen for a couple of hours now but can’t figure out why it isn’t working. Could somebody help me out how to display my code in codepen? I would like to test out does my project match the requirements but I’m having a hard time figuring out what’s wrong.

My codepen setup can be found here:

Your code so far

import './App.css';
import { Button, Alert, Container, Row, Col } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'; // This is important too
import React, { Component } from 'react';
import { useState } from 'react';

const quotes = [
  "Doublethink means the power of holding two contradictory beliefs in one's mind simultaneously, and accepting both of them.",
  "Power is in tearing human minds to pieces and putting them together again in new shapes of your own choosing.",
  "One does not establish a dictatorship in order to safeguard a revolution; one makes the revolution in order to establish the dictatorship.",
  "Can you not understand, Winston, that the individual is only a cell? The weariness of the cell is the vigour of the organism. Do you die when you cut your fingernails?",
  "2 + 2 = 5",
  "War is peace",
  "Freedom is slavery",
  "Ignorance is strength",
  "Who controls the past controls the future. Who controls the present controls the past.",
  "If you want a picture of the future, imagine a boot stamping on a human face—for ever.",
  "I enjoy talking to you. Your mind appeals to me. It resembles my own mind except that you happen to be insane.",
]
const author = [
  "George Orwell",
  "George Orwell",
  "George Bush"
]

const App = () => {
  const [index, setIndex] = useState(Math.floor(Math.random() * quotes.length));
  const [quote, setQuote] = useState(quotes[index])

  const updateStates = () => {
    console.log(quote)
    setIndex(Math.floor(Math.random() * quotes.length))
    console.log(quote)
    setQuote(quotes[index]);
    console.log(quote)
  }

  return (
    <Container>
      <div className="quote-box">
        <h1> Ninteen Eighty-Four Quote Machine</h1>
        <p className="text" id="text">{quote}</p>
        <p>{author[Math.floor(Math.random() * author.length)]}</p>
        <p id="author"></p>
        <Row>
          <Col>
            <a id="tweet-quote" class="twitter-share-button"
              href={"https://twitter.com/intent/tweet?text=" + quote}><Button className="newQuote" variant="dark">Twitter</Button></a>
          </Col>
          <Col>
            <Button id="new-quote" onClick={updateStates} className="smButton" variant="dark text-right">New Quote</Button>
          </Col>
        </Row>
      </div>
      </Container>
      );
}

      export default App;


import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root')); // Render the entire application into the div with an id of 'root'

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


* {
  background-color: #1a1a1a;
  color: white;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.quote-box {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  border: 5px solid crimson;
  padding: 15px;
  transform: translate(-50%, -50%)

}

/*
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}
*/

.App-link {
  color: #61dafb;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Random Quote Machine</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div> <!-- All React components are going to get inserted here-->
</body>

</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

2 
import './App.css';
import { Button, Alert, Container, Row, Col } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'; // This is important too
import React, { Component } from 'react';
import { useState } from 'react';

These won’t work. First of all, your CSS is already imported. And whatever you setup in settings -> JS for libraries will be automatically imported. You can’t import them locally because they don’t exist. Where have you imported react and react-dom into the project? You need to do that in the settings?

CP has its own way of doing things, to simplify them for beginners. You have to do it the CP way. It’s convertible, it just takes a little work.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.