Lingering Questions from the Random Quote Generator project

1

My code satisfies the requirements. It works, so I marked it completed.

Even so, it’s not great. My Javascript is a mix of regular JS and jQuery, not what I would choose, but FCC didn’t teach how to do it all in JS. I don’t even understand some of the code I used.

First, here’s the URL to the Codepen, so you can view the code in full: https://codepen.io/LisaWillCode/pen/POGmaL

  1. There are two main areas of code: the part that gets a randomly generated quote, and the part that gets a randomly generated background color. The quote part sits nicely inside a function. Every time I try to enclose the color part in a function, it stops working. (One of several reasons why I want it in a function is so it’ll generate a color on page load.)

  2. I originally had the New Quote div as a button, but the button showed a square outline, even when I set the border to 0 or to 1px, same color as the button. Is there a way to get rid of that outline so I can change it back to a button?

  3. I got the code for generating the random background color from a Dash project (from the coding bootcamp General Assembly), but I don’t actually know what it means. The line in question is:

var randomRGB = "rgb("+red+", "+green+", "+blue+")";

Full disclosure: I tried asking on another forum, but I didn’t understand the answer. I do get that the whole thing is a strong, so it’s all enclosed in quotes for that reason. What I don’t understand is the “+color+” parts. I was told it’s to concatenate them, but what is going on there? In regular concatenation, the plus signs aren’t inside quotes, and they’re not doubled. And why are there quotes inside of the main string quotes? How would I to generalize this to use it in another context?

I think there was another question, but my neighbor is blasting noise through the walls and I can’t think any more.

2

Button Appearance

You can override the default appearance of elements by changing their appearance property

.bttn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

I really believe you should use the button element, and get into the habit of using semantic elements. There is a great article I read that talks about the different use cases between <anchor>, <button>, and <input>. I can dig it up for you if you want.

Random Colors & Vanilla JavaScript

Yeah that’s the problem with learning jQuery first. I don’t like that they only teach you jQuery here. I also don’t like the examples Codecademy uses. They’re both not comprehensive. My probelm starting out was I didn’t know what jQuery was doing and I couldn’t tell the difference between writing jQuery or regular JS.

It’s pretty easy to do this in regular JS. I made a codepen practicing with random colors. I use the Math.random() to get a random number between 0 and 1 and multiply it by the total rgb value 255, because I don’t want to have to translate it into HEX values. For example if Math.random() returns 0.2. Then 0.2 x 255 is 51. This is the result

// Random Colors in JS (Vanilla)
let element = document.querySelector("body");
element.style.background = "rgb( " + Math.round(Math.random() * 255) + ", " + Math.round(Math.random() * 255) + ", " + Math.round(Math.random() * 255) + ")" + ;

So what the code you grabbed from Dash is doing is storing this random calculation in three variables, one for red, green, and blue. Same thing I did above.

Take a look at my pen, it’s pretty simple.

My pen doesn’t have comments, so here they are:

window.setInterval(function(){ // Repeat this code every 500 miliseconds

  // Target an element
  document.querySelectorAll("li")[ 
    /* Target a random <li> element */
    (Math.round(Math.random() * document.querySelectorAll("li").length ))
  ].style.background = 
  "rgb(" + /* Assign a random value from 0 - 255 for Red, Green, and Blue in RGB() */
    (Math.random() * 255) + ", " +
    (Math.random() * 255) + ", " +
    (Math.random() * 255) + ")";

}, 500);
3

Some spacing might make it clearer:

var randomRGB = "rgb(" + red + ", " + green + ", " + blue + ")";

/*
String 'rgb('
+
Variable `red`
+
String ', '
+
Variable `green`
+
String ', '
+
Variable `blue`
+
String ')'
*/

Personally, I much prefer the ES6 template literal syntax. Using a template literal, you’d have this (functionally identical):

var randomRGB = `rgb(${red}, ${green}, ${blue})`;
6

You should not break the structure just because you didn’t like the way a real button looks. Use a button element, then work on CSS to make it look the way you want.

Also try to avoid so-called magic numbers, like 20 below:

var myQuote = Math.floor(Math.random() * 20);

It conveys no context, hence looks magical. Use length property of the array instead:

var myQuote = Math.floor(Math.random() * quoteCollection.length);

The calculation will also automatically be made if you add/remove quotes from the array later.

1 Like