Add files via upload

Author: Shubham56-droid

public/index.html

@@ -9,6 +9,8 @@
       name="description"
       content="This react app is created using react by shubham"
     />
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

src/App.js

@@ -4,29 +4,50 @@ import Footer from './components/Footer';
 import Navbar from './components/Navbar.js';
 import About from './components/About.js'
 import TextForm from './components/TextForm.js'
+import Alert from './components/Alert.js';
 
 function App() 
 {
   const [mode, setMode] = useState('light');
+  /* ---------Alert into website----------- */
+  const [alert,setAlert] = useState(null);
+
+  const showAlert = (message,type) => {
+
+    /* Object created to set alert : */
+    setAlert({
+        msg : message,
+        type: type
+    })
+
+    /* Auto dismissing the alert after some time : */
+
+    setTimeout(() => {
+      setAlert(null);
+    },1500);
+  }
 
   const togglemode = () => {
     if( mode=== 'dark')
     {
       setMode('light');
       document.body.style.background = "linear-gradient(45deg, rgb(241, 241, 241) 50%, rgb(158, 232, 255) 50%)";
+      showAlert("Light mode has been enabled","success");
     }
     else
     {
       setMode('dark');
       document.body.style.background = "linear-gradient(45deg, rgb(92, 92, 92) 50%, rgb(27, 27, 27) 50%)";
+      showAlert("Dark mode has been enabled","success");
     }
   }
 
 
   return (
     <>
       <Navbar title="TextUtils"  about="About Us" mode={mode} togglemode={togglemode}/>
-      <TextForm heading="Text Analysis And Convertor" summaryHead="Summery Of Your Text" mode={mode}/>
+      <Alert alert={alert} />
+      <TextForm heading="Text Analysis And Convertor" summaryHead="Summery Of Your Text" mode={mode} showAlert={showAlert}/>
       {/* <About mode={mode}/> */}
       <Footer creatername="Shubham Bawankar"/>
     </>

src/components/Alert.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default function Alert(props) {
+  const capatalize = (word) => {
+    const lower  = word.toLowerCase();
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+  }
+  return (
+    
+    /* if props.alert is not null then we will get rest code */
+
+      props.alert && <div class={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
+          <strong>{capatalize(props.alert.type)} </strong>: {props.alert.msg}
+        </div>
+   
+  )
+}

src/components/TextForm.js

@@ -10,44 +10,77 @@ export default function TextForm(props) {
   }
 
   const handleUpChange = () =>{
-    // console.log("you have clicked on uppercase");
-    let newUppertext = text.toUpperCase();
-    setText(newUppertext);
+    if( text != '')
+    {
+      let newUppertext = text.toUpperCase();
+      setText(newUppertext);
+      props.showAlert("Converted to Uppercase","success");
+    }
+    else
+    {
+      props.showAlert("There's Nothing To UpperCase Into TextBox","warning");
+    }
   }
 
   const handleLoChange = () => {
     // console.log("you have clicked on lowercase");
-    let newLowertext = text.toLowerCase();
-    setText(newLowertext);
+    if( text != '')
+    {
+      let newLowertext = text.toLowerCase();
+      setText(newLowertext);
+      props.showAlert("Converted to Lowercase","success");
+    }
+    else
+    {
+      props.showAlert("There's Nothing To LowerCase Into TextBox","warning");
+    }
+    
   }
 
   const handleClear = () => {
     //   console.log("You have clicked on clear");
+    if(text != '')
+    {
       let cleartext = "";
       setText(cleartext);
+      props.showAlert("Cleared the whole text","danger");
+    }
+    else
+    {
+      props.showAlert("There's Nothing To Clear Into TextBox","warning");
+    }
   }
 
   const handleOnChangeAlert = () => {
-      alert("You cannot make changes in preview");
+      props.showAlert("You cannot make changes into preview","warning");
   }
 
   const handlecopyfunction = () => {
-    var copyText = document.getElementById("text");
-    copyText.select();
-    navigator.clipboard.writeText(copyText.value);
-    if(copyText.value != '')
+    if(text != '')
     {
-      alert("Copied the text: " + copyText.value);
+      var copyText = document.getElementById("text");
+      copyText.select();
+      navigator.clipboard.writeText(copyText.value);
+      props.showAlert("Copied the text : "+ copyText.value, "success");
     }
     else
     {
-      alert('Pls write some text into textbox');
-    } 
+      props.showAlert("There's Nothing To Copy Into TextBox","warning");
+    }
+    
   }
 
   const handleExtraspaces = () => {
-    let newText = text.split(/[ ]+/);
-    setText(newText.join(" "))
+    if(text != '')
+    {
+      let newText = text.split(/[ ]+/);
+      setText(newText.join(" "));
+      props.showAlert("All extra spaces are cleared","success");
+    }
+    else
+    {
+      props.showAlert("There's Nothing Remove Spaces Into TextBox","warning");
+    }
   }
 
 
@@ -82,7 +115,10 @@ export default function TextForm(props) {
 
 
   return (
+    
+
     <div className="main">
+     
     <div className="container my-5">
         <h1 className="text-center" style={props.mode==='dark'?style2dark:style2light}>{props.heading}</h1>
       <div className="mb-3 my-3" >