From 2416d046b8d8b7f2283dfba766e22a762a7b813d Mon Sep 17 00:00:00 2001
From: AlexRS90 <aramosbengy@gmail.com>
Date: Wed, 15 Nov 2023 09:28:20 -0600
Subject: [PATCH 1/2] Create Form component

---
 src/components/Form/Form.js  | 28 ++++++++++++++++++++++++++++
 src/components/Form/index.js |  2 ++
 src/components/Game/Game.js  |  7 ++++++-
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Form/Form.js
 create mode 100644 src/components/Form/index.js

diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
new file mode 100644
index 000000000..fcc29c6fa
--- /dev/null
+++ b/src/components/Form/Form.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+function Form() {
+  const [input, setInput] = React.useState('');
+  function guessing(event){
+    event.preventDefault();
+    const guess = {
+      guess: input.toUpperCase(),
+    };
+    setInput('');
+    console.log(guess);
+  }
+  return(
+    <form className='guess-input-wrapper' onSubmit={() => guessing(event)}>
+      <label htmlFor='guess-input'>Enter Guess:</label>
+      <input 
+        id='guess-input'
+        type='text'
+        value={input}
+        onChange={(event) => (
+            setInput(event.target.value)
+        )}
+      />
+    </form>
+  );
+}
+
+export default Form;
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
new file mode 100644
index 000000000..be00c58fc
--- /dev/null
+++ b/src/components/Form/index.js
@@ -0,0 +1,2 @@
+export * from './Form';
+export { default } from './Form';
diff --git a/src/components/Game/Game.js b/src/components/Game/Game.js
index fc7615d24..6dcd2b665 100644
--- a/src/components/Game/Game.js
+++ b/src/components/Game/Game.js
@@ -2,6 +2,7 @@ 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);
@@ -9,7 +10,11 @@ const answer = sample(WORDS);
 console.info({ answer });
 
 function Game() {
-  return <>Put a game here!</>;
+  return(
+    <>
+      <Form />
+    </>
+  );
 }
 
 export default Game;

From c5793429e6381df14422bee0051c5363a10e810b Mon Sep 17 00:00:00 2001
From: AlexRS90 <aramosbengy@gmail.com>
Date: Wed, 15 Nov 2023 12:13:40 -0600
Subject: [PATCH 2/2] Add Validations

---
 src/components/Form/Form.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
index fcc29c6fa..96c27d2ba 100644
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@@ -4,21 +4,23 @@ function Form() {
   const [input, setInput] = React.useState('');
   function guessing(event){
     event.preventDefault();
-    const guess = {
-      guess: input.toUpperCase(),
-    };
+    console.log({input});
     setInput('');
-    console.log(guess);
   }
   return(
-    <form className='guess-input-wrapper' onSubmit={() => guessing(event)}>
+    <form className='guess-input-wrapper' onSubmit={guessing}>
       <label htmlFor='guess-input'>Enter Guess:</label>
-      <input 
+      <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)
+            setInput(event.target.value.toUpperCase())
         )}
       />
     </form>