first project using React Js

Author: vishwajitvm

src/App.js

@@ -1,14 +1,16 @@
 import './App.css';
 import Navbar from './components/Navbar';
 import Textform from './components/TextForm';
+import Textform2 from './components/Textform2' ;
 
 let name = "vishwajit vm" ;
 function App() {
   return (
     <>
     <Navbar title="Bloging Page" aboutTitle="About Us"></Navbar>
     <div className="container">
-      <Textform heading="Enter Text To View Transform"></Textform>
+      {/* <Textform heading="Enter Text To View Transform"></Textform> */}
+      <Textform2 Headings="EXPERIMENT ZONE"></Textform2>
     </div>
     </>
   );

src/components/TextForm.js

@@ -83,6 +83,14 @@ export default function Textform(props) {
         const color = ['red', 'blue', 'yellow', 'orange', 'green', 'black', 'pink', 'salmon', 'teal' , 'gold' , 'greenyellow'];
         document.getElementById('Messagearea').style.color = color[number];
     }
+
+    //Change font size 
+    const changFontSize = (number) => {
+        const fontsize = [100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900];
+        document.getElementById("Messagearea").style.fontWeight = fontsize[number]
+
+    }
+
     //
     const handleOnChangeData = (event) => {
         setText(event.target.value)
@@ -91,7 +99,7 @@ export default function Textform(props) {
         <>
             <div className='contaner'>
                 <div className="form-group text-light">
-                    <label htmlFor="exampleFormControlTextarea1"> <h4> {props.heading} </h4> </label>
+                    <label htmlFor="exampleFormControlTextarea1" className='mt-5 mb-2'> <h2> {props.heading} </h2> </label>
                     <textarea className="form-control" id="Messagearea" value={text} onChange={handleOnChangeData} rows="12"></textarea>
                 </div>
 
@@ -105,16 +113,18 @@ export default function Textform(props) {
                 <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleTitleCasingEvent}>TitleCase</button>
                 <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleReverseCasingEvent}>Reversecase</button>
                 <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleCopyEvent}>Click to Copy</button>
-                <button className="btn btn-primary mx-1" type="button" onClick={() => changeColor(Math.floor(Math.random() * 5))}>Change Color</button>
+                <button className="btn btn-primary mx-3 my-4" onClick={() => changeColor(Math.floor(Math.random() * 5))}>Change Color</button>
+                <button className="btn btn-primary mx-1" onClick={() => changFontSize(Math.floor(Math.random() * 9))}>Change Font size</button>
+
 
             </div>
 
             <div className="container text-light my-3">
                 <h1 className='text-danger'> Your Text Summery </h1>
                 <p>
-                    {text.split(" ").length} Words and {text.length} Characters <br />
+                    <span className='text-danger'> {text.split(" ").length} </span> Words and <span className='text-danger'> {text.length} </span> Characters <br />
                     <span className='text-danger'>{0.008* text.split(" ").length}</span> Minutes Time to Read this by Words <br />
-                    <span className='text-danger'> {0.002* text.length} Minutes time to read by characters. </span>
+                    <span className='text-danger'> {0.002* text.length} </span> Minutes time to read by characters. 
                 </p>
                 <h2>Preview</h2>
                 <p>

src/components/Textform2.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function TextForm2(props) {
+    return (
+        <>
+            <div class="form-group">
+                <label for="exampleFormControlTextarea1" className='text-light'><h2> {props.Headings} </h2></label>
+                <textarea class="form-control" id="exampleFormControlTextarea1"  rows="12"></textarea>
+            </div>
+
+            <button className="btn btn-block btn-primary my-4 mx-3">UpperCase</button>
+        </>
+    )
+}