Skip to content

Commit 89dde49

Browse files
tajulafreentajulafreen
authored
Merge pull request #31 from tajulafreen/Battery_Indicator
50Projects-HTML-CSS-JavaScript : Battery indicator
2 parents 0de0ac9 + eac4a80 commit 89dde49

File tree

4 files changed

+246
-0
lines changed

4 files changed

+246
-0
lines changed

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,17 @@ In order to run this project you need:
320320
</details>
321321
</li>
322322

323+
<li>
324+
<details>
325+
<summary>Battery Indicator</summary>
326+
<p>This project is a simple web application that dynamically displays the battery level of the user's device and includes a dark mode toggle feature. The battery level is visually represented as a progress bar and also shown as a percentage. The application leverages the Battery Status API to fetch the battery information and updates the display in real-time. Additionally, the user can switch between light and dark modes by clicking a toggle button, enhancing the user interface's customization options.</p>
327+
<ul>
328+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/BatteryIndicator/">Live Demo</a></li>
329+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/BatteryIndicator">Source</a></li>
330+
</ul>
331+
</details>
332+
</li>
333+
323334
</ol>
324335

325336
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/BatteryIndicator/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
9+
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
10+
crossorigin="anonymous"
11+
/>
12+
<title>Battery Indicator</title>
13+
<link rel="stylesheet" href="style.css" />
14+
</head>
15+
<body>
16+
<section class="sec">
17+
<div class="toggle"></div>
18+
<div class="box">
19+
<div class="content">
20+
<h3>Battery Percentage</h3>
21+
<div class="batteryShape">
22+
<div class="level">
23+
<div class="percentage"></div>
24+
</div>
25+
</div>
26+
<div class="percent">50%</div>
27+
</div>
28+
</div>
29+
</section>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎Source-Code/BatteryIndicator/script.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const percentage = document.querySelector('.percentage');
3+
const percent = document.querySelector('.percent');
4+
5+
navigator.getBattery().then((battery) => {
6+
percentage.style.width = `${battery.level * 100}%`;
7+
percent.innerHTML = `${Math.floor(battery.level * 100)}%`;
8+
});
9+
10+
const sec = document.querySelector('.sec');
11+
const toggle = document.querySelector('.toggle');
12+
toggle.addEventListener('click', () => {
13+
sec.classList.toggle('dark');
14+
});
15+
});

‎Source-Code/BatteryIndicator/style.css

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
/* stylelint-disable */
2+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: "Poppins", sans-serif;
9+
}
10+
11+
section {
12+
position: relative;
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
min-height: 100vh;
17+
}
18+
19+
section.dark {
20+
background: #161623;
21+
}
22+
23+
section::before {
24+
content: "";
25+
position: absolute;
26+
width: 240px;
27+
height: 240px;
28+
background: linear-gradient(#6cff47, #3d1046);
29+
border-radius: 50%;
30+
transform: translate(-150px, -100px);
31+
}
32+
33+
section.dark::before {
34+
background: linear-gradient(#ffc107, #e91e63);
35+
}
36+
37+
section::after {
38+
content: "";
39+
position: absolute;
40+
width: 250px;
41+
height: 250px;
42+
background: linear-gradient(#f10050, rgb(8, 216, 253));
43+
border-radius: 50%;
44+
transform: translate(150px, 100px);
45+
}
46+
47+
section.dark::after {
48+
background: linear-gradient(#2196f3, #31ff38);
49+
}
50+
51+
.box {
52+
position: relative;
53+
width: 240px;
54+
height: 300px;
55+
background: rgba(255, 255, 255, 0.1);
56+
z-index: 1;
57+
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
58+
border: 1px solid rgba(255, 255, 255, 0.25);
59+
border-right: 1px solid rgba(255, 255, 255, 0.1);
60+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
61+
backdrop-filter: blur(25px);
62+
border-radius: 10px;
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
}
67+
68+
.content {
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
flex-direction: column;
73+
}
74+
75+
.box h3 {
76+
color: #000;
77+
font-weight: 500;
78+
font-size: 1.2rem;
79+
letter-spacing: 1px;
80+
}
81+
82+
section.dark .box h3 {
83+
color: #fff;
84+
}
85+
86+
.batteryShape {
87+
position: relative;
88+
width: 140px;
89+
height: 65px;
90+
margin: 20px 0;
91+
border: 3px solid #333;
92+
border-radius: 10px;
93+
}
94+
95+
section.dark .batteryShape {
96+
border: 3px solid #fff;
97+
}
98+
99+
.batteryShape::before {
100+
content: "";
101+
position: absolute;
102+
top: 50%;
103+
right: -12px;
104+
transform: translateY(-50%);
105+
width: 7px;
106+
height: 16px;
107+
background: #333;
108+
border-top-right-radius: 4px;
109+
border-bottom-right-radius: 4px;
110+
}
111+
112+
section.dark .batteryShape::before {
113+
background: #fff;
114+
}
115+
116+
.batteryShape::after {
117+
content: "";
118+
position: absolute;
119+
top: 0;
120+
left: 0;
121+
width: 100%;
122+
height: 50%;
123+
background: rgba(255, 255, 255, 0.1);
124+
}
125+
126+
.level {
127+
position: absolute;
128+
top: 4px;
129+
left: 4px;
130+
right: 4px;
131+
bottom: 4px;
132+
133+
/* background: #333; */
134+
overflow: hidden;
135+
}
136+
137+
.percentage {
138+
position: absolute;
139+
top: 0;
140+
left: 0;
141+
height: 100%;
142+
width: 50%;
143+
background: linear-gradient(90deg, #ffeb3b, #27ff00);
144+
border-radius: 4px;
145+
}
146+
147+
section.dark .percentage {
148+
background: linear-gradient(90deg, #ffeb3b, #27ff00);
149+
}
150+
151+
.percent {
152+
color: #000;
153+
font-size: 2em;
154+
font-weight: 700;
155+
}
156+
157+
section.dark .percent {
158+
color: #fff;
159+
}
160+
161+
.toggle {
162+
position: absolute;
163+
top: 20px;
164+
right: 20px;
165+
background: #070716;
166+
width: 30px;
167+
height: 30px;
168+
cursor: pointer;
169+
border-radius: 50%;
170+
display: flex;
171+
justify-content: center;
172+
align-items: center;
173+
}
174+
175+
.dark .toggle {
176+
background: #fff;
177+
}
178+
179+
.toggle::before {
180+
content: "\f186";
181+
font-family: fontAwesome;
182+
color: #fff;
183+
}
184+
185+
.dark .toggle::before {
186+
content: "\f185";
187+
color: #161623;
188+
}

0 commit comments

Comments
 (0)