Skip to content

50Projects-HTML-CSS-JavaScript : Battery indicator #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 29, 2024
Merged

50Projects-HTML-CSS-JavaScript : Battery indicator #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2906c02
create a template for project
tajulafreen Jul 29, 2024
0bdce0b
Add Icons and toggler
tajulafreen Jul 29, 2024
20f0d66
Add styles
tajulafreen Jul 29, 2024
284707f
Used getbattery function
tajulafreen Jul 29, 2024
6392afc
soleve linter issue
tajulafreen Jul 29, 2024
eac4a80
Add project
tajulafreen Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>Battery Indicator</summary>
<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>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/BatteryIndicator/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/BatteryIndicator">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
32 changes: 32 additions & 0 deletions Source-Code/BatteryIndicator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
crossorigin="anonymous"
/>
<title>Battery Indicator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="sec">
<div class="toggle"></div>
<div class="box">
<div class="content">
<h3>Battery Percentage</h3>
<div class="batteryShape">
<div class="level">
<div class="percentage"></div>
</div>
</div>
<div class="percent">50%</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions Source-Code/BatteryIndicator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
document.addEventListener('DOMContentLoaded', () => {
const percentage = document.querySelector('.percentage');
const percent = document.querySelector('.percent');

navigator.getBattery().then((battery) => {
percentage.style.width = `${battery.level * 100}%`;
percent.innerHTML = `${Math.floor(battery.level * 100)}%`;
});

const sec = document.querySelector('.sec');
const toggle = document.querySelector('.toggle');
toggle.addEventListener('click', () => {
sec.classList.toggle('dark');
});
});
188 changes: 188 additions & 0 deletions Source-Code/BatteryIndicator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
/* stylelint-disable */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

section.dark {
background: #161623;
}

section::before {
content: "";
position: absolute;
width: 240px;
height: 240px;
background: linear-gradient(#6cff47, #3d1046);
border-radius: 50%;
transform: translate(-150px, -100px);
}

section.dark::before {
background: linear-gradient(#ffc107, #e91e63);
}

section::after {
content: "";
position: absolute;
width: 250px;
height: 250px;
background: linear-gradient(#f10050, rgb(8, 216, 253));
border-radius: 50%;
transform: translate(150px, 100px);
}

section.dark::after {
background: linear-gradient(#2196f3, #31ff38);
}

.box {
position: relative;
width: 240px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
z-index: 1;
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.25);
border-right: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px);
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}

.content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.box h3 {
color: #000;
font-weight: 500;
font-size: 1.2rem;
letter-spacing: 1px;
}

section.dark .box h3 {
color: #fff;
}

.batteryShape {
position: relative;
width: 140px;
height: 65px;
margin: 20px 0;
border: 3px solid #333;
border-radius: 10px;
}

section.dark .batteryShape {
border: 3px solid #fff;
}

.batteryShape::before {
content: "";
position: absolute;
top: 50%;
right: -12px;
transform: translateY(-50%);
width: 7px;
height: 16px;
background: #333;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

section.dark .batteryShape::before {
background: #fff;
}

.batteryShape::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background: rgba(255, 255, 255, 0.1);
}

.level {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;

/* background: #333; */
overflow: hidden;
}

.percentage {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background: linear-gradient(90deg, #ffeb3b, #27ff00);
border-radius: 4px;
}

section.dark .percentage {
background: linear-gradient(90deg, #ffeb3b, #27ff00);
}

.percent {
color: #000;
font-size: 2em;
font-weight: 700;
}

section.dark .percent {
color: #fff;
}

.toggle {
position: absolute;
top: 20px;
right: 20px;
background: #070716;
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}

.dark .toggle {
background: #fff;
}

.toggle::before {
content: "\f186";
font-family: fontAwesome;
color: #fff;
}

.dark .toggle::before {
content: "\f185";
color: #161623;
}
Loading