Skip to content

Commit b0edad9

Browse files
HuXn-WebDevHuXn-WebDev
committedSep 18, 2022
Light bulb Project | HTML | CSS | JS
1 parent 78563d8 commit b0edad9

File tree

3 files changed

+186
-0
lines changed

3 files changed

+186
-0
lines changed
 

‎73. Light/app.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
let btn = document.querySelector(".btn");
2+
let body = document.body;
3+
let audio = document.querySelector("#audio");
4+
5+
btn.addEventListener("click", () => {
6+
body.classList.toggle("on");
7+
audio.play();
8+
});

‎73. Light/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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>Light On and Off</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="light">
11+
<div class="wire"></div>
12+
<div class="bulb">
13+
<span></span>
14+
<span></span>
15+
</div>
16+
<div class="switch">
17+
<div class="btn"></div>
18+
</div>
19+
</div>
20+
21+
<audio
22+
src="https://www.fesliyanstudios.com/play-mp3/387"
23+
id="audio"
24+
autostart="false"
25+
></audio>
26+
27+
<script src="app.js"></script>
28+
</body>
29+
</html>

‎73. Light/style.css

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background: #222;
13+
}
14+
15+
body.on {
16+
background: radial-gradient(#555, #111);
17+
}
18+
19+
.wire {
20+
position: absolute;
21+
left: calc(50% - 2px);
22+
bottom: 50%;
23+
width: 4px;
24+
height: 60vh;
25+
background: #000;
26+
z-index: 1;
27+
}
28+
29+
.bulb {
30+
position: relative;
31+
width: 80px;
32+
height: 80px;
33+
background: #444;
34+
border-radius: 50%;
35+
z-index: 2;
36+
}
37+
38+
.bulb:before {
39+
content: "";
40+
position: absolute;
41+
left: 22.5px;
42+
top: -50px;
43+
width: 35px;
44+
height: 80px;
45+
background: #444;
46+
border-top: 30px solid #000;
47+
border-radius: 10px;
48+
}
49+
50+
body.on .bulb::after {
51+
content: "";
52+
position: absolute;
53+
top: 50%;
54+
left: 50%;
55+
transform: translate(-50%, -50%);
56+
width: 120px;
57+
height: 120px;
58+
background: #fff;
59+
border-radius: 50%;
60+
filter: blur(40px);
61+
}
62+
63+
body.on .bulb {
64+
background-color: #fff;
65+
box-shadow: 0 0 50px #fff, 0 0 100px #fff, 0 0 150px #fff, 0 0 200px #fff,
66+
0 0 250px #fff, 0 0 300px #fff, 0 0 350px #fff;
67+
}
68+
69+
body.on .bulb::before {
70+
background: #fff;
71+
}
72+
73+
body.on .bulb span:nth-child(1) {
74+
box-shadow: 20px 20px 0 10px #fff;
75+
}
76+
77+
body.on .bulb span:nth-child(2) {
78+
box-shadow: -20px 20px 0 10px #fff;
79+
}
80+
81+
.bulb span:nth-child(1) {
82+
position: absolute;
83+
top: -16px;
84+
left: -4px;
85+
display: block;
86+
width: 30px;
87+
height: 30px;
88+
background: transparent;
89+
transform: rotate(342deg);
90+
border-bottom-right-radius: 40px;
91+
box-shadow: 20px 20px 0 10px #444;
92+
}
93+
94+
.bulb span:nth-child(2) {
95+
position: absolute;
96+
top: -16px;
97+
right: -4px;
98+
display: block;
99+
width: 30px;
100+
height: 30px;
101+
background: transparent;
102+
transform: rotate(17deg);
103+
border-bottom-left-radius: 40px;
104+
box-shadow: -20px 20px 0 10px #444;
105+
}
106+
107+
.switch {
108+
position: absolute;
109+
bottom: 50px;
110+
right: 50px;
111+
width: 80px;
112+
height: 80px;
113+
background: linear-gradient(#eee, #ccc, #eee);
114+
border: 3px solid #000;
115+
border-radius: 10px;
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
box-shadow: gray 0px 20px 30px -10px;
120+
}
121+
122+
.switch .btn {
123+
position: relative;
124+
width: 25px;
125+
height: 40px;
126+
background: linear-gradient(#777, #fff, #777);
127+
border-radius: 6px;
128+
border: 2px solid #000;
129+
cursor: pointer;
130+
}
131+
132+
.switch .btn::before {
133+
content: "";
134+
position: absolute;
135+
top: 0;
136+
left: 0;
137+
width: 100%;
138+
height: 85%;
139+
background: linear-gradient(#fff, #fff);
140+
border-radius: 4px;
141+
}
142+
143+
.on .switch .btn::before {
144+
top: 15%;
145+
}
146+
147+
#audio {
148+
display: none;
149+
}

0 commit comments

Comments
 (0)
Failed to load comments.