It looks fine, but you can simplify your code a bit.
In your success callback function of $.getJSON, you get back the array of objects in the json argument, so you do not need the following:
var string = JSON.stringify(json); var parse = JSON.parse(string);
Also, since json is an array, you can simplify getting a random index with the following:
var randomNum = Math.floor(Math.random() * json.length);
and then your quote and checkAuthor variable assignments become:
var quote = json[randomNum].quoteText; var checkAuthor = json[randomNum].quoteAuthor;
I like the concept of opacity changes between quotes. However, there are two things that seem to be out of place:
The extremely fast spinning of the New Quote button. To me, it should be slower to match the slow and easy transition of the opacity change between quotes.
Since the previous quote fades out, I think it would look better if the new quote faded in.
Apparently, I was somewhat confused by the purpose of these two methods (i.e., JSON.parse() and JSON.stringify()). Now, I understand that both are used for exchanging data to/from a web server (API) and not for accessing static JSON files.
Math.floor(Math.random() * json.length) makes more sense indeed. I’ve decreased the rotation speed of the New Quote button and it looks and feels much better now. As for the transitions, that’s exactly what it’s doing, not sure why you’re seeing it differently.
Your feedback has helped me relearn a few things. Thank you for taking the time to review it.
looks great @zreticulan, you really designed it well
Thank you, @jztsaurabh!