done

src/components/Game/Game.js

@@ -2,14 +2,25 @@ import React from 'react';
 
 import { sample } from '../../utils';
 import { WORDS } from '../../data';
-
+import GuessInput from '../GuessInput/GuessInput';
+import GuessResults from '../GuessResults/GuessResults';
 // Pick a random word on every pageload.
 const answer = sample(WORDS);
 // To make debugging easier, we'll log the solution in the console.
 console.info({ answer });
-
 function Game() {
-  return <>Put a game here!</>;
+  const [guesses,setGuesses] = React.useState([])
+
+  function handleSubmitGuess(tentativeGuess){
+    setGuesses([...guesses, tentativeGuess])
+  }
+
+  return <> 
+  <GuessResults guesses={guesses} answer={answer}/>
+  <GuessInput handleSubmitGuess={handleSubmitGuess}/>
+  </>
+
+;
 }
 
 export default Game;

src/components/Guess/Guess.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { range } from '../../utils';
+import { checkGuess } from '../../game-helpers'
+
+function Cell({letter, status}) {
+  return(
+    <span className={`cell ${status}`}>
+              {letter}
+            </span>
+  )
+
+}
+
+function Guess({value, answer}) {
+  const result = checkGuess(value,answer)
+  return (
+    <p className="guess">
+      {range(5).map((num) => (
+            <Cell
+              key={num}
+              letter = {result ? result[num].letter : undefined}
+              status = {result ? result[num].status : undefined}
+            />
+      ))}   
+  </p>
+  );
+}
+
+export default Guess;

src/components/Guess/index.js

@@ -0,0 +1,2 @@
+export * from './Guess';
+export { default } from './Guess';

src/components/GuessInput/GuessInput.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+function GuessInput({handleSubmitGuess}) {
+  const[tentativeGuess, setTentativeGuess] = React.useState()
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (tentativeGuess.length !== 5) {
+      window.alert('Please enter 5 letters! :)')
+      return;
+    }
+    handleSubmitGuess(tentativeGuess)
+    setTentativeGuess('')
+  }
+
+  return(
+    <form onSubmit={handleSubmit} className="guess-input-wrapper">
+      <label htmlFor="guess-input">Enter guess:</label>
+      <input 
+      required
+      minLength={5}
+      maxLength={5}
+      id="guess-input" type="text" 
+      value={tentativeGuess}
+      onChange={(event)=> {
+        const nextGuess = event.target.value.toUpperCase()
+        setTentativeGuess(nextGuess)
+      }}
+      />
+    </form>
+  );
+}
+
+export default GuessInput;

src/components/GuessInput/index.js

@@ -0,0 +1,2 @@
+export * from './GuessInput';
+export { default } from './GuessInput';

src/components/GuessResults/GuessResults.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NUM_OF_GUESSES_ALLOWED} from '../../constants'
+import { range } from '../../utils';
+import Guess from '../Guess/Guess';
+function GuessResults({ guesses, answer }) {
+  return (
+    <div className="guess-results">
+      {range(NUM_OF_GUESSES_ALLOWED).map((num) => (
+        <Guess key={num} value={guesses[num]}  answer={answer}/>
+      ))}
+  </div>
+  );
+}
+
+export default GuessResults;

src/components/GuessResults/index.js

@@ -0,0 +1,2 @@
+export * from './GuessResults';
+export { default } from './GuessResults';