Assignment for events tasks in javascript

MDN Learn
,
#1

Can someone please provide feedback on my work please, thank you

event1
event2
event3

#2

Hi @Darnell_X_Daniell and welcome to the community :wave:

Congratulations! :tada: Tasks 1 and 2 work correctly.
Unfortunately you misunderstood the goal of task 3: The goal is to change the background color of the button-bar and not the buttons. So when clicking the “Purple” button the background of the whole <div> should change to purple and so on.

Here are some comments for your three tasks:

Task 1
A solution that is closer to a real-world project would be to decide based on the class of the object and also switch the class accordingly:

btn.addEventListener('click', () => {
  if(btn.className === 'on') {
    btn.textContent = 'Machine is off';
    btn.className = "off";
  } else {
    btn.textContent = 'Machine is on';
    btn.className = "on";
  }
});

Task 2
Generallym it’s better to use e.key instead of e.code since e.key recognizes keyboard layouts. For example on a German keyboard the “Z” and “Y” are switched compared to an English keyboard. When pressing “Z” e.key returns “z” but e.code returns “KeyY”.

Task 3
To achieve this, you would use a technique called “Event delegation”. It’s nicely explained by David Walsh in his blog.

If you decide to improve any of your tasks I’m happy to have another look. If you need further help with task 3, just ask :slightly_smiling_face:

Have a nice day,
Michael

#3

Hello sir, I am extremely grateful for your feedback and advice on task 3. I will apply and respond accordingly.
Cheers

1 Like
#4

Hello sir,
I was able to correct Event3.
The link is the same and I used the article as a reference.
I do look forward to your response.

Thank you

1 Like
#5

You’re welcome! :slightly_smiling_face:

Great job, now it works correctly! :medal_sports:

We can even simplify the code:
Since the class names of the buttons are also colors we can get rid of the if...else statements and just assign the class name as background color:

const buttonBar = document.querySelector('.button-bar');

buttonBar.addEventListener("click", function (e) {
  buttonBar.style.backgroundColor = e.target.getAttribute('class');
});
1 Like
#6

Thank you, and noted on the class selection

1 Like