Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Capture Products Visible in Viewport When User Stops Scrolling — Vanilla JS

Prompt

Implement a solution in plain Vanilla JavaScript (no frameworks) that detects which product items are visible in the viewport after the user has stopped scrolling for a configurable number of seconds (e.g., 5 seconds). Use scroll event listeners with a debounce/timer approach and check element positions using getBoundingClientRect. Design the solution as an extensible SDK that accepts an element ID or class name to track items within. This has analytics and recommendation use cases.

Implement a debounce function that delays executing the visibility check until scroll events stop firing for the configured duration.
Test Results

Capture Products Visible in Viewport When User Stops Scrolling — Vanilla JS

Implement a solution in plain Vanilla JavaScript (no frameworks) that detects which product items are visible in the viewport after the user has stopped scrolling for a configurable number of seconds (e.g., 5 seconds). Use scroll event listeners with a debounce/timer approach and check element positions using getBoundingClientRect. Design the solution as an extensible SDK that accepts an element ID or class name to track items within. This has analytics and recommendation use cases.