diff --git a/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md b/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md index 7e1457cae0a..365086b3606 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md +++ b/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md @@ -209,7 +209,7 @@ galleryItems.forEach((item) => { ``` -When your `.lightbox` element is visible and you click anywhere outside the image, the `.lightbox` elements `display` should be set back to `none`. +When your `.lightbox` element is visible and you click the `#close` button, the `.lightbox` elements `display` should be set back to `none`. ```js // Get the lightbox and a background element (or the document) for simulating clicks outside @@ -222,7 +222,7 @@ function getComputedDisplay(element) { } // Make sure the lightbox is visible initially -assert.strictEqual(getComputedDisplay(lightbox), 'flex'); +lightbox.style.display = "flex"; // Simulate a click outside the lightbox background.dispatchEvent(new Event('click')); @@ -234,6 +234,30 @@ background.dispatchEvent(new Event('click')); assert.strictEqual(getComputedDisplay(lightbox), 'none'); ``` +When your `.lightbox` element is visible and you click the `.lightbox` element, the `.lightbox` elements `display` should be set back to `none`. + +```js +// Get the lightbox element for simulating clicks outside +const lightbox = document.querySelector(".lightbox"); + +// Function to get the computed display property +function getComputedDisplay(element) { + return window.getComputedStyle(element).display; +} + +// Make sure the lightbox is visible initially +lightbox.style.display = "flex"; + +// Simulate a click inside the lightbox +lightbox.dispatchEvent(new Event('click')); + +// Wait for any async operations if needed +// await new Promise(resolve => setTimeout(resolve, 100)); // Adjust timeout as needed + +// Assert that the lightbox is hidden after clicking outside +assert.strictEqual(getComputedDisplay(lightbox), 'none'); +``` + # --seed-- ## --seed-contents--