import React, { useState, useEffect } from 'react';const WORD_LENGTH = 5;const MAX_GUESSES = 6;const WORDS = ['REACT', 'REDUX', 'HOOKS', 'STATE', 'PROPS']; // Add more words as neededfunction App() { const [targetWord, setTargetWord] = useState(''); const [guesses, setGuesses] = useState([]); const [currentGuess, setCurrentGuess] = useState(''); const [gameOver, setGameOver] = useState(false); useEffect(() => { setTargetWord(WORDS[Math.floor(Math.random() * WORDS.length)]); }, []); const handleKeyDown = (event) => { if (gameOver) return; if (event.key === 'Enter') { if (currentGuess.length !== WORD_LENGTH) return; const newGuesses = [...guesses, currentGuess]; setGuesses(newGuesses); setCurrentGuess(''); if (currentGuess === targetWord) { setGameOver(true); } else if (newGuesses.length >= MAX_GUESSES) { setGameOver(true); } } else if (event.key === 'Backspace') { setCurrentGuess(currentGuess.slice(0, -1)); } else if (currentGuess.length < WORD_LENGTH && event.key.match(/^[A-Za-z]$/)) { setCurrentGuess(currentGuess + event.key.toUpperCase()); } }; useEffect(() => { window.addEventListener('keydown', handleKeyDown); return () => { window.removeEventListener('keydown', handleKeyDown); }; }, [currentGuess, gameOver]); const getLetterColor = (letter, index, guess) => { if (targetWord[index] === letter) { return 'green'; } else if (targetWord.includes(letter)) { return 'yellow'; } else { return 'gray'; } }; return (

Wordle Clone

{guesses.map((guess, i) => (
{guess.split('').map((letter, j) => (
{letter}
))}
))}
{currentGuess.split('').map((letter, i) => (
{letter}
))} {[...Array(WORD_LENGTH - currentGuess.length)].map((_, i) => (
))}
{gameOver && (

{currentGuess === targetWord ? 'You won!' : 'Game Over'}

The word was: {targetWord}

)}
);}export default App;