Skip to content

Commit

Permalink
Toggle buttons Removed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dp20703
Dp20703 committed May 20, 2024
1 parent dce03f6 commit f9982be
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 59 deletions.
81 changes: 44 additions & 37 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ import {
} from "react-router-dom";

function App() {


//For Dark and Light Mode in Navbar.js File
// const [mode, setMode] = useState("light");
const [mode, setMode] = useState("light");

//For Alert in Alert.js File
Expand All @@ -29,44 +28,52 @@ function App() {
setAlert(null);
}, 1500);
}
const removeClassList=()=>{
document.body.classList.remove('bg-primary');
document.body.classList.remove('bg-danger');
document.body.classList.remove('bg-warning');
document.body.classList.remove('bg-success');
document.body.classList.remove('bg-dark');
document.body.classList.remove('bg-light');
}
//For Dark Mode in Navbar.js File
const toggleMode = (cls) => {
removeClassList();
// console.log(cls)
document.body.classList.add('bg-'+cls)
cls==='dark'?setMode('light'):setMode('dark')

// For Dark and Light Mode in Navbar.js File
const toggleMode = () => {
if (mode === "light") {
setMode("dark");
document.body.style.backgroundColor = "#042743";
showAlert("Dark Mode has been Enabled", 'success');
// document.title = 'TextUtils - Dark Mode';
// setInterval(() => {
// document.title = 'TextUtils - Is Amazing Mode';
// }, 2000)
// setInterval(() => {
// document.title = 'TextUtils Install now';
// }, 1500)

} else {
setMode("light");
document.body.style.backgroundColor = "white";
showAlert("Light Mode has been Enabled", 'success')
// document.title = 'TextUtils - Light Mode';

}
};
// if (mode === "light") {
// setMode("dark");
// document.body.style.backgroundColor = "#042743";
// showAlert("Dark Mode has been Enabled", 'success');
// // document.title = 'TextUtils - Dark Mode';
// // setInterval(()=>{
// // document.title = 'TextUtils - Is Amazing Mode';
// // },2000)
// // setInterval(()=>{
// // document.title = 'TextUtils Install now';
// // },1500)

// } else {
// setMode("light");
// document.body.style.backgroundColor = "white";
// showAlert("Light Mode has been Enabled", 'success')
// // document.title = 'TextUtils - Light Mode';

// }
// };

/* ......................Created Different Different Types Of Toggle Buttons...................*/


/* const [mode, setMode] = useState("light");
// const removeClassList=()=>{
// document.body.classList.remove('bg-primary');
// document.body.classList.remove('bg-danger');
// document.body.classList.remove('bg-warning');
// document.body.classList.remove('bg-success');
// document.body.classList.remove('bg-dark');
// document.body.classList.remove('bg-light');
// }
//For Dark Mode in Navbar.js File
// const toggleMode = (cls) => {
// removeClassList();
// // console.log(cls)
// document.body.classList.add('bg-'+cls)
// cls==='dark'?setMode('light'):setMode('dark')
// };
*/


return (
<>
Expand All @@ -78,7 +85,7 @@ cls==='dark'?setMode('light'):setMode('dark')
<div className="container my-3">
<Routes>
{/* <Route extract path="/about"> */}
<Route path='/about' element={<About mode={mode} />} >
<Route path='/about' element={<About mode={mode} />} >
{/* <About/> */}
</Route>
<Route extract path="/" element={<TextForm showAlert={showAlert} heading="Try TextUtils - word counter, character counter, remove extra spaces" mode={mode} />}>
Expand Down
25 changes: 8 additions & 17 deletions src/components/Navbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,39 +28,30 @@ export default function Navbar(props) {
{/* <a className="nav-link active" aria-current="page" href="#">
Home
</a> */}
<Link className="nav-link active" aria-current="page" to="/">
<Link className="nav-link " aria-current="page" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link " to="/about">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</ul>

{/* <form className="d-flex" role="search">
<input
className="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button className="btn btn-outline-primary" type="submit">
Search
</button>
</form> */}
<div className="d-flex">

{/* //Different Types Of Toggle Buttons..... */}
{/* <div className="d-flex">
<div className="bg-primary rounded mx-2 border border-light" onClick={() => { props.toggleStyle('primary') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
<div className="bg-danger rounded mx-2 border border-light" onClick={() => { props.toggleStyle('danger') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
<div className="bg-success rounded mx-2 border border-light" onClick={() => { props.toggleStyle('success') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
<div className="bg-warning rounded mx-2 border border-light" onClick={() => { props.toggleStyle('warning') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
<div className="bg-light rounded mx-2 border border-light" onClick={() => { props.toggleStyle('light') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
<div className="bg-dark rounded mx-2 border border-light" onClick={() => { props.toggleStyle('dark') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
</div>
</div> */}

{/* <div
<div
className={`form-check form-switch text-${props.mode === "light" ? "dark" : "light"}`}>
<input onClick={props.toggleStyle}
className="form-check-input"
Expand All @@ -74,7 +65,7 @@ export default function Navbar(props) {
Enable Dark Mode
</label>

</div> */}
</div>


</div>
Expand Down
10 changes: 5 additions & 5 deletions src/components/TextForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ export default function TextForm(props) {

};
const HandleCopy = () => {
let newText = document.getElementById("mybox");
newText.select();
navigator.clipboard.writeText(newText.value);
document.getSelection().removeAllRanges();
// let text = document.getElementById("mybox");
// text.select();
navigator.clipboard.writeText(text);
// document.getSelection().removeAllRanges();
props.showAlert("Copied to Clipboard", "success");

};
Expand Down Expand Up @@ -57,7 +57,7 @@ export default function TextForm(props) {
id="mybox"
rows="8"
style={{
backgroundColor: props.mode === "dark" ? "grey" : "white",
backgroundColor: props.mode === "dark" ? "#13466e" : "white",
color: props.mode === "dark" ? "white" : "#042743",
}}
></textarea>
Expand Down
4 changes: 4 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,7 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

.accordion-button::after {
filter: invert(1);
}

0 comments on commit f9982be

Please sign in to comment.