added the solution of the task#1738
Conversation
JorJio-svg
commented
Apr 7, 2026
- DEMO LINK
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
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
| 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; | ||
| }); | ||
| } | ||
| }); |
There was a problem hiding this comment.
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.