Build a Random Quote Machine - none passed?

1

Tell us what’s happening:
Hi all, I think for this project I did user story #1- #10 and only didn’t do #11. I am writing this on local machine (I started a react-app and wrote everything in App.js). However, when I copy and paste the code to codepen and run test, I failed all unit tests. Could you all please help me with the problem? Thanks! It works when I’m using my local host.

Your code so far

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      num : 0
    }
    this.generateNewQuote = this.generateNewQuote.bind(this);
  }

  generateNewQuote() {
    this.setState({
      num : Math.floor(Math.random() * 5)
    });
  }

  render() {
    return (
        <div id ="quote-box">
            <div id="text">{text[this.state.num]}</div>
            <div id="author">{author[this.state.num]}</div>
            <button id="new-quote" onClick={this.generateNewQuote} >New Quote</button>
            <a id="tweet-quote" href={"//www.twitter.com/intent/tweet?text=" +
                text[this.state.num] + " " + author[this.state.num]}>Tweet quote</a>
        </div>
    );
  }
}

const text = ["The fall of dropping water wears away the Stone.","There are three things you can do in a baseball game. You can win, or you can lose, or it can rain.","Believe and act as if it was impossible to fail.","Televesion is the chewing gum of the eye.","Creativity is allowing yourself ot make mistakes. Art is knowing which ones to keep."];

const author = ["- Lucretius","- Caset Stengel","- Charles Kettering","- Frank Lloyd Wright","- Scott Adams"];

export default App;

Your browser information:

User Agent is: Version 70.0.3538.102 (Official Build) (64-bit).

2

do you have a link to your codepen?

3

It wouldn’t let me do link but here it is mkmwong/pen/BvxXLG

4

Not sure what you mean by ‘It wouldn’t let me do link’, but I pulled up your code pen, do the following:

  1. Go to settings in your codepen file and in the javascript section, search and add React and ReactDOM. Also delete the testing script tag from your HTML page and add the test link as a resource in your javascript settings as well.
  2. Go to your html page and add a div tag for react to render to , example : <div id="root"></div>
  3. Delete all import statements in your js file, they will not work in codpen unless you are exporting something that is being imported, which you are not. Instead, at the bottom of your js file render your component using reactDOM that you added earlier, example : ReactDOM.render(<App/>,document.getElementById('root'))

Doing the above should get 8/12 of the tests passing, good luck with the rest.

5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

6

Sorry I meant that freecodecamp won’t let me post link because I am new. Thank you so much for your help - I’ve just passed all the test!