Hello Campers!
I have finished my Random Quote Generator project and would really appreciate any feedback to improve my code. I am still working on adding more quotes to my quote bank. Here is a link to my project: https://codepen.io/myronhuang/full/NMGbXm/
Thank you all! Happy Coding!
Looks nice, but you have some design problems. The main content shouldn’t be “below the fold,” or your site should accept clicks to scroll to target. That’s what my “hallway” testing did. I even clicked the inverted carat at the bottom before I read the small-fonted “scroll” instructions. You should consider some text near the “next quote” icon.
Same comments as above.
I like the design but i don’t like that i have soo much to scroll just to view the quote.
Thank you so much for your honest critique. I have adjusted my code so that the page scrolls down to the main content when the inverted carat is clicked. I appreciate you taking the time to critique my work!
Thank you for your honest feedback. I made the downwards chevron/caret symbol clickable so that it scrolls the page down to the quote generator. Does this improve the design?
Definitely. Can you make it so that a click anywhere on that hero image will lead to that behavior? That would probably be the optimal UX.
Also, don’t forget about adding some text to the “new quote” icon: It creates a larger target for mouse clicks, which is better per Fitts’ Law of UI design
For me personally, the scroll mechanism is too much.
By that i mean i’d rather see the quote immediately (altough i like the how the scrolling works).
But that’s just my personal not so knowledgable opinion 
Nice work.
@myronhuang could always set it on a timeout onWindowLoad so as to get the best of both worlds. 2 seconds is a long time, but the impatient can click it away.
Ohw, and when checking your code, i noticed that you used an selfdefined array with quotes instead of an API to get your quotes.
That’s the easy way
Thank you for sharing that video! It was very informative. I am going to take some online courses on UX/UI design to improve my layouts. Here are the improvements that I have made. First, I changed the buttons so they are larger and more informative. Second, I adjusted my code so that clicking anywhere on the landing page (hero image) scrolls down to the quote generator. Third, I shortened the scroll time to 1s. Could you please explain what you mean by “… set it on a timeout onWindowLoad so as to get the best of both worlds. … the impatient can click it away.”?
You got me! 
I decided to go with the array so that I can personally curate the quotes generated. I will use API in the Weather App Project!
I did the same thing with my quote generator (re: Array). Also, in the Beta version, they didn’t give us any clue as to a quote API, and I preferred hunting down quotes myself.
So, there’s this concept in computing called “event-oriented programming,” in which the coder writes functions to deal with UI events. HTML/JS has this functionality built in: <div onclick="myClickEventHandler()"></div>, for example. The DOM, JS’s virtual representation of the document, has events things like “the window and all its components have finished loading”. By setting window.onload = initialBehaviorIWant();, you “hang” the behavior coded in the “initialBehaviorIWant” functionality (the event handler function) on the “hook” of the event.
However, since you don’t want your user to feel rushed, and to miss your pretty hero image, you don’t want to trigger a scroll immediately on load. It’d be better if the hero image stuck around for enough time for them to peruse it, then got itself neatly out of the way without any user intervention. For this, you need to delay the “initialBehaviorIWant()” call, and you do this with setTimeout().