Video 9 Completed

Author: harrycodewithharry

src/components/Navbar.js

@@ -18,10 +18,10 @@ export default function Navbar(props) {
                             <a className="nav-link" href="/">{props.aboutText}</a>
                         </li>
                     </ul>
-                    <form className="d-flex">
+                    {/* <form className="d-flex">
                         <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
                         <button className="btn btn-primary" type="submit">Search</button>
-                    </form>
+                    </form> */}
                 </div>
             </div>
         </nav>

src/components/TextForm.js

@@ -7,12 +7,17 @@ export default function TextForm(props) {
         let newText = text.toUpperCase();
         setText(newText)
     }
-    const handleLoClick = ()=>{
-        // console.log("Uppercase was clicked: " +  text);
+
+    const handleLoClick = ()=>{ 
         let newText = text.toLowerCase();
         setText(newText)
     }
 
+    const handleClearClick = ()=>{ 
+        let newText = '';
+        setText(newText)
+    }
+
     const handleOnChange = (event)=>{
         // console.log("On change");
         setText(event.target.value)
@@ -30,6 +35,7 @@ export default function TextForm(props) {
             </div>
             <button className="btn btn-primary mx-1" onClick={handleUpClick}>Convert to Uppercase</button>
             <button className="btn btn-primary mx-1" onClick={handleLoClick}>Convert to Lowercase</button>
+            <button className="btn btn-primary mx-1" onClick={handleClearClick}>Clear Text</button>
         </div>
         <div className="container my-3">
             <h2>Your text summary</h2>