My project is done and published!
http://tired-veil.surge.sh/
But it wont pass the following:
User Story #10: I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the “twitter.com/intent/tweet” path in it’s href attribute to tweet the current quote.
I am using webpack, react, redux, babel, axios, some other packages
Here is the relevant component:
Your code so far
class QuoteBox extends Component {
componentDidMount() {
this.props.getQuote();
}
onQuoteClick() {
this.props.getQuote();
}
// onTwitterClick() {
// window.open(`https://twitter.com/intent/tweet?text="${this.props.quote}" - ${this.props.author}`);
// }
render() {
const twitterLink = `https://twitter.com/intent/tweet?text="${this.props.quote}" - ${this.props.author}`;
return (
<div className='border border-primary rounded' id='quote-box'>
<h6 id='text'><i class="fas fa-quote-left fa-lg"></i>{this.props.quote}<i class="fas fa-quote-right fa-lg"></i></h6>
<p className='text-muted' id='author'> - {this.props.author}</p>
**<a href={twitterLink}><button className='btn btn-outline-danger' id='tweet-quote'><i class="fab fa-twitter-square fa-2x"></i></button></a>**
<button onClick={this.onQuoteClick.bind(this)} className='btn btn-outline-secondary' id='new-quote'>New Quote</button>
</div>
);
};
}
function mapStateToProps({ quote, author }) {
return { quote, author };
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ getQuote }, dispatch);
}
export default connect (mapStateToProps, mapDispatchToProps)(QuoteBox);
It does what it is supposed to. I even changed it - I was using a function before. Is it alright if I submit this anyway?
The challenge says to make all tests pass.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine