Skip to content

Commit 8162ca2

Browse files
committed
Video 21 Completed
1 parent 6a7121b commit 8162ca2

File tree

4 files changed

+13
-37
lines changed

4 files changed

+13
-37
lines changed

src/App.js

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,36 +25,22 @@ function App() {
2525
}, 1500);
2626
}
2727

28-
const removeBodyClasses = ()=>{
29-
document.body.classList.remove('bg-light')
30-
document.body.classList.remove('bg-dark')
31-
document.body.classList.remove('bg-warning')
32-
document.body.classList.remove('bg-danger')
33-
document.body.classList.remove('bg-success')
34-
}
35-
36-
const toggleMode = (cls)=>{
37-
removeBodyClasses();
38-
console.log(cls)
39-
document.body.classList.add('bg-'+cls)
28+
const toggleMode = ()=>{
4029
if(mode === 'light'){
4130
setMode('dark');
4231
document.body.style.backgroundColor = '#042743';
43-
showAlert("Dark mode has been enabled", "success");
32+
showAlert("Dark mode has been enabled", "success");
4433
}
4534
else{
4635
setMode('light');
4736
document.body.style.backgroundColor = 'white';
4837
showAlert("Light mode has been enabled", "success");
49-
// document.title = 'TextUtils - Light Mode';
5038
}
5139
}
5240
return (
5341
<>
54-
{/* <Navbar title="TextUtils" aboutText="About TextUtils" /> */}
55-
{/* <Navbar/> */}
5642
<Router>
57-
<Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} />
43+
<Navbar title="TextUtils" mode={mode} toggleMode={toggleMode} key={new Date()} />
5844
<Alert alert={alert}/>
5945
<div className="container my-3">
6046
<Switch>
@@ -73,4 +59,4 @@ function App() {
7359
);
7460
}
7561

76-
export default App;
62+
export default App;

src/components/Navbar.js

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,16 @@ export default function Navbar(props) {
1313
<div className="collapse navbar-collapse" id="navbarSupportedContent">
1414
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
1515
<li className="nav-item">
16-
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
17-
{/* <a className="nav-link active" aria-current="page" href="#">Home</a> */}
16+
<Link className="nav-link" aria-current="page" to="/">Home</Link>
1817
</li>
1918
<li className="nav-item">
2019
<Link className="nav-link" to="/about">{props.aboutText}</Link>
2120
</li>
2221
</ul>
23-
<div className="d-flex">
24-
<div className="bg-primary rounded mx-2" onClick={()=>{props.toggleMode('primary')}} style={{height: '30px', width:'30px', cursor: 'pointer'}}></div>
25-
<div className="bg-danger rounded mx-2" onClick={()=>{props.toggleMode('danger')}} style={{height: '30px', width:'30px', cursor: 'pointer'}}></div>
26-
<div className="bg-success rounded mx-2" onClick={()=>{props.toggleMode('success')}} style={{height: '30px', width:'30px', cursor: 'pointer'}}></div>
27-
<div className="bg-warning rounded mx-2" onClick={()=>{props.toggleMode('warning')}} style={{height: '30px', width:'30px', cursor: 'pointer'}}></div>
28-
<div className="bg-light rounded mx-2" onClick={()=>{props.toggleMode('light')}} style={{height: '30px', width:'30px', cursor: 'pointer'}}></div>
29-
<div className="bg-dark rounded mx-2" onClick={()=>{props.toggleMode('dark')}} style={{height: '30px', width:'30px', cursor: 'pointer'}}></div>
22+
<div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
23+
<input className="form-check-input" onClick={props.toggleMode} type="checkbox" id="flexSwitchCheckDefault"/>
24+
<label className="form-check-label" htmlFor="flexSwitchCheckDefault">Enable DarkMode</label>
3025
</div>
31-
32-
3326
</div>
3427
</div>
3528
</nav>

src/components/TextForm.js

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React, {useState} from 'react'
33

44
export default function TextForm(props) {
55
const handleUpClick = ()=>{
6-
// console.log("Uppercase was clicked: " + text);
76
let newText = text.toUpperCase();
87
setText(newText)
98
props.showAlert("Converted to uppercase!", "success");
@@ -22,17 +21,12 @@ export default function TextForm(props) {
2221
}
2322

2423
const handleOnChange = (event)=>{
25-
// console.log("On change");
2624
setText(event.target.value)
2725
}
2826

2927
// Credits: A
3028
const handleCopy = () => {
31-
console.log("I am copy");
32-
var text = document.getElementById("myBox");
33-
text.select();
34-
navigator.clipboard.writeText(text.value);
35-
document.getSelection().removeAllRanges();
29+
navigator.clipboard.writeText(text);
3630
props.showAlert("Copied to Clipboard!", "success");
3731
}
3832

@@ -61,7 +55,7 @@ export default function TextForm(props) {
6155
</div>
6256
<div className="container my-3" style={{color: props.mode==='dark'?'white':'#042743'}}>
6357
<h2>Your text summary</h2>
64-
<p>{text.split(" ").filter((element)=>{return element.length!==0}).length} words and {text.length} characters</p>
58+
<p>{text.split(/\s+/).filter((element)=>{return element.length!==0}).length} words and {text.length} characters</p>
6559
<p>{0.008 * text.split(" ").filter((element)=>{return element.length!==0}).length} Minutes read</p>
6660
<h2>Preview</h2>
6761
<p>{text.length>0?text:"Nothing to preview!"}</p>

src/index.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.accordion-button::after {
2+
filter: invert(1);
3+
}

0 commit comments

Comments
 (0)