└── day_4
├── script.js
├── index.html
└── style.css
/day_4/script.js:
--------------------------------------------------------------------------------
1 | var light=document.getElementById("light");
2 |
3 |
4 |
5 | function toggleLight(values){
6 | if(values){
7 | light.className="lighton"
8 | }
9 | else{
10 | light.className="lightoff"
11 | }
12 | }
13 |
14 |
--------------------------------------------------------------------------------
/day_4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Light Glow
7 |
8 |
9 |
10 | Light
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/day_4/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | body{
7 | background-color: rgb(40, 40, 40);
8 | color: rgb(255, 255, 255);
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | height: 100vh;
13 | flex-direction: column;
14 | gap: 120px;
15 | }
16 |
17 | #light{
18 | width: 100px;
19 | height: 110px;
20 | border-radius: 60px;
21 | transition: 1s;
22 |
23 | }
24 |
25 | .lightoff{
26 | border: 3px solid rgb(145, 240, 4);
27 | }
28 | .lighton{
29 | background-color: rgb(145, 240, 4);
30 | border: 5px solid rgb(145, 240, 4);
31 | box-shadow: 0px 0px 100px rgb(145, 240, 4),0px 0px 100px rgb(145, 240, 4),0px 0px 100px rgb(145, 240, 4),0px 0px 100px rgb(145, 240, 4);
32 | }
33 | .buttonbox{
34 | padding: 0px;
35 | display: flex;
36 | justify-content: center;
37 | align-items: center;
38 | gap: 20px;
39 | }
40 | .buttonbox button{
41 | font-size: 24px;
42 | text-transform: uppercase;
43 | border: black;
44 | outline: none;
45 | padding: 8px 16px;
46 | border-radius: 7px;
47 | cursor: pointer;
48 |
49 | background-color: transparent;
50 | color: aliceblue;
51 | font-weight: 600;
52 |
53 | }
54 | .buttonbox button:first-child{
55 | background-color: rgb(145, 240, 4);
56 | }
57 | .buttonbox button:last-child{
58 | background-color: rgb(254, 3, 3);
59 | }
--------------------------------------------------------------------------------