Skip to content

Commit 5e48fdc

Browse files
Maryum763Maryum763
authored
Add files via upload
1 parent e650d0a commit 5e48fdc

5 files changed

Lines changed: 89 additions & 0 deletions

File tree

‎assets/bulb_off-removebg-preview.png‎

38.7 KB
Loading

‎assets/bulb_on-removebg-preview.png‎

50.2 KB
Loading

‎index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>BULB ON/OFF EFFECT </title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<h1>Bulb Turn ON/OFF</h1>
14+
<img id="bulb" src="./assets/bulb_off-removebg-preview.png" alt="Bulb">
15+
<br>
16+
<button>ON </button>
17+
18+
19+
20+
21+
<script src="./script.js"></script>
22+
</body>
23+
24+
</html>

‎script.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const bulbEle = document.querySelector("#bulb")
2+
const btnEle = document.querySelector("button")
3+
4+
var a = 0
5+
btnEle.addEventListener("click", function () {
6+
if (a == 0) {
7+
bulbEle.src = "./assets/bulb_on-removebg-preview.png"
8+
// console.log("button is on")
9+
btnEle.innerHTML = "OFF"
10+
a = 1
11+
bulbEle.style.width = "250px";
12+
} else {
13+
bulbEle.src = "./assets/bulb_off-removebg-preview.png"
14+
// console.log("button is off")
15+
btnEle.innerHTML = "ON"
16+
bulbEle.style.width = "290px";
17+
a = 0
18+
}
19+
})

‎style.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
6+
}
7+
8+
body {
9+
background-color: rgb(0, 0, 0);
10+
display: flex;
11+
justify-content: center;
12+
text-align: center;
13+
align-items: center;
14+
flex-direction: column;
15+
height: 100vh;
16+
width: 100%;
17+
}
18+
19+
h1 {
20+
color: coral;
21+
-webkit-text-stroke: 1px rgb(109, 97, 62);
22+
}
23+
24+
img {
25+
26+
width: 300px;
27+
height: 300px;
28+
29+
}
30+
31+
button {
32+
padding: 10px 30px;
33+
font-size: 18px;
34+
margin: 10px;
35+
border-radius: 5px solid black;
36+
background-color: rgb(247, 160, 129);
37+
border-radius: 7px;
38+
39+
}
40+
41+
button:hover {
42+
background-color: coral;
43+
border: 1px solid #fff;
44+
color: #fff;
45+
cursor: pointer;
46+
}

0 commit comments

Comments
 (0)