Skip to content

added the solution of the task#1738

Open
JorJio-svg wants to merge 1 commit intomate-academy:masterfrom
JorJio-svg:develop
Open

added the solution of the task#1738
JorJio-svg wants to merge 1 commit intomate-academy:masterfrom
JorJio-svg:develop

Conversation

@JorJio-svg
Copy link
Copy Markdown

Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Summary

Your image gallery is functionally correct, which is a great start! However, this submission requires changes because it does not meet the core requirement of using event delegation.

Currently, your code in src/scripts/main.js adds an event listener to each individual thumbnail inside a forEach loop. The task specifically requires you to add a single event listener to a shared parent element (like the <ul> container). Inside that single listener, you should use the event.target property to determine which thumbnail was clicked and then update the main image's src.

Please refactor your code to implement this event delegation pattern.


✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

Footnotes

  1. Rate AI review example

  2. Re-request AI review example

  3. Add AI review comments example

Comment thread src/scripts/main.js
Comment on lines +6 to +21
tumbsCollection.forEach((li) => {
const liLink = li.firstElementChild;
const liImg = liLink.firstElementChild;
const linkContent = liLink.href;

if (liLink || liImg) {
liLink.addEventListener('click', () => {
liLink.href = '#';
largeImage.src = linkContent;
});

liImg.addEventListener('click', () => {
largeImage.src = liLink.href;
});
}
});
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The task requires the use of event delegation. This implementation adds event listeners to each individual thumbnail element inside a forEach loop, which is not event delegation.

The correct approach is to add a single 'click' event listener to a common parent element (like the <ul> that contains all the thumbnails). Inside that single listener's callback function, you can use the event object (specifically event.target) to identify which thumbnail was clicked and then update the large image's src attribute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants