What kind of textform do we want?
We want a textForm that can perform following operations:
--> You can enter a text in a textbox
--> Text Summary, Reading Time and Text View is output which is generated from input text
--> Can perform operations to input text such as:
--> Convert to Uppercase :
changes entire text into uppercase(All Capital Alphabets)
--> Convert to Lowercase :
changes entire text into lowercase(All small alphabets)
--> Clear Text:
Removes the entire text
--> Copy Text:
Copies the text inside textbox
--> Remove Extra Spaces
Removes extra spaces in the entire text
--> The appearance must managed considered dark and light mode
Image 1 - Appearance of TextForm component
Creating our first component TextForm
These are the following steps we will perform to create our TextForm:
1- Inside folder name components in our src folder of project add TextForm.js.
2- In TextForm.js , Inside return of jsx format
Copy paste textarea code from form control from bootstrap website .
Copy paste button code with different colours from bootstrap website and add other content using basic html.
Make changes according to jsx format in TextForm.js
--> class written as className
--> for written as htmlFor
--> tabindex written as tabIndex.
Add props you want to manage or change according to functional working of website like:
heading :
heading where component starts
mode1 :
Text color outside of textbox
togglemode :
onClick function that checks the situation for dark or light mode when someone clicks the mouse and functions accordingly
showAlert :
Generating alert according to the function executed
src --> components --> TextForm.js
import React, { useState } from 'react';
export default function TextForm(props) {
const [text, setText] = useState('Enter text here');
//Setting value of text by taking input from user
const handleOnChange = (event) => {
setText(event.target.value)
}
//Function executed when uppercase button pressed
const handleUpClick = () => {
let newText = text.toUpperCase();
setText(newText);
props.showAlert('Converted to UpperCase','Success:')
}
//Function executed when uppercase button pressed
const handleLowClick = () => {
let newText = text.toLowerCase();
setText(newText);
props.showAlert('Converted to LowerCase','Success:')
}
//Function executed when lowercase button pressed
const handleClearClick = () => {
let newText = " ";
setText(newText);
props.showAlert('Text Cleared','Success:')
}
//Function executed when Copy Text button pressed
const handleCopy = () => {
var text = document.getElementById("myBox");
text.select();
navigator.clipboard.writeText(text.value);
props.showAlert('Text Copied','Success:')
}
//Function executed when remove extra spaces button pressed
const handleSpace = () => {
let newText = text.split(/[" "]+/);
setText(newText.join(" "));
props.showAlert('Removed Extra Spaces','Success:')
}
return (
<>
<div className={`container my-5 text-${props.mode1}`}>
<h1 >{props.heading}</h1>
<div className="mb-3">
<textarea className="form-control" value={text} onChange={handleOnChange} id="myBox" rows="8"></textarea>
</div>
<button className="btn btn-primary mx-1" onClick={handleUpClick}>Convert to Uppercase</button>
<button className="btn btn-success mx-1" onClick={handleLowClick}>Convert to Lowercase</button>
<button className="btn btn-danger mx-1" onClick={handleClearClick}>Clear Text</button>
<button className="btn btn-info mx-1" onClick={handleCopy}>Copy Text</button>
<button className="btn btn-secondary mx-1" onClick={handleSpace}>Remove Extra Spaces</button>
</div>
<div className={`container my-5 text-${props.mode1}`}>
<h2>Text Summary</h2>
There are <strong>{text.length}</strong> characters and <strong>{text.split(" ").length}</strong> words in your textbox.
</div>
<div className={`container my-5 text-${props.mode1}`}>
<h2>Reading Time</h2>
If you can read 0.08 minutes per word then time taken for reading entire text is <strong>{0.08 * text.split(" ").length}</strong> minutes
</div>
<div className={`container my-5 text-${props.mode1}`}>
<h2>Text View</h2>
{text}
</div>
</>
)
}
3- Go to app.js and add your component in return by setting props for TextForm
src --> App.js
import React, { useState } from 'react'
import './App.css';
import Navbar from './components/Navbar';
import Alert from './components/Alert';
import TextForm from './components/TextForm';
function App() {
//Using State to Generate dismissable alert
const [alert, setAlert] = useState(null);
const showAlert = (message, type) => {
setAlert(
{
msg: message,
type: type
}
)
setTimeout(() => {
setAlert(null);
}, 1500);
}
// Using State to apply Dark Mode and Light Mode CSS
const [Mode, setMode] = useState('light');
const [Mode1, setMode1] = useState('dark');
const toggleMode = () => {
if (Mode === 'dark') {
setMode("light");
setMode1("dark");
document.body.style.backgroundColor = 'white';
showAlert('Light Mode is Enabled', 'Success:')
}
else {
setMode("dark");
setMode1("light")
document.body.style.backgroundColor = 'indigo';
showAlert('Dark Mode is Enabled', 'Success:')
}
}
return (
<>
<Navbar title="TextBox"about="About" mode={Mode} mode1={Mode1} ToggleMode={toggleMode} />
<Alert alert={alert} />
<TextForm heading="Enter your text to analyse" mode1={Mode1} ToggleMode={toggleMode} showAlert={showAlert} />
</>
);
}
export default App;
Image 2 - Final Image in Light Mode
Image 3 - Final Image in Dark Mode
Comments
Post a Comment