Build a React Word-Guessing Game with Green, Yellow, and Red Letter Feedback

Build a small word-guessing game as a front-end project using React, written in JavaScript or TypeScript. The game has a fixed target word. Each time the player types a word and submits it, the UI shows that guess as a row of cells, one cell per letter, and colors every cell according to this rule: - **Green**: the letter appears in the target word at the same position. - **Yellow**: the letter appears in the target word, but at a different position. - **Red**: the letter does not appear in the target word. Describe your component structure and state, implement the letter-coloring logic and the rendering of guess rows, and explain how you handle input and edge cases. ```hint Separate scoring from rendering Consider making the coloring rule a pure function of the target and one guess, so the components only render its output and the rule can be tested without the UI. ``` ### Constraints and Clarifications - The source specifies only the target word, one guess per submission, and the three colors. Word length, the number of allowed guesses, win or loss behavior, dictionary validation, and how the target is chosen are unspecified; state the assumptions you make. - Assume submitted guesses stay visible as a history of rows unless the interviewer says otherwise. - The rule as stated does not say how repeated letters are colored, for example a guess that contains a letter twice when the target contains it once. Treat this as an open policy question and make whichever behavior you implement explicit. ### Clarifying Questions - Must a guess have exactly the target's length, and should shorter or longer input be rejected or prevented while typing? - Is the comparison case-insensitive, and are characters other than letters allowed? - When a letter repeats, should every copy that appears in the target be yellow, or should yellow be limited by how many copies of that letter remain unmatched in the target? - Is there a maximum number of guesses, and what should the UI do once the player guesses the target or runs out of guesses? ### What a Strong Answer Covers - A pure, testable scoring function with a clearly stated position rule and presence rule, including the chosen repeated-letter policy. - A React state design that separates stored state (submitted guesses, current input, validation message) from derived values (cell colors, game status), with immutable updates. - Input handling: a controlled input, normalization, length and character validation, submission by button or Enter, and disabling input when the game ends. - Rendering: row and cell components with sensible keys, a color-to-style mapping, and feedback that does not rely on color alone. - Edge cases and tests: empty or wrong-length input, mixed case, repeated letters, and a winning guess. ### Follow-up Questions 1. How would the scoring function change if yellow must respect letter counts, and which test cases prove the difference? 2. How would you add an on-screen keyboard that shows the best color learned so far for each letter? 3. How would you test the game component without asserting on CSS colors?