FAQ: Live Stream - Random Color Generator


#1

This community-built FAQ covers the “Random Color Generator” exercise from the lesson “Live Stream”.

Paths and Courses
This exercise can be found in the following Codecademy content:

FAQs on the exercise Random Color Generator

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

Isn’t this the same is rgb values or is it different?


#3

We’ll need to see the lesson to be able to answer this. Please post the URL of the exercise page.


#4

Hello @mtf,

I’m just asking if Random color generator is the same is Red Green Blue values.


#5

Can’t answer that question without first seeing the lesson. Colors can be defined a number of ways.


#6

It’s not really in any particular lesson for rgb values. For example in CSS:

body{
background-color:rgb(255,255,255);
}

#7

Okay, then yes, it is the three palettes, red, green, and blue.

palettes = {
    red: 255,
    green: 255,
    blue: 255
}
// color = "#";
for (palette in palettes) {
    palettes[palette] = Math.floor(Math.random() * 256);
    // code to convert the value to hex and add to color string

color = rgb(palettes['red'], palettes['green'], palettes['blue']);

Note that since objects are not ordered, we really are creating a random color.


#8

Ok! Thanks @mtf for clarifying this to me!


#10

The mystery button is just not working despite of having the exact same code as shown in the video. Can someone help me? Thanks in advance.


#11

We’re still in the dark until we have a link to the exercise. Please post the URL of the exercise page.


#12

This is the url :point_down:
https://www.codecademy.com/courses/live-stream/lessons/live-stream/exercises/color-generator?action=resume_content_item


#13

Given these lines,

// This variable stores the "Pick a Color" button
const original = document.querySelector('#original-button');
// This variable stores the "Mystery Color" button
const mystery = document.querySelector('#mystery-button');

Your global event listeners should be written at the bottom of the script.

original.onclick = colorChange;
mystery.onwheel = colorChange;

Be sure you are testing with your mouse scroll wheel.


#14

Discussion around this project

The random color code posted earlier had some syntax errors which are now fixed. Following is the implementation…

Random RGB Color Generator
const original = document.querySelector('#original-button');
const mystery = document.querySelector('#mystery-button');

const randomColor = () => {
  palettes = {
    red: 255,
    green: 255,
    blue: 255
  };
  for (palette in palettes) {
    palettes[palette] = Math.floor(Math.random() * 256);
  }
  return `rgb(${palettes['red']}, ${palettes['green']}, ${palettes['blue']})`;
}

const colorChange = e => {
  e.target.style.backgroundColor = randomColor();
}

original.onclick = colorChange;
mystery.onwheel = colorChange;

Consider, what is the probability that black (rgb(0, 0, 0)) or white (rgb(255, 255, 255)) will be generated? Slim margin, on the whole. One in 255 ** 3, to be precise.

Think in terms of magnitude only. The above is magnitude 8.

Now consider what the probability will be if we use HSL instead of RGB.

Random HSL Color Generator
const original = document.querySelector('#original-button');
const mystery = document.querySelector('#mystery-button');
const randomColor = () => {
  var palettes = { red: 255, green: 255, blue: 255 };
  for (let palette in palettes) {
    palettes[palette] = Math.floor(Math.random() * 256);
  }
  return `rgb(${palettes['red']}, ${palettes['green']}, ${palettes['blue']})`;
}
const randomHue = () => {
  var hue = Math.floor(Math.random() * 360);
  var sat = Math.floor(Math.random() * 101);
  var lum = Math.floor(Math.random() * 101);
  return `hsl(${hue}, ${sat}%, ${lum}%)`;
}
const colorChange = e => {
  e.target.style.backgroundColor = randomColor();
}
const hueChange = e => {
  e.target.style.backgroundColor = randomHue();
}

original.onclick = colorChange;
mystery.onwheel = hueChange;

Because of the reduced range of the SAT and LUM to percentage, and the HUE having no part of either black or white, the probability comes down to one in 100 ** 2. One in 10,000 is a lot better odds than one in 16,581,375. Magnitude 5 versus magnitude 8 means a thousand ± times better odds.

Bottom line if you want black or white to come up with greater frequency, then use HSL.

Concepts for beginners to brush up on (or dig into) in no particular order
  • Element node caching (first two lines).
  • Functions, both declaration and expression; and ES6 Arrow function in particular.
  • Objects (randomColor uses a local object).
  • Math object and all its methods.
  • RGB and HSL color systems.
  • const vs. var vs let and scope.
  • Template literals and string interpolation (a must).
  • Global events (onclick, onwheel, etc.).
  • Event listeners and handlers (especially the concept of callbacks).
  • Events on a technical level (event object, bubbling (propagation) and delegation).
  • CSS in JavaScript (assumes good knowledge of CSS).
  • Functions on a technical level (arguments object, this, toString(), etc.).
  • &c., which would naturally include in depth understanding of HTML, the document tree and the DOM.
  • Most importantly, DRY and KISS (in any order).

It follows that none of this is learned overnight. Definitely focus on HTML at the start, and don’t stray from it. Let CSS creep in, and focus more on raw HTML. It doesn’t look very pretty but it is what we should recognize in our sleep.

There is a heap of information to absorb and get practice with. Like a lot of things, once we learn about the basic elements and how they behave, the less widely used ones tend to be just as predictable so the learning curve can take a steeper pitch. One cannot stress enough the importance of getting a firm handle on HTML in all its detail and to be totally familiar with the W3.org documentation (and MDN).