Skip to content

Commit 000c9ed

Browse files
hcoder-404hcoder-404
committed
Using React Js
1 parent 2c8ff28 commit 000c9ed

8 files changed

Lines changed: 163 additions & 15 deletions

File tree

‎public/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27+
28+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
29+
2730
<title>React App</title>
2831
</head>
2932
<body>
@@ -40,4 +43,6 @@
4043
To create a production bundle, use `npm run build` or `yarn build`.
4144
-->
4245
</body>
46+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
47+
4348
</html>

‎src/App.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,7 @@
3636
transform: rotate(360deg);
3737
}
3838
}
39+
40+
.blank{
41+
color: rgb(32, 8, 246);
42+
}

‎src/App.js‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,41 @@
11
import logo from './logo.svg';
22
import './App.css';
3+
import Navbar from './components/Navbar';
4+
import FromText from './components/FromText';
5+
import React, {useState} from 'react';
6+
import Alert from './components/Alert';
37

48
function App() {
9+
const [alert, setAlert] = useState(null);
10+
const [mode, setMode] = useState('light');
11+
12+
const showAlert = (message, type) => {
13+
setAlert({message: message, type: type})
14+
setTimeout(() => {
15+
setAlert(null);
16+
},1500);
17+
}
18+
19+
const toggleMode = () => {
20+
if(mode === 'light'){
21+
setMode('dark');
22+
document.body.style.backgroundColor = '#042743';
23+
showAlert("Dark Mode Enabled", "success");
24+
}
25+
else{
26+
setMode('light');
27+
document.body.style.backgroundColor = 'white';
28+
showAlert("Light Mode Enabled", "success");
29+
}
30+
}
531
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
32+
<>
33+
<Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
34+
<Alert alert={alert} />
35+
<div className="container my-3">
36+
<FromText showAlert={showAlert} mode={mode} />
2137
</div>
38+
</>
2239
);
2340
}
2441

‎src/components/About.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
export default function About() {
4+
return (
5+
<div>
6+
<h1>About</h1>
7+
</div>
8+
)
9+
}

‎src/components/Alert.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types'
3+
4+
5+
export default function Alert(props){
6+
return(
7+
<div style={{height: '50px'}}>
8+
{props.alert && <div className={`alert alert-${props.alert.type} alert-dismissible fade show`} role="alert">
9+
<strong>{props.alert.type}</strong> {props.alert.message}
10+
</div> }
11+
</div>
12+
)
13+
}

‎src/components/FromText.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React, {useState} from 'react';
2+
import PropTypes from 'prop-types'
3+
4+
5+
6+
export default function FromText(props){
7+
const UpperCaseText = () => {
8+
let newText = text.toUpperCase();
9+
setText(newText);
10+
props.showAlert("Text converted to uppercase", "success");
11+
}
12+
const LowerCaseText = () => {
13+
let newText = text.toLowerCase();
14+
setText(newText);
15+
props.showAlert("Text converted to lowercase", "success");
16+
}
17+
18+
const RemoveExtraSpaces = () => {
19+
let newText = text.split(/[ ]+/);
20+
setText(newText.join(" "));
21+
props.showAlert("Extra spaces removed", "success");
22+
}
23+
24+
const RemoveText = () => {
25+
setText("");
26+
props.showAlert("Text cleared", "success");
27+
}
28+
29+
const CopyText = () => {
30+
navigator.clipboard.writeText(text);
31+
props.showAlert("Text copied to clipboard", "success");
32+
}
33+
34+
35+
const handleOnChange = (e) => {
36+
setText(e.target.value);
37+
}
38+
39+
const [text, setText] =useState("");
40+
return(
41+
<>
42+
<div className='container' style={{color:props.mode==='dark'?'white':'#042743'}}>
43+
<h1>Enter the text to analyze below</h1>
44+
<div className="mb-3">
45+
<textarea className="form-control" placeholder='Enter your text here' id="textArea" onChange={handleOnChange} value={text} rows="8" style={{backgroundColor: props.mode === 'dark'?'#13466e':'white', color:props.mode==='dark'?'white':'#042743'}}></textarea>
46+
</div>
47+
<button disabled={text.length === 0} className="btn btn-primary mx-1 my-1" onClick={UpperCaseText}>Convert to Uppercase</button>
48+
49+
<button disabled={text.length === 0} className='btn btn-primary mx-1 my-1' onClick={LowerCaseText}>Convert to Lowercase</button>
50+
51+
<button disabled={text.length === 0} className='btn btn-primary mx-1 my-1' onClick={RemoveExtraSpaces}>Remove Extra Spaces</button>
52+
53+
<button disabled={text.length === 0} className='btn btn-primary mx-1 my-1' onClick={RemoveText}>Clear Text</button>
54+
55+
<button disabled={text.length === 0} className='btn btn-primary mx-1 my-1' onClick={CopyText}>Copy Text</button>
56+
</div>
57+
<div className='container my-3' style={{color:props.mode==='dark'?'white':'#042743'}}>
58+
<h2>Your text summary</h2>
59+
<p>{text.split(/\s+/).filter((element) => {return element.length !== 0}).length } words, {text.length} characters</p>
60+
<p>{0.008 * text.split(" ").filter((element) => {return element.length !== 0}).length} Minutes read</p>
61+
<h2>Preview</h2>
62+
<p>{text.length>0?text:"Enter something in the textbox above to preview it here"}</p>
63+
</div>
64+
</>
65+
)
66+
}

‎src/components/Navbar.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types'
3+
4+
export default function Navbar(props) {
5+
return (
6+
<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
7+
<div className="container-fluid">
8+
<a className="navbar-brand" href="#">{props.title}</a>
9+
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
10+
<span className="navbar-toggler-icon"></span>
11+
</button>
12+
<div className="collapse navbar-collapse" id="navbarSupportedContent">
13+
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
14+
<li className="nav-item">
15+
<a className="nav-link active" aria-current="page" href="#">Home</a>
16+
</li>
17+
{/* <li className="nav-item">
18+
<a className="nav-link" href="#">About</a>
19+
</li> */}
20+
</ul>
21+
22+
<div className={`form-check form-switch text-${props.mode === 'light'?'dark':'light'}`}>
23+
<input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
24+
<label className="form-check-label" htmlFor="flexSwitchCheckDefault">Enable DarkMode</label>
25+
</div>
26+
</div>
27+
</div>
28+
</nav>
29+
)
30+
}

‎src/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@ code {
1111
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
1212
monospace;
1313
}
14+
15+
.accordion-button::after {
16+
filter: invert(1);
17+
}

0 commit comments

Comments
 (0)