From ad867e749b6a51e206e2fb3882c2c7f563637b34 Mon Sep 17 00:00:00 2001
From: Sasikant Biswal <biswalsashikant@gmail.com>
Date: Thu, 2 Jun 2022 13:44:10 +0530
Subject: [PATCH] Added first requiredment code i.e frmvalidation

---
 src/Home.js | 42 +++++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/Home.js b/src/Home.js
index afa7452a0..45ca0bf9a 100644
--- a/src/Home.js
+++ b/src/Home.js
@@ -1,29 +1,53 @@
 import "./App.css";
 import { useState, useEffect } from "react";
 import { NavLink } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 
 function Home() {
   const [text, setText] = useState("");
   const [isReady, setIsReady] = useState(false);
+  const history = useHistory();
+
+  const handleChange = (e) => {
+    setText(e.target.value);
+    validate();
+  }
+
+  const validate = () => {
+    const msg = text + '!'
+    if (msg !== "Ready!") {
+      setIsReady(false);
+    } else {
+      setIsReady(true)
+      setText("");
+    }
+  }
+
+  const redirect = () => {
+    history.push('/pokedex');
+  }
 
   return (
     <div className="App">
       <header className="App-header">
-        <img
-          hidden={!isReady}
-          src="https://www.freeiconspng.com/uploads/file-pokeball-png-0.png"
-          className="App-logo"
-          alt="logo"
-          style={{ padding: "10px" }}
-        />
+        <NavLink to="/pokedex">
+          <img
+            hidden={!isReady}
+            src="https://www.freeiconspng.com/uploads/file-pokeball-png-0.png"
+            className="App-logo"
+            alt="logo"
+            style={{ padding: "10px", cursor: "pointer" }}
+            onClick={redirect}
+          />
+        </NavLink>
         <b>
           Requirement: Try to show the hidden image and make it clickable that
           goes to /pokedex when the input below is "Ready!" remember to hide the
           red text away when "Ready!" is in the textbox.
         </b>
         <p>Are you ready to be a pokemon master?</p>
-        <input type="text" name="name" />
-        <span style={{ color: "red" }}>I am not ready yet!</span>
+        <input type="text" name="name" value={text} onChange={handleChange} />
+        {!isReady && <span style={{ color: "red" }}>I am not ready yet!</span>}
       </header>
     </div>
   );