I Built Wordle in Vanilla JS — the Duplicate-Letter Trap

Wordle looks simple — until you try to color a guess with a repeated letter correctly. That edge case is the whole interview question hiding inside this game. Here’s a playable clone in vanilla JS.

🟩 Play it: https://dev48v.infy.uk/game/day18-wordle.html

The two-pass coloring trap

Guess KAYAK, answer APPLE (one A). The naive “is this letter in the word?” colors BOTH A’s yellow — wrong. The answer only has one A to give.

Correct algorithm is two passes:

1. First pass: mark greens (letter right + position right) and “use up” those answer letters.
2. Second pass: for the rest, mark yellow only if an unused copy of that letter remains in the answer — otherwise gray.

Track a per-letter remaining-count so duplicates color exactly right.

The rest

A 6×5 board, the active row captures typing, Enter reveals with a CSS flip, and an on-screen keyboard colors each key by its best-known state (green > yellow > gray). Win on match, reveal the answer on loss.

🔨 Full build (board → input → two-pass scoring → reveal + keyboard → win/lose) on the page: https://dev48v.infy.uk/game/day18-wordle.html

Part of GameFromZero. 🌐 https://dev48v.infy.uk