Some minor nitpicks:

1) Why are you wasting the SLOW querySelector to grab things by ID? You do know getElemetnsById executes far faster since the parser creates a master list of ID's in most browsers, right?

2) Why bother wasting markup on scripting only elements?

3) Why waste a class that's identical to the existing ID?

4) If you're going to talk about mastering events, maybe you should have shown how to use , event.currentTarget, and event.preventDefault. Particularly given your use of event.target could fail in more complex markup cases.

Explaining the difference between .,target and .currentTarget could go a long ways towards people's "mastery".

More so when you're wasting excess bubble overhead by tapping the event on the parent instead of the children.

It's also bad practice to hook events on tags that cannot accept focus. Good rule of thumb? ONLY hook button or anchor for clicks, that way it's also keyboard navigable. Assigning click to DIV or LI is just telling users with accessibility needs to go f*** themselves. This too is where hooking the parent tag instead of each element is rubbish.

Likewise the nonsensical construction of an array introducing excess overhead from the functions and "loops for nothing" is NOT good code, and it sure as shine-ola isn't performant. I know the functional programming whackjobs cream their panties over that type of code, but it just proves how little they know about how ANY of this works.

Much less RGB() is a thing, hell it's what your console.log reports -- so use it rather than jumping thorugh the hoops of creating a hex number. I'd also suggest ditching the backtick approach to plugging variables into a string given it suffers both from being aggravatingly cryptic, and being performance JUNK!

Code like what you've done is why so many programmers make everything harder, slower, and bloated via many, MANY times the memory footprint needed to do the job and endless pointless variables and function calls for NOTHING!

Thus your first example would have been better thus:

https://codepen.io/jason-knight/pen/vYyJZJw?editors=1011

Whilst the second one:

https://codepen.io/jason-knight/pen/mdOMwwN?editors=1111

In both cases throwing a whole bunch of confusing, pointless, memory wasting code in the bin. Don't make arrays for nothing, don't pass values around on the stack you don't have to, don't make functions for nothing, leverage what exists instead of using brute force, and life gets a hell of a lot easier.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store