solved#1737
Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your solution correctly implements the image gallery's functionality, which is a great start! However, it's missing a key technical requirement from the task description: the use of event delegation. Currently, you're adding separate event listeners to each individual thumbnail image and link. The task requires you to add a single event listener to a common parent element, like the <ul> that contains all the thumbnails. Inside that one listener, you can inspect the event.target property to determine which thumbnail was clicked and then update the main image. Please refactor your code to use this more efficient approach.
✨ 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
| images.forEach(img => img.addEventListener('click', (event) => { | ||
| const eventImg = event.currentTarget.src; | ||
| mainImg.src = eventImg; | ||
| })) | ||
|
|
||
| links.forEach(link => link.addEventListener('click', (event) => { | ||
| event.preventDefault(); | ||
| mainImg.src = event.currentTarget.href; | ||
| })) |
There was a problem hiding this comment.
The task requires using event delegation. Instead of adding listeners to every img and a tag individually, you should add a single event listener to a common parent element that contains all the thumbnails. Inside that single listener, you can use event.target to determine which element was clicked and then update the main image accordingly.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this refactor! You've perfectly implemented event delegation, and your solution is much more efficient and robust. It correctly handles clicks on all the necessary elements and meets all the task requirements. I am approving your solution because the core logic is solid. You'll notice that the build check is failing due to a minor linting rule called no-shadow. The linter is flagging the use of event as your function parameter because it conflicts with a global variable of the same name. You can easily fix this by renaming the parameter to e or evt, as suggested in the check run logs. Great job addressing the previous feedback!
✨ 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
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this submission! I am approving your solution as it perfectly meets all the requirements. You've done a fantastic job addressing the previous feedback and fixing the no-shadow linting error. Your use of event delegation combined with closest() is the ideal and most efficient approach for this problem. The code is clean, easy to read, and very well-written. Keep up the great work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
No description provided.