Skip to content

Commit 37bac7e

Browse files
SuRu190SuRu190
authored
Add files via upload
1 parent bd9e639 commit 37bac7e

3 files changed

Lines changed: 202 additions & 0 deletions

File tree

‎task18-toggle-dark-light-mode/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dark Light Toggle Mode</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<!-- Light Side -->
12+
<div id="lightMode">
13+
<div class="box1 light-mode">
14+
<span>☀️</span>
15+
<h2>Light / Dark</h2>
16+
<p>Toggle light or dark customize your interface</p>
17+
<button class="btn" id="lightBtn">DARK</button>
18+
</div>
19+
<h1 class="light">Light</h1>
20+
</div>
21+
22+
<!-- Dark Side -->
23+
<div id="darkMode">
24+
<div class="box2 dark-mode">
25+
<span>🌚</span>
26+
<h2>Light / Dark</h2>
27+
<p>Toggle light or dark customize your interface</p>
28+
<button class="btn" id="darkBtn">LIGHT</button>
29+
</div>
30+
<h1 class="dark">Dark</h1>
31+
</div>
32+
</div>
33+
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

‎task18-toggle-dark-light-mode/script.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const lightBtn = document.getElementById("lightBtn");
2+
const box1 = document.querySelector(".box1");
3+
4+
const darkBtn = document.getElementById("darkBtn");
5+
const box2 = document.querySelector(".box2");
6+
7+
lightBtn.addEventListener("click", () => {
8+
box1.classList.toggle("dark-mode");
9+
box1.classList.toggle("light-mode");
10+
11+
lightBtn.textContent = box1.classList.contains("dark-mode") ? "LIGHT" : "DARK";
12+
});
13+
14+
darkBtn.addEventListener("click", () => {
15+
box2.classList.toggle("light-mode");
16+
box2.classList.toggle("dark-mode");
17+
18+
darkBtn.textContent = box2.classList.contains("dark-mode") ? "LIGHT" : "DARK";
19+
});

‎task18-toggle-dark-light-mode/style.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, Helvetica, sans-serif;
9+
}
10+
11+
.container {
12+
display: flex;
13+
height: 100vh;
14+
flex-wrap: wrap; /* allows wrapping for small screens */
15+
}
16+
17+
/* Left half */
18+
#lightMode {
19+
background-color: #f4f4f2;
20+
width: 50%;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: center;
25+
padding: 20px;
26+
}
27+
28+
/* Right half */
29+
#darkMode {
30+
background-color: #42404b;
31+
width: 50%;
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
justify-content: center;
36+
padding: 20px;
37+
}
38+
39+
.box1, .box2 {
40+
height: auto;
41+
width: 90%;
42+
max-width: 500px;
43+
padding: 30px 20px;
44+
text-align: center;
45+
border-radius: 30px;
46+
transition: all 0.5s ease;
47+
}
48+
49+
span {
50+
font-size: 6em;
51+
}
52+
53+
h2 {
54+
font-size: 1.8em;
55+
margin-top: 20px0;
56+
}
57+
58+
p {
59+
font-size: 1em;
60+
margin: 15px 10px;
61+
text-align: center;
62+
}
63+
64+
button {
65+
margin-top: 20px;
66+
}
67+
68+
.btn {
69+
border: none;
70+
border-radius: 50px;
71+
font-size: 1.1em;
72+
font-weight: 900;
73+
padding: 12px 35px;
74+
background-color: #e5e5e5;
75+
color: #333;
76+
cursor: pointer;
77+
transition: transform 0.3s;
78+
}
79+
80+
.btn:active {
81+
transform: scale(1.1);
82+
}
83+
84+
/* Modes */
85+
.light-mode {
86+
background-color: #ffffff;
87+
color: #000000;
88+
}
89+
90+
.dark-mode {
91+
background-color: #26242f;
92+
color: #ffffff;
93+
}
94+
95+
/* Labels */
96+
.light, .dark {
97+
font-size: 6em;
98+
margin-top: 20px;
99+
}
100+
101+
@media (max-width: 992px) {
102+
.container {
103+
flex-direction: column; /* stack on tablets & mobiles */
104+
height: auto;
105+
}
106+
107+
#lightMode, #darkMode {
108+
width: 100%;
109+
min-height: 50vh; /* each takes full screen height */
110+
}
111+
112+
.light, .dark {
113+
font-size: 4em;
114+
}
115+
116+
span {
117+
font-size: 4em;
118+
}
119+
}
120+
121+
@media (max-width: 600px) {
122+
.box1, .box2 {
123+
width: 95%;
124+
padding: 20px 15px;
125+
}
126+
127+
h2 {
128+
font-size: 1.5em;
129+
}
130+
131+
p {
132+
font-size: 0.9em;
133+
}
134+
135+
.btn {
136+
font-size: 1em;
137+
padding: 10px 25px;
138+
}
139+
140+
.light, .dark {
141+
font-size: 3em;
142+
}
143+
144+
span {
145+
font-size: 3.5em;
146+
}
147+
}

0 commit comments

Comments
 (0)