Event task 3 - assessment

MDN Learn
#1

Hello!
I’d love to receive feedback on this task. I’ve been learning JavaScript for almost a year but I haven’t been really comfortable with writing codes myself without consulting other people’s codes. At least in this task, what I did was checking MDN documents on related subjects such as data attributes, HTML children elements.
I hope that my solution is correct and I’d love to improve it if it’s possible.

Here is link to my solution:https://codepen.io/anh-vumartell/pen/mdOZQVN

#2

Great work @anh-vumartell! the codepen shows that it works! Getting code to run is not easy.
Now to improve your code you can try to refactor it. Can we write it with less code to carry out the same action?

To do this let me point you to some articles on MDN and give some idea of what I mean.

Point 1
Lets refer back to the MDN Introduction to Events section. here you see this bit of code on the “Event Objects” section.

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}
btn.addEventListener('click', bgChange);

you can see that there is a parameter ‘e’ within the bgChange function. This would allow the browser to specify what element has been clicked on. This is very powerful. It means that your event listener could carry what element was clicked on to your function and you can carry out the changes bases on the attributes of the clicked button. I would recommend that you read this section again. Can you apply the same logic to your code to reduce the number of lines that you need? a hint is to look at the Div under which all the buttons are children

Point 2
Each of the buttons carries a data attribute. Can you use this to identify the element that was targeted?

Point 3
I tend to use the console.log() function to see what is being generated from my code. I also use an IDE (visual studio code is amazing btw) and carry out my work locally. This might help you more as you get stronger as you learn coding.

Let me know if you have any other questions. Keep learning and asking questions as you have done. :muscle:t4::sunglasses:

#3

Thank you, Ran for very thoughtful feedback! I have reviewed the theories and finally can wrap my head around this topic. Here is my new codes: https://codepen.io/anh-vumartell/pen/mdOZQVN

#4

Hi @anh-vumartell,
Wow, that is refactoring. Nice work :grinning:
I noticed a few things that could be improved in the code.

  1. The task asks you you solve this without looping. What you have done is add a eventlisterner to each of the button nodelists. You should be able to carry this out without using a for or foreach loop just on the basis of the Event object that is clicked on the screen.

  2. Can you move the eventlistener to be outside the function? so that the eventlistener would call the function and within the function you have the event object in the parenthesis that will be fed into the function.

To maybe get a better feel try this out
Add an event listerner to the buttonBar variable you created. Use click and then created a named function. So effectively the eventlisterner will on a click run the named function.

Then create the function with a console log to capture the results of the event object e.g.

function changeColor(e) {
    console.log(e)
}

what are you seeing? now can you zero in on just clicking a button. Some useful things to lookup are e.target, nodeName, how to tartget the style of the buttonbar so you can change the background color and what you already know about the data attribute.

This is a particularly challenging task and it took me a few months to grasp the concepts. Let me know how it goes and always happy to help out.

good luck :muscle:t4::man_technologist:t4::sunglasses:

#5

Hi Ran!
I actually realized immediately right after my previous post that my code didn’t follow the task description (no loop allowed) so I did refractor my code again but I haven’t had time to update the codepen. So here is my code:

//SOLUTION 4: Using event delegation
        let buttonBar = document.querySelector('.button-bar');
        
        buttonBar.addEventListener('click', function(e){
          const clickedBtn = e.target;
          buttonBar.style.backgroundColor = clickedBtn.dataset.color;
        });

Thank you so much for all of your feedback! Cheers!

#6

Perfect in my opion. Actually what you wrote made me think about my own code. The console.log statements below are my way of seeing the results btw. It helps me think of whats happening.

    function changeColor(e) {
        console.log(e);
        console.log(e.target);
        console.log(e.target.nodeName);
        console.log(e.target.dataset.color);
        if (e.target.nodeName === 'BUTTON') {
            buttonBar.style.backgroundColor = e.target.dataset.color; 
        }
    }

  buttonBar.addEventListener('click',changeColor);

I am wondering why I have an if statement and if it is even necessary as the e.target will be run either way. I do tend to write my functions separately and make a call for them from the event listener. I dont think it matters but it means that if I need to use the same function somewhere else I can call it. I am a long way from writing something serious like that right now though.

Keep on going and have a good weekend :blush:

#7

Hi Ran!
I actually like your thinking process. It like being able to see what is behind the code and the console.log() is just something I find absolutely powerful tool no matter you are a beginner or a pro developer.

Writing separately your own function and reusing it somewhere is such a great coding habit that I think I need to pick up sooner or later :smiley:

I started working with this task by writing clumsy-looking codes because I didn’t understand the event object and event delegation. Thank you for taking time sharing your feedback and giving encouragement. This is what I really need to motivate me coding more and more.