Random Quote Generator - Feedback on Simplifying Code

Greetings fellow campers,

Thank you for all the support this forum has given.

I’ve just completed the random quote generator and would love feedback - especially how I could simplify any of the code.

Thank you for the help!

1 Like

Thats a really nice site! I can’t help with simplifying as you’re code looks super neat to me (on the same project right now) but if you are looking for changes maybe a collapsable nav bar? At the moment If I reduce the width of my browser the bar takes up so much that you need to scroll to read the quote.

I’m very interested in the responsive text section and a massive thank you for commenting where you found the info! Best of luck with it.

1 Like

Hello @kagejarvis,


  • problem: Every time I click Submit, I get All the quotes:
btn.addEventListener("click", function() {
  var sortInput = document.getElementById("sortInput").value;
  var ourRequest = new XMLHttpRequest();
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      var ourData = JSON.parse(ourRequest.responseText);
      randomQuotes(ourData, sortInput);
    } else {
      console.log("The server has returned an error");
  ourRequest.onerror = function() {
    console.log("Connection error");
  • idea: implement a ‘cache’:


In computing, a cache KASH,[1] is a hardware or software component that stores data so future requests for that data can be served faster; the data stored in a cache might be the result of an earlier computation, or the duplicate of data stored elsewhere. A cache hit occurs when the requested data can be found in a cache, while a cache miss occurs when it cannot. Cache hits are served by reading data from the cache, which is faster than recomputing a result or reading from a slower data store; thus, the more requests can be served from the cache, the faster the system performs.



 * Never called in the script: I use 'onclick' attribute in the HTML 
 * @param {string} element - The url of ???
function changeImage(element) {
  document.getElementById("imageReplace").src = element;


  • problem: using ‘onclick’ attribute in the HTML:


 <a class="nav-link" onclick="changeImage('https://res.cloudinary.com/kage/image/upload/v1520501729/motivation2.jpg');" href="#Motivation">Motivation</a>


  • The Tweet button looks different in firefox [58.0.2 (64-bit)] ( in chrome is blue and has an icon):

    • 1920_1080:

  • 1024_768:

  • 800_600

  • 360_640:

Cheers and happy coding :slight_smile:


Thanks @erretres! I really appreciate your comments and will spend some time digesting the feedback and improving the code.

I’ve worked on the $bp and it’s doing much better, but how do you preview size options like you did? I’ve also fixed the data loading problem with each click - thanks again!

Also, on the onclick - I tried using addEventListener with each of the nav items, but it wouldn’t change after the first click. I’ll recreate it and share if I can’t get it to work.

You’re welcome :slight_smile:

The screenshots? I resize the browser window.

The page is faster now :+1:


Cheers and happy coding :slightly_smiling_face:

1 Like