My Challenge: Build a Random Quote Machine

JavaScript
1

Hi all,

I completed this challenge using create-react-app. Now I have a lot of issues bring it to CodePen:

I accomplished to set up everything correctly so that the React app gets rendered. But now the whole functionality is broken…

Any ideas?

Your code so far

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

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      quote: "",
      author: ""
    };
    this.handleMessage = this.handleMessage.bind(this);
    this.getQuote = this.getQuote.bind(this);
    this.createLink = this.createLink.bind(this);

    this.handleMessage();
  }

  componentDidMount() {
    const script = document.createElement("script");

    script.src =
      "https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js";
    script.async = true;

    document.body.appendChild(script);
  }

  getQuote() {
    let newQuote = {};
    let endPoint =
      "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand";
    fetch(endPoint, { cache: "reload" })
      .then(blob => blob.json())
      .then(
        dataObj =>
          (newQuote["content"] = dataObj[0].content) &&
          (newQuote["author"] = dataObj[0].title)
      );
    return newQuote;
  }

  handleMessage(event) {
    const currentQuote = this.getQuote();
    console.log(currentQuote);
    setTimeout(() => {
      console.log(currentQuote.content);
      this.setState({
        quote: currentQuote.content,
        author: currentQuote.author
      });
    }, 800);
  }

  createLink() {
    let baseLink =
      "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=";
    let currentQuote = this.state.quote;
    let regex = new RegExp(/(<p>)|(<\/p>)/gi);
    return baseLink + currentQuote.replace(regex, "");
  }

  render() {
    return (
      <div className="quote-box" id="quote-box">
        <h1>Quote Machine</h1>
        <div id="text" dangerouslySetInnerHTML={{ __html: this.state.quote }} />
        <br />
        <p id="author">Autor: {this.state.author}</p>
        <a className="button" onClick={this.handleMessage} id="new-quote">
          New Quote
        </a>
        <a className="button" id="tweet-quote" href={this.createLink()}>
          Tweet
        </a>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Quote Machine</h1>
        </header>
        <p className="App-intro">Let see what the day brings!</p>
        <Form />
      </div>
    );
  }
}

export default App;

Your browser information:

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

Link to the challenge:

2

This bit is what’s breaking it:

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

Those are import statements referring to other code that Codepen doesn’t know about. You need to use another way of getting access to React within Codepen.

3

Hi @Peritract,

Thanks for your answer. As you can see in Codepen I already removed it from the beginning. And actually everything the UI is being rendered but the functionality is broken.
The code I pasted is the one running on my machine.

Any other ideas?

Regards,

4

I opened up console to see the errors and I see two errors here.

Looks like because your api is using http and not https it’s being blocked and that’s why ‘currentQuote’ is undefined.

image

1 Like
5

That was the problem!

Thanks @shimphillip!

7

So lately, rather than sticking with codePen, I’ve been using my hosted dev server on codeAnywhere for my projects. I use create-react-app there, among other things.

Have you simply imported the bundle.js indicated on the project page?