Each card contains the UI, controls, and a short explanation. Use the “Run All Tests” button at the bottom to validate core interactions automatically.
How it works: “Start” enables the click button and starts a countdown with setInterval. Each click increments local state and updates the DOM. When time hits 0, buttons disable.
Learning outcomes: click events, intervals, enabling/disabling controls, textContent updates.
How it works: Every 700ms a random cell gets the mole class. Clicking that cell adds a point and clears it. Uses delegation-free per-cell listeners for clarity.
Learning outcomes: DOM creation, random selection, class toggling, cleanup timers.
How it works: Shuffle pairs, render cards with hidden values in data-val. Track two active flips; if equal, mark matched, else flip back after a short delay.
Learning outcomes: state machines, attribute APIs, shuffling, conditional UI.
How it works: “Start” arms a random delay. On green, timestamp; on click, compute delta with Date.now().
Learning outcomes: timing, guarding early clicks, visual feedback.
How it works: Start sets prompt & countdown. On each input, compare typed vs prompt; count correct characters. Bar fills by match percentage.
Learning outcomes: input handling, string comparison, simple progress meter.
How it works: Generate 6 random colors; choose one as target. Click to match; correct increments score and regenerates.
Learning outcomes: inline styles, color generation, comparing computed choices.
How it works: Game appends a random pad to the sequence, flashes it (via temporary class), then collects user input to verify order.
Learning outcomes: sequencing, async delays, input gating.
How it works: HTML5 drag events move number chips into five slots; “Check” compares slot order to sorted target.
Learning outcomes: drag events, dataTransfer payloads, DOM insert positions.
How it works: Grid encoded as a 1D array; player moves if next cell isn’t a wall. Checks for goal collision.
Learning outcomes: keyboard listeners, bounds checking, grid math.
How it works: Simple game loop with requestAnimationFrame. Mouse moves the basket; stars fall; AABB collision counts catches.
Learning outcomes: canvas basics, animation timing, hit-testing.