|
| 1 | +import React , {useState} from 'react' |
| 2 | + |
| 3 | +export default function Textform(props) { |
| 4 | + const [text , setText] = useState("") ; |
| 5 | + //click |
| 6 | + const handleUpperCaseEvent = () => { |
| 7 | + let newText = text.toUpperCase() ; |
| 8 | + setText(newText) ; |
| 9 | + } |
| 10 | + |
| 11 | + //Lower |
| 12 | + const handleLowerCaseEvent = () => { |
| 13 | + let newText = text.toLowerCase() ; |
| 14 | + setText(newText) ; |
| 15 | + } |
| 16 | + |
| 17 | + //clear |
| 18 | + const handleClearTextEvent = () => { |
| 19 | + let newText = '' ; |
| 20 | + setText(newText) ; |
| 21 | + |
| 22 | + } |
| 23 | + |
| 24 | + //Remove all symbol |
| 25 | + const handleClearSymbolEvent = () => { |
| 26 | + const Regex = /[0-9/A-Z/a-z/ /]/g; ; |
| 27 | + const letter = text.match(Regex) ; |
| 28 | + const res = letter.join('') ; |
| 29 | + setText(res) ; |
| 30 | + } |
| 31 | + |
| 32 | + //Filert Numbers |
| 33 | + const handleFilterNUmberEvent = () => { |
| 34 | + const Number = /[0-9]+/g; |
| 35 | + const letterdata = text.match(Number) ; |
| 36 | + const result = letterdata.join(' ') ; |
| 37 | + setText(result) ; |
| 38 | + } |
| 39 | + |
| 40 | + //speak the message |
| 41 | + const speak = () => { |
| 42 | + let msg = new SpeechSynthesisUtterance(); |
| 43 | + msg.text = text; |
| 44 | + window.speechSynthesis.speak(msg); |
| 45 | + } |
| 46 | + |
| 47 | + //email finder |
| 48 | + const EmailFinder = () => { |
| 49 | + let email = /\S+@\S+\.\S+/g; |
| 50 | + let newemail = text.match(email) ; |
| 51 | + let result = newemail.join(' , ') ; |
| 52 | + setText(result) ; |
| 53 | + } |
| 54 | + |
| 55 | + //Titlecase |
| 56 | + const handleTitleCasingEvent = () => { |
| 57 | + |
| 58 | + let words = text.split(" ").map(word => { |
| 59 | + return word.charAt(0).toUpperCase()+word.slice(1); |
| 60 | + }) |
| 61 | + let newText = words.join(" "); |
| 62 | + setText(newText); |
| 63 | + } |
| 64 | + |
| 65 | + //handle reversecasing |
| 66 | + const handleReverseCasingEvent = () => { |
| 67 | + Text = text.split(""); |
| 68 | + let reverseText = Text.reverse().toString().replaceAll(",", ""); |
| 69 | + setText(reverseText) |
| 70 | + } |
| 71 | + |
| 72 | + //click to copy |
| 73 | + const handleCopyEvent = () => { |
| 74 | + var text = document.getElementById("Messagearea"); |
| 75 | + text.select(); |
| 76 | + text.setSelectionRange(0, 9999999); |
| 77 | + navigator.clipboard.writeText(text.value); |
| 78 | + } |
| 79 | + |
| 80 | + |
| 81 | + // Click to Change the Color of Text Randomly |
| 82 | + const changeColor = (number) => { |
| 83 | + const color = ['red', 'blue', 'yellow', 'orange', 'green', 'black', 'pink', 'salmon', 'teal' , 'gold' , 'greenyellow']; |
| 84 | + document.getElementById('Messagearea').style.color = color[number]; |
| 85 | + } |
| 86 | + // |
| 87 | + const handleOnChangeData = (event) => { |
| 88 | + setText(event.target.value) |
| 89 | + } |
| 90 | + return ( |
| 91 | + <> |
| 92 | + <div className='contaner'> |
| 93 | + <div className="form-group text-light"> |
| 94 | + <label htmlFor="exampleFormControlTextarea1"> <h4> {props.heading} </h4> </label> |
| 95 | + <textarea className="form-control" id="Messagearea" value={text} onChange={handleOnChangeData} rows="12"></textarea> |
| 96 | + </div> |
| 97 | + |
| 98 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleUpperCaseEvent}> uppercase </button> |
| 99 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleLowerCaseEvent}> Lowercase </button> |
| 100 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleClearTextEvent}> Clear Text </button> |
| 101 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleClearSymbolEvent}> Clear Symbol </button> |
| 102 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleFilterNUmberEvent}> Filer Number </button> |
| 103 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={speak}>Speak Text</button> |
| 104 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={EmailFinder}>Email Finder</button> |
| 105 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleTitleCasingEvent}>TitleCase</button> |
| 106 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleReverseCasingEvent}>Reversecase</button> |
| 107 | + <button className="btn btn-primary btn-block my-4 text-uppercase mx-3" onClick={handleCopyEvent}>Click to Copy</button> |
| 108 | + <button className="btn btn-primary mx-1" type="button" onClick={() => changeColor(Math.floor(Math.random() * 5))}>Change Color</button> |
| 109 | + |
| 110 | + </div> |
| 111 | + |
| 112 | + <div className="container text-light my-3"> |
| 113 | + <h1 className='text-danger'> Your Text Summery </h1> |
| 114 | + <p> |
| 115 | + {text.split(" ").length} Words and {text.length} Characters <br /> |
| 116 | + <span className='text-danger'>{0.008* text.split(" ").length}</span> Minutes Time to Read this by Words <br /> |
| 117 | + <span className='text-danger'> {0.002* text.length} Minutes time to read by characters. </span> |
| 118 | + </p> |
| 119 | + <h2>Preview</h2> |
| 120 | + <p> |
| 121 | + {text} |
| 122 | + </p> |
| 123 | + </div> |
| 124 | + </> |
| 125 | + ) |
| 126 | +} |
0 commit comments