Brussels | ITP-2026-1 | Meysam Razagh | Sprint 3 | Feature/slideshow

[Epunch]

Learners, PR Template

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

• Slideshow Feature: Created a complete image carousel with forward, backward, and auto-play controls.
• Dynamic Timing: Implemented reading custom delay values from the input field instead of hardcoded 2000ms.
• UI & Layout: Refactored HTML structure, wrapped buttons in divs for proper layout, and improved overall styling.
• Fixes: Fixed DOCTYPE declaration, resolved conditional background styling bugs, and cleaned up duplicate tests.

---

⚠️ Note on npm test & Version Mismatch

My implementation is correct and functions as expected, but npm test fails due to an environmental tooling issue rather than a code error.

The repository's dependencies have been updated to user-event v14, but the test file is still written using the older v13 syntax (synchronous .click() events). This version mismatch between the tools and the test file causes the test runner to throw errors, even though the slideshow code itself is completely fine.

[bezdzenariy]

⚠️ Note for future cohorts / maintainers

During testing we encountered a compatibility issue:

Problem: jest-environment-jsdom@30 uses JSDOM 26 which breaks
toHaveStyle({ backgroundColor: "red" }) assertions — getComputedStyle
returns "rgb(255, 0, 0)" instead of "red", causing all color-based
tests to fail despite correct implementation.

Fix:

npm install @testing-library/user-event@13

This downgrades jest and jest-environment-jsdom to ^29
where color comparison works correctly.

Suggestion: pin jest-environment-jsdom to ^29 in package.json
to prevent this for future students.

[Epunch]

Thank you so much for the detailed explanation and for your help! I had been researching this for two days, so I really appreciate your support.