Physical Address

Godawari 2 Attariya Kailali

Battery Percentage Detector using Javascript

Hello, learner today In this blog post, We will be creating a Battery Percentage Detector using Javascript.  In the past post, we have created many projects one of them is the QR Code Generator. Without wasting time Now it is time to create a Battery Percentage Detector.

Battery Percentage Detector using Javascript

In this project, we detect battery charge levels. It shows the battery charging state. and It shows how much time until the battery discharges completely

As you see in the above image at the top there is the output of the Battery Percentage Detector. There is a battery percentage showing how much percentage is charged in the battery.

If the charge it shows the charge full and if there is no charge in the battery it just shows the charge. If you are charging the device it shows the Battery is charging. On the side, there is a charging container that shows how much is done.

If you’re having difficulty understanding what I’m saying or what this QR code generator You can ask me in the comment.

Code ByCoding thai
Language UsedHTML, CSS and JS
ResponsiveYes
External Link / DependenciesNo

There are 3 types of styles to connect CSS with HTML files. Inline CSS, Internal CSS, External CSS. For Inline CSS in this, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS we have to use the Style tag in the Head section on HTML File. We have used this Internal CSS in The below section. Last is External CSS for this we have to create another CSS File in the same folder this

Preview of Battery Percentage Detector

In this preview, we have used internal CSS in the code. In the internal CSS, we have to write the code in the head section using the Style tag. We have to write the code in <Style> CSS code </style> in the Head section in the HTML file. This code is run in Codepen.io

See the Pen Battery Percentage Detector Using Javascript by Coding thai (@Codingthai) on CodePen.

You might like this

Battery Percentage Detector using HTML, CSS, and JS [Source code]

For Creating A Battery Percentage Detector using HTML, CSS, and JS. First, you have to create Three files (HTML, CSS, and JS) files with the named index.html, style.css, and Script.js in the same folder and you have to link the CSS and JS files to HTML. after that paste the below code, the HTML code in index.html, and paste the CSS code in style.css Again paste the Js code in script.js that’s all after pasting the code.

First, you have to create an HTML file with the named index.html paste the below HTML code on it, and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Battery Percentage  Detector </title>
</head>
<body>
    <section class="battery">
        <div class="Bcard">
            <div class="Bpill">
                <div class="Blevel">
                    <div class="Bliquid"></div>
                </div>
            </div>
            <div class="Bdata">
                <p class="Btext">Battery :</p>
                <h1 class="Bpercentage">20%</h1>
                <p class="Bstatus">
                    <i class="ri-plug-line"></i>
                </p>
            </div>
        </div>
    </section>
    <script src="index.js"></script>
</body>
</html>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give a .css extension to the CSS file.

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

