Video 12 Completed

Author: harrycodewithharry

src/App.js

@@ -1,15 +1,29 @@
 import './App.css';
 import Navbar from './components/Navbar';
 import TextForm from './components/TextForm';
+import React, { useState } from 'react';
+
 
 function App() {
+  const [mode, setMode] = useState('light'); // Whether dark mode is enabled or not
+
+  const toggleMode = ()=>{
+    if(mode === 'light'){
+      setMode('dark');
+      document.body.style.backgroundColor = '#042743';
+    }
+    else{
+      setMode('light');
+      document.body.style.backgroundColor = 'white';
+    }
+  }
   return (
     <>
     {/* <Navbar title="TextUtils" aboutText="About TextUtils" /> */}
     {/* <Navbar/> */}
-    <Navbar title="TextUtils" />
+    <Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
     <div className="container my-3">
-    <TextForm heading="Enter the text to analyze below"/>
+    <TextForm heading="Enter the text to analyze below" mode={mode}/>
     </div>
     </> 
   );

src/components/Navbar.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 export default function Navbar(props) {
     return (
-        <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
+        <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
             <div className="container-fluid">
                 <a className="navbar-brand" href="/">{props.title}</a>
                 <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -20,8 +20,13 @@ export default function Navbar(props) {
                     </ul>
                     {/* <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>
+                        <button cla
+                        ssName="btn btn-primary" type="submit">Search</button>
                     </form> */}
+                    <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
+                        <input className="form-check-input" onClick={props.toggleMode} type="checkbox" id="flexSwitchCheckDefault"/>
+                        <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Enable DarkMode</label>
+                    </div>
                 </div>
             </div>
         </nav>

src/components/TextForm.js

@@ -43,23 +43,23 @@ export default function TextForm(props) {
     // setText("new text"); // Correct way to change the state
     return (
         <>
-        <div className="container"> 
+        <div className="container" style={{color: props.mode==='dark'?'white':'#042743'}}> 
             <h1>{props.heading}</h1>
             <div className="mb-3"> 
-            <textarea className="form-control" value={text} onChange={handleOnChange} id="myBox" rows="8"></textarea>
+            <textarea className="form-control" value={text} onChange={handleOnChange} style={{backgroundColor: props.mode==='dark'?'grey':'white', color: props.mode==='dark'?'white':'#042743'}} id="myBox" rows="8"></textarea>
             </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>
             <button className="btn btn-primary mx-1" onClick={handleCopy}>Copy Text</button>
             <button className="btn btn-primary mx-1" onClick={handleExtraSpaces}>Remove Extra Spaces</button>
         </div>
-        <div className="container my-3">
+        <div className="container my-3" style={{color: props.mode==='dark'?'white':'#042743'}}>
             <h2>Your text summary</h2>
             <p>{text.split(" ").length} words and {text.length} characters</p>
             <p>{0.008 *  text.split(" ").length} Minutes read</p>
             <h2>Preview</h2>
-            <p>{text}</p>
+            <p>{text.length>0?text:"Enter something in the textbox above to preview it here"}</p>
         </div>
         </>
     )