Random Quote Generator - Feedback on Simplifying Code

Code Feedback
1

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!

https://codepen.io/kagejarvis/full/gvVMYO/
1 Like
2

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
3

Hello @kagejarvis,

JS

  • 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.open(
    "GET",
    "https://raw.githubusercontent.com/kagejarvis/Database-Quotes-JSON/master/quotes.json"
  );
  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");
  };
  ourRequest.send();
});
  • idea: implement a ‘cache’:

Cache (computing) - Wikipedia

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.

Comments

Example:

/**
 * 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;
}

HTML

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

Unobtrusive JavaScript - Wikipedia

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

Design

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

    • 1920_1080:

nhy0rwoeye7jplumt3om.png800×450 212 KB

---
  • 1024_768:

owf5oc7eqgrmmjnadwpb.png800×600 245 KB

---
  • 800_600

b1mujmkz3fguoyqgib0k.png800×600 231 KB

---
  • 360_640:

p8mypeex4u49tswcxjam.jpg800×1422 140 KB

Cheers and happy coding :slight_smile:

2 Likes
4

Thanks @Diego_Perez! 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.

5

You’re welcome :slight_smile:

The screenshots? I resize the browser window.

The page is faster now :+1:

OK

Cheers and happy coding :slightly_smiling_face:

1 Like