Skip to content

Commit 7d70dcb

Browse files
HuXn-WebDevHuXn-WebDev
committed
Color Toggler
1 parent ec8a36b commit 7d70dcb

File tree

3 files changed

+86
-0
lines changed

3 files changed

+86
-0
lines changed

‎19. Color Toggler/app.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
let toggler = document.getElementById("switch");
2+
3+
toggler.addEventListener("click", () => {
4+
// if (toggler.checked === true) {
5+
// document.body.style.backgroundColor = "black";
6+
// } else {
7+
// document.body.style.backgroundColor = "white";
8+
// }
9+
10+
toggler.checked === true
11+
? (document.body.style.backgroundColor = "black")
12+
: (document.body.style.backgroundColor = "white");
13+
});

‎19. Color Toggler/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Color Toggler</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<input type="checkbox" id="switch" />
11+
<label for="switch"></label>
12+
13+
<script src="app.js"></script>
14+
</body>
15+
</html>

‎19. Color Toggler/style.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
:root {
2+
--primary-color: white;
3+
--primary-label: black;
4+
--secndary-label: white;
5+
--white-ball: white;
6+
--black-ball: black;
7+
}
8+
9+
body {
10+
background: var(--primary-color);
11+
position: absolute;
12+
top: 50%;
13+
left: 50%;
14+
transform: translate(-50%, -50%);
15+
}
16+
17+
#switch {
18+
width: 0;
19+
height: 0;
20+
visibility: hidden;
21+
}
22+
23+
label {
24+
display: block;
25+
width: 100px;
26+
height: 50px;
27+
background: var(--primary-label);
28+
border-radius: 100px;
29+
position: relative;
30+
cursor: pointer;
31+
transition: 0.5s;
32+
}
33+
34+
label::after {
35+
content: "";
36+
width: 40px;
37+
height: 40px;
38+
border-radius: 70px;
39+
background-color: var(--white-ball);
40+
position: absolute;
41+
top: 5px;
42+
left: 5px;
43+
transition: 0.5s;
44+
}
45+
46+
#switch:checked + label:after {
47+
background-color: var(--black-ball);
48+
left: calc(100% - 5px);
49+
transform: translateX(-100%);
50+
}
51+
52+
#switch:checked + label {
53+
background-color: var(--secndary-label);
54+
}
55+
56+
label:active:after {
57+
width: 60px;
58+
}

0 commit comments

Comments
 (0)