I have passed all the tests for the ‘Build a Random Quote Machine Challenge.’ I still have yet to style it, but I want the JS to work first. Here is a link to my codepen project: https://codepen.io/critchey/pen/wvrLGdM
There have been two issues:
- I was in the process of adding real quotes, instead of placeholders, and noticed that each time I add a quote over a small character limit it no longer renders to the screen. In an attempt to troubleshoot I added some jarring colors to see if the element’s container size was too small. That, nor padding or margin size were the culprit.
- Initially, I wrote out all of the HTML elements with their ids required to pass the test within the JXS, which is within a Redux React Component. Whenever code was tested it didn’t pass any of the tests that require ids or hrefs within certain elements. In order to pass I created duplicated HTML elements within the HTML area in codepen. Does the test not allow for JXS, because it doesn’t seem to register that it is there? Am I missing something?
My HTML:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
/>
<div id='quote-box'>
<p id='text'/>
<p id='author'/>
<button id='new-quote'/>
<a id='tweet-quote' href='twitter.com/intent/tweet' target="_blank"/>
</div>
My CSS:
#quote-box {
width: 100%;
height: 100%;
background-color:blue;
padding:0;
margin:0;
}
#text {
background-color:red;
padding:0;
margin:0;
}
My JavaScript
//Redux:_________________________________________
//Actions
const CHANGE = 'CHANGE';
const changeQuote = () => {
return {
type: CHANGE
}
};
//Quote Data
const quotesArr = [
{quote: 'Test1', author: 'CJR'},
{quote: 'Test2', author: 'CJR'},
{quote: 'Test3', author: 'CJR'},
{quote: 'Test4', author: 'CJR'},
{quote: 'Test5', author: 'CJR'},
];
//Reducer
const quoteReducer = (state = quotesArr[0], action) => {
switch (action.type) {
case CHANGE:
return quotesArr[Math.floor(Math.random() * state.quote.length)];
default:
return quotesArr[Math.floor(Math.random() * state.quote.length)];
}
};
//Redux Store Declaration
const store = Redux.createStore(quoteReducer);
//React:__________________________________________
//Declarations for easy Redux-React
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;
//React Components
class quoteCycler extends React.Component {
constructor(props) {
super(props);
this.changeButton = this.changeButton.bind(this);
}
changeButton() {
this.props.getNewQuote(this.state);
};
render() {
return (
<div>
<h1>Find a New Inspirational Quote</h1>
<p id='text'>Quote:{this.props.currentQuote}</p>
<p id='author'>-{this.props.currentAuthor}</p>
<button id='new-quote' onClick={this.changeButton}>New Quote</button><br/>
<a id='tweet-quote' href='twitter.com/intent/tweet' target="_blank"><i class='fa fa-twitter'/></a>
</div>
);
}
};
//Redux-React Mapping & Wrapping
const mapStateToProps = (state) => {
return {
currentQuote: state.quote,
currentAuthor: state.author
}
};
const mapDispatchToProps = (dispatch) => {
return {
getNewQuote: () => {
dispatch(changeQuote())
}
}
};
const Container = connect(mapStateToProps, mapDispatchToProps)(quoteCycler);
class AppWrapper extends React.Component {
render() {
return (
<Provider store={store}>
<Container/>
</Provider>
);
}
};
//Render React
ReactDOM.render(
<AppWrapper/>, document.getElementById('quote-box')
);
Browser Info:
User Agent is: Chrome/97.0.4692.71 (Official Build) (64-bit)
Challenge:
Build a Random Quote Machine
Link to the challenge:
