Random Quote Machine - Project Feedback

Here’s my codepen. Constructive criticism much appreciated! Thanks!

A few suggestions:

#1) Because your variable names for the elements you reference which have ids use the same id name, you actually do not need all of these:

var box = document.getElementById("box");
var quoteBox = document.getElementById("quoteBox");
var fontBtn = document.getElementById("fontBtn");
var quoteBtn = document.getElementById("quoteBtn");
var colorBtn = document.getElementById("colorBtn");
var quote = document.getElementById("quote");
var quoteName = document.getElementById("quoteName");
var tweetBtn = document.getElementById("tweetBtn");
var currentFont = document.getElementById("currentFont");

#2) You have a mix of vanilla JS and jQuery throughout your code. I suggest sticking with jQuery syntax, since you are using it more in your code.

#3) When the Go button is clicked, a call is made to the API and then a response comes back. This takes 0.5 to 1 sec each time. When the response comes back, you are doing a fadeout and fade back in of the new quote. I believe the default amount of time for both fadeout and fadein methods is 0.4 seconds. So, on some quote retrievals, it takes up to 1.4 seconds before the old quote fades away. I suggest starting the fade as soon as the button is clicked and then fade back in when the quote is retrieved. This will provide a better user experience. There were a couple of times where it took almost 2 seconds before the current quote started to fade. It makes it seem as if the app is not working correctly, even though nothing was wrong.

Thanks a lot! I was wondering why the new quote took so long to change.