Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.
User interface challenge
Connect Four
medium45 min
Build a two-player Connect Four game with gravity, alternating turns, four-direction wins, draws, and restart.
Requirements
Use a 6-row by 7-column board, with row 0 at the top. Red starts; Yellow follows. Both players share the same browser.
Provide one labeled drop button per column. A disc occupies the lowest empty cell in that column. Disable a full column, and leave the turn unchanged when an invalid/full-column move is ignored.
After a valid move, detect at least four matching discs horizontally, vertically, or along either diagonal. Declare the winning player before changing the turn.
When all 42 cells are occupied without a winner, show Draw. Wins take precedence over draws. Disable all drop controls once the game ends.
Display Red's turn, Yellow's turn, Red wins, Yellow wins, or Draw, and the number of successful moves.
Restart clears the complete board and winner, sets move count to zero, and gives Red the next turn.
Keep data-token values empty, red, or yellow on supplied cell elements. Native column buttons, labels, layout, disc styling, and full CSS are supplied; no substantial HTML/CSS authoring is needed. No AI opponent, networking, animations to implement, or persistence is required.
Examples
Example 1
Input: Columns 1, 7, 2, 7, 3, 6, 4 (one-based)
Output: Red wins with four bottom-row discs across columns 1–4.
Implement the same visible behavior in each supported framework.
What the tests check
Starts with an empty 6 by 7 board and Red to play
Discs fall to the lowest available row and turns alternate
A full column disables its control without ending the game
