third

Nitesh123-Nits · Aug 28, 2021 · 3674c1c · 3674c1c
1 parent 3a3f2c3
commit 3674c1c
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/src/App.js b/src/App.js
@@ -22,16 +22,16 @@ setTimeout(()=>{
   setAlert(null);
 },2600)
   }
- const removeBodyClasses=()=>{
-   document.body.classList.remove("bg-light");
-   document.body.classList.remove("bg-dark");
-   document.body.classList.remove("bg-warning");
-   document.body.classList.remove("bg-danger");
-   document.body.classList.remove("bg-success");
- }
+//  const removeBodyClasses=()=>{
+//    document.body.classList.remove("bg-light");
+//    document.body.classList.remove("bg-dark");
+//    document.body.classList.remove("bg-warning");
+//    document.body.classList.remove("bg-danger");
+//    document.body.classList.remove("bg-success");
+//  }
   const toggleMode = (cls)=>{
-    removeBodyClasses();
-    document.body.classList.add("bg-"+cls);
+    // removeBodyClasses();
+    // document.body.classList.add("bg-"+cls);
 
     if(mode==='light'){
       setMode('dark');

diff --git a/src/component/About.js b/src/component/About.js
@@ -1,4 +1,4 @@
-import React ,{useState} from 'react'
+import React from 'react'
 
 export default function About(props) {
 //  const [myStyle,setmyStyle]=useState({

diff --git a/src/component/Navbar.js b/src/component/Navbar.js
@@ -13,17 +13,17 @@ export default function Navbar(props) {
           <div className="collapse navbar-collapse" id="navbarSupportedContent">
             <ul className="navbar-nav me-auto mb-2 mb-lg-0">
               <li className="nav-item">
-                <Link className="nav-link active" aria-current="page" to="/">Home</Link>
+                <Link className="nav-link " aria-current="page" to="/">Home</Link>
               </li>
               <li className="nav-item">
                 <Link className="nav-link" to="/About">About</Link>
               </li>
             </ul>
-            <div className="d-flex">
+            {/* <div className="d-flex">
               <div className="bg-success rounded mx-2" onClick={()=> props.toggleMode('success')} style={{height:'20px',width:'20px',cursor:'pointer'}}></div>
               <div className="bg-danger rounded mx-2" onClick={()=> props.toggleMode('danger')} style={{height:'20px',width:'20px',cursor:'pointer'}}></div>
               <div className="bg-warning rounded mx-2" onClick={()=> props.toggleMode('warning')} style={{height:'20px',width:'20px',cursor:'pointer'}}></div>
-            </div>
+            </div> */}
             <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
               <input className="form-check-input" onClick={()=>{props.toggleMode(null)}} type="checkbox" id="flexSwitchCheckDefault"/>
              <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{`Toggle mode`}</label>

diff --git a/src/component/TextForm.js b/src/component/TextForm.js
@@ -14,30 +14,31 @@ export default function TextForm(props) {
     const handleOnChange=(event)=>{
     setText(event.target.value);
     }
+    const txt=document.getElementById("myBox");
     const bold=()=>{
-        const txt=document.getElementById("myBox");
+
         txt.style.fontWeight="700";
     }
     const normal=()=>{
-        const txt=document.getElementById("myBox");
+
         txt.style.fontWeight="400";
     }
     const italic=()=>{
-        const txt=document.getElementById("myBox");
+
         txt.style.fontStyle="italic";
     }
     const textNormal=()=>{
-        const txt=document.getElementById("myBox");
+
         txt.style.fontStyle="normal";
     }
 
     const color=()=>{
-        const txt=document.getElementById("myBox");
+
         const clr=document.getElementById("color");
         txt.style.color=clr.value;
     }
     const txtarbg=()=>{
-        const txt=document.getElementById("myBox");
+
         const clr=document.getElementById("color2");
         txt.style.backgroundColor=clr.value;
     }
@@ -46,7 +47,7 @@ export default function TextForm(props) {
         setText(newText);
     }
     const handleCopy=()=>{
-        const txt=document.getElementById("myBox");
+
         txt.select();
         navigator.clipboard.writeText(txt.value);
         document.getSelection().removeAllRanges();
@@ -85,7 +86,7 @@ export default function TextForm(props) {
 </div>
 <div className={`container my-3 text-${props.mode==='light'?'dark':'light'}`}>
     <h1>Your text summary</h1>
-    <p><b>{text.split(" ").filter((e)=>{return e.length!==0}).length }</b> words,<b>{text.length}</b> characters</p>
+    <p><b>{text.split(/\s+/).filter((e)=>{return e.length!==0}).length }</b> words,<b>{text.length}</b> characters</p>
     <p><b>{.008*text.split(" ").filter((e)=>{return e.length!==0}).length}</b> minutes to read</p>
     <h3>Preview</h3>
     <p>{text.length>0?text:"Enter something in the text box to preview it here!"}</p>