Guess input

src/components/Form/Form.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+function Form() {
+  const [input, setInput] = React.useState('');
+  function guessing(event){
+    event.preventDefault();
+    console.log({input});
+    setInput('');
+  }
+  return(
+    <form className='guess-input-wrapper' onSubmit={guessing}>
+      <label htmlFor='guess-input'>Enter Guess:</label>
+      <input
+        required
+        minLength={5}
+        maxLength={5}
+        pattern="[a-zA-Z]{5}"
+        title="5 letter word"
+        id='guess-input'
+        type='text'
+        value={input}
+        onChange={(event) => (
+            setInput(event.target.value.toUpperCase())
+        )}
+      />
+    </form>
+  );
+}
+
+export default Form;

src/components/Form/index.js

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

src/components/Game/Game.js

@@ -2,14 +2,19 @@ import React from 'react';
 
 import { sample } from '../../utils';
 import { WORDS } from '../../data';
+import Form from '../Form/Form';
 
 // 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!</>;
+  return(
+    <>
+      <Form />
+    </>
+  );
 }
 
 export default Game;