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('#originalbutton');
const mystery = document.querySelector('#mysterybutton');
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('#originalbutton');
const mystery = document.querySelector('#mysterybutton');
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).