Assessment wanted for Events 3 skill test / Event delegation

MDN Learn
#1

Hi guys, hope you’re doing well :slightly_smiling_face:
I finished ‘Event 3’ test with help of David Walsh’s blog that was mentioned and it worked but I was searching to see what can be used instead of ‘Element.matches’ to compare the value of the ‘e.target’ to triggered element and I noticed not only Element properties but also Node properties can be helpful, Am I right? ( because Node is parent of Element?)

CodePen-Link

#2

Hi @Ghazaleh_Heravi

Thank you for you submisison, You can read about making your code more modular by seeing this codepen link

CodePen

#3

Hi guys, i manage to it with a little extra help from Google, can be done this way too

Regards!

CodePen

#4

Hi @Alejandr and welcome to the community :wave:

Yes, using the textContent also works. :+1:

Generally, I think using a data attribute is probably more robust (in a real project).

Happy coding,
Michael

2 Likes
#5

Hi @mikoMK
you mentioned here about using data attribute how so? cos data-color is kind of strange to me.

Also, can you explain this in @Alejandr 's code to me

document.body.getElementsByClassName("preview")[0].style.backgroundColor = color;

please I want to know the preview is an array all of a sudden? and why or how he arrived at it.

also i saw this

.preview {
  width: 90%;
  max-width: 700px;
  border: 1px solid #4D4E53;
  border-radius: 2px;
  padding: 10px 14px 10px 10px;
  margin-bottom: 10px;
}

which is not in the original copy of the events3-download.html

can you please help me out? thanks.

#6

You can create custom attributes by prefixing arbitrary names with data-. These attributes can then be accessed with dataset in JS. See data-* for more details.

getElementsByClassName() always returns an array with all the elements that have the class. In this case there is only one element in the array and @Alejandr accesses it with array[0] (first element of the array).

This is some custom code from him to create a box that gets colored instead of the buttonBar. Just a slight variation of the original task.

Michael

#7

Thanks for your help

1 Like