Ask for feedback for Front End Project 1 Quote Generator with React

Code Feedback
1

Hi there,

I completed project 1 of the Front End library using React only, and I wanted to get some feedback on the use of React, mainly the logic of it, and if components are created correctly.

Here is the code:

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const api_link = 'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json'

class Quote extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      msg: [],
      randomIndex: Math.floor(Math.random()),
      quote: '',
      author: ''
    };
    this.changeQuote = this.changeQuote.bind(this);
  }
  
  changeQuote(){  
    this.setState({
      randomIndex: Math.floor(Math.random()*this.state.msg.length),
      quote: this.state.msg[this.state.randomIndex]['quote'],
      author: this.state.msg[this.state.randomIndex]['author']
    })
  }
  
  componentDidMount() {
    //document.body.style.backgroundColor = "red"
    fetch(api_link, {
      headers : { 
        'Accept': 'application/json'
       }
    })
      .then(response => response.json())
      .then(data => this.setState(
                                   {randomIndex: Math.floor(Math.random() * data.quotes.length),
                                   msg:(data.quotes),
                                   quote: data.quotes[this.state.randomIndex]['quote'],
                                   author: data.quotes[this.state.randomIndex]['author']
                                   },))
  }

  render() {
    var twitterUrl = "https://twitter.com/intent/tweet?hashtags=quotes&text=" + encodeURIComponent('"' + this.state.quote + '" -' + this.state.author)
    return(
    <div id="wrapper">
        <div id="quote-box">
          <h3 id="text">{this.state.quote}</h3>
          <p id="author">- {this.state.author}</p>
          <button id="new-quote" onClick = {this.changeQuote}>Change Quote</button>
          <a id="tweet-quote" href={twitterUrl}>Tweet</a>
        </div>
    </div>
  )}
}

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

Thanks

2

Can you give us a link to a working version?

4

Yep here it is!

Thanks!

5

So ya, you did enough to pass all the tests but I wouldn’t say you really completed the project (feels a bit unfinished to me). If all you care about is the JS code then I guess you should be content with what you have.

I will point out that the only heading you have on the page is an h3. Generally you want to start with an h1. What was the reason you chose an h3?

Also, this feels like a <blockquote> would be appropriate here. Check out how MDN marks up a blockquote.

6

Thanks Bruce!

For sure it is not finished, I wanted to get the logic React part right first and then focus on the design portion of it. Thanks for the blockquote and H1 suggestion!

7

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