So i build entire project in Visual Studio Code, I tested it on Chrome and Explorer and it works, it retrieves a new quote and an author with the press of a button, great i thought time to put it into codepen, nope, doesn’t work. Here is what happening, i am using http://quotesondesign.com/api-v4-0/ to get my quotes, when you put this into a browser you see what it retrieves
http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1
the problem seems that on firefox if you enter this you will get a quote, however, if you enter the same link(note that not refresh the page but use the same link) you will get the same quote, in chrome, however, it will give you a new quote, sooooo i tried to see if it would work if I used codepen on chrome, and it didnt work at all because on chrome codepen the api call wouldnt even retrieve any data. here is a function i a using right now.
componentDidMount(){
fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1')
.then(response => response.json())
.then(data => {
if(data[0].content && data[0].title && data[0].link){
let {quote} = this.state;
let quoteData=data[0];
quote.content = quoteData.content;
quote.link = quoteData.link;
quote.title = quoteData.title;
this.setState({
quote,
isLoaded:true
})
}
else{
return console.error('No Quote :(')
}
// console.log(data);
})
}
my button function is pretty much the same.
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0
.
Link to the challenge: