HTML, CSS And Normal JS Code Is Not Giving Correct Output
Solution 1:
Just adding a condition to setting "clickc" to "true" will probably do the trick. Here I've used a similar condition to that you've already used for the "thisvarisgud4me" key.
I took the opportunity to test out a utility I created that essentially implements the Storage API (that's what <script src="https://heretic-monkey.link/FauxStorage.js"></script>
is in the HTML, and why all of your localStorage
references now say localStore
).
So if you decide to copy and paste this into your own code, just do a search and replace of localStore
with localStorage
.
if (!localStore.getItem('thisvarisgud4me')) {
localStore.setItem("thisvarisgud4me", "1")
}
document.getElementById("btn").addEventListener("click", change);
var c = "true";
if (!localStore.getItem("clickc")) {
localStore.setItem("clickc", c);
}
function change() {
if (localStore.getItem("clickc") == "false") {
document.getElementById("btn").click();
localStore.getItem("clickc") = "true";
} else if (localStore.getItem("clickc") == "true") {
if (localStore.getItem('thisvarisgud4me') == '1') {
localStore.setItem("thisvarisgud4me", '0')
} else {
localStore.setItem("thisvarisgud4me", '1')
}
var num = Number(localStore.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
console.log(num);
if (num == 0) {
window.addEventListener("beforeunload", function(event) {
console.log("The page is redirecting")
alert("Reload");
localStore.setItem("clickc", "false");
// document.getElementById("btn").click();
// debugger;
});
}
}
}
var num = Number(localStore.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://heretic-monkey.link/FauxStorage.js"></script>
</head>
<body>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</div>
</body>
</html>
Here's how I would refactor it. This is more of an object-oriented way of doing things; it might not appeal to everyone and it certainly isn't meant to. It works for me and I'm the only one I need to make happy with it :).
class ThemeStore {
_darkModeKey = "thisvarisgud4me";
_darkMode = null;
get darkMode() {
if (this._darkMode === null) {
if (!localStore.getItem(this._darkModeKey)) {
localStore.setItem(this._darkModeKey, 0);
}
this._darkMode = JSON.parse(localStore.getItem(this._darkModeKey));
}
return this._darkMode;
}
set darkMode(value) {
this._darkMode = value;
}
persist() {
localStore.setItem("thisvarisgud4me", JSON.stringify(this.darkMode));
}
}
var themeStore = new ThemeStore();
document.getElementById("btn").addEventListener("click", change);
function change(e) {
themeStore.darkMode = e.target.checked ? 0 : 1;
let root = document.documentElement;
root.style.setProperty("--numvar", themeStore.darkMode);
console.log(themeStore.darkMode);
if (themeStore.darkMode === 0) {
window.addEventListener("beforeunload", function(event) {
console.log("The page is redirecting")
themeStore.persist();
});
}
}
document.getElementById("btn").dispatchEvent(new CustomEvent("change"));
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: -27px;
/*OFF*/
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: 20px;
/*ON*/
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text {
color: black !important;
font-weight: 700;
}
.btn-heading {
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
<script src="https://heretic-monkey.link/FauxStorage.js"></script>
<div class="btn-heading">Dark Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text" id="textp1">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" id="textp2">off</span>
</div>
</div>
</div>
Post a Comment for "HTML, CSS And Normal JS Code Is Not Giving Correct Output"