*{
    font-family: 'Ubuntu';
    margin: 0;
    padding: 0;
}
:root{
    --gradient-color-red: linear-gradient(90deg, hsl(7, 89%, 46%) 15%, hsl(11, 93%, 68%) 100%);
    --gradient-color-orange : linear-gradient(90deg, hsl(22,89%,46%) 15%,hsl(54,90%,68%)100%);
    --gradient-color-yellow : linear-gradient(90deg,hsl(54,89%,46%) 15%,hsl(92,90%,45%)100%);
    --gradient-color-green : linear-gradient(90deg,hsl(92,89%,46%) 15%,hsl(92,90%,68%)100%);
}
body{
    background: #070707;
    color: #fff;
}
.battery{
    height: 100vh;
    display: grid;
    place-items: center;
    margin: 0 1.5rem;
}
.Bcard{
    position: relative;
    width: 270px;
    height: 240px;
    background: #222;
    padding: 0.5rem 1.5rem;
    border-radius: 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
}
Btext{
    margin-bottom: 0.5rem;
}
.Bpercentage{
    font-size: 2.5rem;
}
.Bstatus{
    position: absolute;
    bottom: 3.5rem;
    display: flex;
    align-items: center;
    column-gap: 0.3rem;
    font-size: 0.8rem;
}
.Bstatus i{
    font-size: 1.25rem;
}
.Bpill{
    position: relative;
    width: 75px;
    height: 180px;
    background-color: #222;
    box-shadow: inset 20px 0 48px hsl(0, 0%, 16%), inset -4px 12px 48px hsl(0, 0%, 56%);
    border-radius: 3rem;
    justify-self: flex-start;
}
.Blevel{
    position: absolute;
    inset: 2px;
    border-radius: 3rem;
    overflow: hidden;
}
.Bliquid{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: var(--gradient-color-red);
    box-shadow: inset -10px 0 12px hsla(0, 0%, 0%, 0.1), inset 12px 0 12px hsla(0, 0%, 0%, 0.15);
    transition: 0.3s;
}
.Bliquid::after{
    content: "";
    position: absolute;
    height: 8px;
    box-shadow: inset 0 -3px 6px hsla(0, 0%, 0%, 0.2);
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -4px;
    border-radius: 50%;
}
.green-color{
    background: var(--gradient-color-green);
}
.animated-green{
    background: var(--gradient-color-green);
    animation: animated-charging 1.2s infinite alternate;
}
.animated-red{
    background: var(--gradient-color-red);
    animation: animated-low 1.2s infinite alternate;
}
.animated-green, .animated-red, .green-color{
    -webkit-background-clip: text;
    color: transparent;
}
@keyframes animated-charging{
    0%{
        text-shadow: none;
    }
    100%{
        text-shadow: 0 0 6px hsl(92, 90%, 68%);
    }
}
@keyframes animated-low{
    0%{
        text-shadow: none;
    }
    100%{
        text-shadow: 0 0 8px hsl(7, 89%, 46%);
    }
}
.gradient-color-red, .green-color-red::after{
    background: var(--gradient-color-red);
}
.gradient-color-green, .green-color-green::after{
    background: var(--gradient-color-green);
}
.gradient-color-orange, .green-color-orange::after{
    background: var(--gradient-color-orange);
}
.gradient-color-yellow, .green-color-yellow::after{
    background: var(--gradient-color-yellow);
}

After pasting the HTML and CSS code, Now have to create a third Javascript file with the named script.js. Paste the below code on it and save it. Again remember to give a .js extension to the javascript file.

initBattery();
function initBattery() {
    const batteryLiquid = document.querySelector(".Bliquid");
    const batteryStatus = document.querySelector(".Bstatus");
    const Bpercentage = document.querySelector(".Bpercentage");
    navigator.getBattery().then((batt) => {
        updateBattery = () => {
            let level = Math.floor(batt.level * 100);
            Bpercentage.innerHTML = level + "%";
            batteryLiquid.style.height = `${parseInt(batt.level * 100)}%`;
            if (level == 100) {
                batteryStatus.innerHTML = `Battery Full <i class="ri-battery-2-fill green-color"></i>`;
                batteryLiquid.style.height = "103%";
            } else if (level <= 20 & !batt.charging) {
                batteryStatus.innerHTML = `Low Charge <i class="ri-plug-line animated-red animated-red"></i>`;
            } else if (batt.charging) {
                batteryStatus.innerHTML = `Charging ... <i class="ri-flashlight-line animated-green"></i>`;
            } else {
                batteryStatus.innerHTML = "";
            }
            if (level <= 20) {
                batteryLiquid.classList.add("gradient-color-red");
                batteryLiquid.classList.remove("gradient-color-green", "gradient-color-orange", "gradient-color-yellow");
            } else if (level <= 48) {
                batteryLiquid.classList.add("gradient-color-orange");
                batteryLiquid.classList.remove("gradient-color-green", "gradient-color-red", "gradient-color-yellow");
            } else if (level <= 80) {
                batteryLiquid.classList.add("gradient-color-yellow");
                batteryLiquid.classList.remove("gradient-color-green", "gradient-color-orange", "gradient-color-red");
            } else {
                batteryLiquid.classList.add("gradient-color-green");
                batteryLiquid.classList.remove("gradient-color-red", "gradient-color-orange", "gradient-color-yellow");
            }
        }
        updateBattery();
        batt.addEventListener("chargingchange", () => { updateBattery() });
        batt.addEventListener("levelchange", () => { updateBattery });
    })
}

That’s all after pasting the code your code will be successfully run. If you get any kind of error/problem in the code just comment or contact me on social media

Written By@narendra-chand
Code By Coding thai

Related Posts