Added alerts in project

Author: yashpatel-py

src/App.js

@@ -1,30 +1,50 @@
 import { useState } from 'react';
 import './App.css';
+import Alerts from './components/Alerts';
 import Navbar from './components/Navbar';
 import TextForm from './components/TextForm';
 // import AboutUs from './components/AboutUs'
 
 function App() {
-  const [mode, setMode] = useState('light')
+  // Stat for light and dark mode
+  const [mode, setMode] = useState('light');
+
+  // State for alert
+  const [alert, setAlert] = useState(null);
+
+  const showAlert = (message, type) => {
+    setAlert({
+      msg: message,
+      type: type
+    });
+    setTimeout(() => {
+      setAlert(null)
+    }, 1500)
+  }
 
   const toggleMode = () => {
     if(mode === 'light'){
       setMode('dark');
       document.body.style.backgroundColor = '#042743';
+      showAlert("Dark mode has been enabled", "success")
     }
     else {
       setMode('light');
       document.body.style.backgroundColor = 'white';
+      showAlert("Light mode has been enabled", "success")
     }
   }
   return (
     <>
       {/* Importing navbar component */}
       <Navbar title = "TU" aboutText= "About us" mode={mode} toggleMode={toggleMode}/>
 
+      {/* Alert */}
+      <Alerts alert={alert} />
+
       {/*Importing TextForm component */}
       <div className="container">
-        <TextForm heading="Enter the text to analyze" mode={mode}/>
+        <TextForm showAlert={showAlert} heading="Enter the text to analyze" mode={mode}/>
       </div>
 
       {/* <AboutUs /> */}

src/components/Alerts.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+
+function Alerts(props) {
+
+  const capitalize = (world) => {
+    const lower = world.toLowerCase();
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+  }
+
+  return (
+    props.alert && <div className={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
+  <strong>{capitalize(props.alert.type)}:</strong> {props.alert.msg}
+</div>
+  )
+}
+
+export default Alerts

src/components/TextForm.js

@@ -6,17 +6,20 @@ export default function TextForm(props) {
     const handleDownClick = () => {
         let newText = text.toLowerCase()
         setText(newText)
+        props.showAlert("Converted to lowercase", "success")
     }
 
     const handleClearText = () => {
         let clearText = ''
         setText(clearText)
+        props.showAlert("Text has been cleared", "success")
     }
 
     // This is a finction for converting lower case to uppaercase
     const handleUpClick = () => {
         let newText = text.toUpperCase()
         setText(newText)
+        props.showAlert("Converted to uppercase", "success")
     }
 
     // This is a function for handling text into TextArea
@@ -30,12 +33,14 @@ export default function TextForm(props) {
         var text = document.getElementById("myBox");
         text.select();
         navigator.clipboard.writeText(text.value)
+        props.showAlert("Text has been copied", "success")
     }
 
     // Handling Extra spaces
     const handleExtraSpaces = () => {
         let newText = text.split(/[ ]+/);
         setText(newText.join(" "))
+        props.showAlert("Extra space has been removed", "success")
     }
 
 
@@ -52,7 +57,7 @@ export default function TextForm(props) {
             <button className="btn btn-primary me-2" onClick={handleUpClick} >Convert to uppercase</button>
 
             {/* Conver to lower case */}
-            <button className="btn btn-primary me-2" onClick={handleDownClick} >Convert to uppercase</button>
+            <button className="btn btn-primary me-2" onClick={handleDownClick} >Convert to lowercase</button>
 
             {/* Copy text */}
             <button className="btn btn-primary me-2" onClick={handleCopy} >Copy Text</button>