update app

Author: rohitbhadane310

project-1/project-app/src/App.js

@@ -14,6 +14,9 @@ function App() {
       msg: message,
       type: type
     })
+    setTimeout(() => {
+      setAlert(null);
+    }, 1500);
   }
 
   const toggleMode = () => {
@@ -37,7 +40,7 @@ function App() {
       <div className="container my-3">
         {/* <TextForm heading = "Enter the text to analyze below"/> */}
         {/* <About /> */}
-        <TextForm mode={mode} />
+        <TextForm showAlert={showAlert} mode={mode} />
       </div>
     </>
   );

project-1/project-app/src/components/Alert.js

@@ -1,10 +1,14 @@
 import React from 'react';
 
 function Alert(props) {
+
+    const capitalize = (word) =>{
+        const lower = word.toLowerCase();
+        return lower.charAt(0).toUpperCase() + lower.slice(1);
+    }
     return (
-        props.alert && <div className="alert alert-warning alert-dismissible fade show" role="alert">
-            <strong>{props.alert.type}</strong>: {props.alert.msg}
-            <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        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>
     )
 }

project-1/project-app/src/components/TextForm.js

@@ -8,18 +8,21 @@ export default function TextForm(props) {
         console.log("upperCase was clicked" + text);
         let newText = text.toUpperCase();
         setText(newText);
+        props.showAlert("Converted to upperCase!" , "success");
     }
 
     const handleLoClick = () => {
         console.log("lowerCase was clicked" + text);
         let newText = text.toLowerCase();
         setText(newText);
+        props.showAlert("Converted to lowerCase!" , "success");
     }
 
     const handleClearClick = () => {
         console.log("clear the text" + text);
         let newText = "";
         setText(newText);
+        props.showAlert("cleared the text!" , "success");
     }
 
     const handleReverseClick = () => {
@@ -34,6 +37,7 @@ export default function TextForm(props) {
             return output.join("");
         };
         setText(newText);
+        props.showAlert("Converted to reverse form!" , "success");
     }
 
     const handleCapitalizeClick = () => {
@@ -48,6 +52,7 @@ export default function TextForm(props) {
             return finalStr;
         }
         setText(newText);
+        props.showAlert("Converted to captilize of each word!" , "success");
     }
 
 
@@ -61,6 +66,7 @@ export default function TextForm(props) {
             <div className="container" style={{color: props.mode ==='dark' ? 'white' : 'black'}}>
                 <h1>{props.heading}</h1>
                 <div className="mb-3">
+                    <label htmlFor="exampleFormControlTextarea1" className="form-label"><h2>Enter the text</h2></label>
                     <textarea className="form-control" value={text} onChange={handleOnChange} style={{backgroundColor: props.mode ==='dark' ? 'gray' : 'white' , color: props.mode ==='dark' ? 'white' : 'black' }} id="myBox" rows="8" ></textarea>
                 </div>
                 <button className="btn btn-primary mx-2" onClick={handleUpClick}>Convert to UpperCase</button>
@@ -70,7 +76,7 @@ export default function TextForm(props) {
                 <button className="btn btn-primary mx-2" onClick={handleReverseClick}>reverse words</button>
             </div>
             <div className="container my-4" style={{color: props.mode ==='dark' ? 'white' : 'black'}}>
-                <h1>your text summary</h1>
+                <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>