How to Detect the Battery Status with HTML, CSS & JavaScript

In this guide, we will learn how to detect the battery status with HTML, CSS & JavaScript. To detect the battery status with HTML, CSS & JavaScript. You need to create three Files HTML, CSS & JavaScript 

1: First, create an HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Detect Battery Status</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="battery">
        <div id="charge"></div>
        <div id="charge-level"></div>
      </div>
      <div id="charging-time"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

 

2: Second, create a CSS file

 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
.container {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#battery {
  box-sizing: content-box;
  height: 7.8em;
  width: 17.5em;
  border: 0.6em solid #246aed;
  margin: auto;
  border-radius: 0.6em;
  position: relative;
  display: grid;
  place-items: center;
}
#battery:before {
  position: absolute;
  content: "";
  height: 5em;
  width: 1.1em;
  background-color: #246aed;
  margin: auto;
  top: 0;
  bottom: 0;
  right: -1.6em;
  border-radius: 0 0.3em 0.3em 0;
}
#charge {
  position: absolute;
  height: 6.5em;
  width: 16.25em;
  background-color: #246aed;
  top: 0.6em;
  left: 0.6em;
}
#charge-level {
  position: absolute;
  font-size: 3em;
  font-weight: 500;
}
#charging-time {
  text-align: center;
  font-size: 1.7em;
  margin-top: 1.4em;
}
.active {
  animation: charge-animation 3s infinite linear;
}
@keyframes charge-animation {
  0% {
    width: 0;
  }
  100% {
    width: 16.25em;
  }
}

 

3: Last, create a JavaScript file

 

const chargeLevel = document.getElementById("charge-level");
const charge = document.getElementById("charge");
const chargingTimeRef = document.getElementById("charging-time");

window.onload = () => {
  //For browsers that don't support the battery status API
  if (!navigator.getBattery) {
    alert("Battery Status Api Is Not Supported In Your Browser");
    return false;
  }
};

navigator.getBattery().then((battery) => {
  function updateAllBatteryInfo() {
    updateChargingInfo();
    updateLevelInfo();
  }
  updateAllBatteryInfo();

  //When the charging status changes
  battery.addEventListener("chargingchange", () => {
    updateAllBatteryInfo();
  });

  //When the Battery Levvel Changes
  battery.addEventListener("levelchange", () => {
    updateAllBatteryInfo();
  });

  function updateChargingInfo() {
    if (battery.charging) {
      charge.classList.add("active");
      chargingTimeRef.innerText = "";
    } else {
      charge.classList.remove("active");

      //Display time left to discharge only when it is a integer value i.e not infinity
      if (parseInt(battery.dischargingTime)) {
        let hr = parseInt(battery.dischargingTime / 3600);
        let min = parseInt(battery.dischargingTime / 60 - hr * 60);
        chargingTimeRef.innerText = `${hr}hr ${min}mins remaining`;
      }
    }
  }

  //Updating battery level
  function updateLevelInfo() {
    let batteryLevel = `${parseInt(battery.level * 100)}%`;
    charge.style.width = batteryLevel;
    chargeLevel.textContent = batteryLevel;
  }
});

You have now successfully created a battery health detection app using HTML, CSS & JavaScript

#html #css  #javascript 

What is GEEK

Buddha Community

How to Detect the Battery Status with HTML, CSS & JavaScript

How to Detect the Battery Status with HTML, CSS & JavaScript

In this guide, we will learn how to detect the battery status with HTML, CSS & JavaScript. To detect the battery status with HTML, CSS & JavaScript. You need to create three Files HTML, CSS & JavaScript 

1: First, create an HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Detect Battery Status</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="battery">
        <div id="charge"></div>
        <div id="charge-level"></div>
      </div>
      <div id="charging-time"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

 

2: Second, create a CSS file

 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
.container {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#battery {
  box-sizing: content-box;
  height: 7.8em;
  width: 17.5em;
  border: 0.6em solid #246aed;
  margin: auto;
  border-radius: 0.6em;
  position: relative;
  display: grid;
  place-items: center;
}
#battery:before {
  position: absolute;
  content: "";
  height: 5em;
  width: 1.1em;
  background-color: #246aed;
  margin: auto;
  top: 0;
  bottom: 0;
  right: -1.6em;
  border-radius: 0 0.3em 0.3em 0;
}
#charge {
  position: absolute;
  height: 6.5em;
  width: 16.25em;
  background-color: #246aed;
  top: 0.6em;
  left: 0.6em;
}
#charge-level {
  position: absolute;
  font-size: 3em;
  font-weight: 500;
}
#charging-time {
  text-align: center;
  font-size: 1.7em;
  margin-top: 1.4em;
}
.active {
  animation: charge-animation 3s infinite linear;
}
@keyframes charge-animation {
  0% {
    width: 0;
  }
  100% {
    width: 16.25em;
  }
}

 

3: Last, create a JavaScript file

 

const chargeLevel = document.getElementById("charge-level");
const charge = document.getElementById("charge");
const chargingTimeRef = document.getElementById("charging-time");

window.onload = () => {
  //For browsers that don't support the battery status API
  if (!navigator.getBattery) {
    alert("Battery Status Api Is Not Supported In Your Browser");
    return false;
  }
};

navigator.getBattery().then((battery) => {
  function updateAllBatteryInfo() {
    updateChargingInfo();
    updateLevelInfo();
  }
  updateAllBatteryInfo();

  //When the charging status changes
  battery.addEventListener("chargingchange", () => {
    updateAllBatteryInfo();
  });

  //When the Battery Levvel Changes
  battery.addEventListener("levelchange", () => {
    updateAllBatteryInfo();
  });

  function updateChargingInfo() {
    if (battery.charging) {
      charge.classList.add("active");
      chargingTimeRef.innerText = "";
    } else {
      charge.classList.remove("active");

      //Display time left to discharge only when it is a integer value i.e not infinity
      if (parseInt(battery.dischargingTime)) {
        let hr = parseInt(battery.dischargingTime / 3600);
        let min = parseInt(battery.dischargingTime / 60 - hr * 60);
        chargingTimeRef.innerText = `${hr}hr ${min}mins remaining`;
      }
    }
  }

  //Updating battery level
  function updateLevelInfo() {
    let batteryLevel = `${parseInt(battery.level * 100)}%`;
    charge.style.width = batteryLevel;
    chargeLevel.textContent = batteryLevel;
  }
});

You have now successfully created a battery health detection app using HTML, CSS & JavaScript

#html #css  #javascript 

Jade Bird

Jade Bird

1653032764

How to Detect Battery Status with HTML, CSS and JavaScript

Detect Battery Status With Javascript | Detect Charge Level & Charging Status

Detect battery charge level, battery charging status, battery discharge time using the Battery Status API with HTML, CSS and Javascript.

In today’s tutorial, we will learn how to detect the battery status. To build this project, we need HTML, CSS and Javascript. 

We would be making use of Battery Status API in this project. You can read more about the Battery Status API here. Also, read about browser compatibility before you implement it in real-world projects.

In this project, we will detect:

  1. What is the battery charge level?
  2. Is the battery charging?
  3. If No, how much time until the battery discharges completely.

Project Folder Structure:

Before we start coding, let us create the project folder structure. We begin by creating a project folder called – ‘Detect Battery Status’. Inside this folder, we have three files. These files are – index.html, style.css and script.js. The first file is the HTML document. Next, we have the stylesheet. And the final file is the script file.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document. The HTML code creates elements for the built layout of our project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Detect Battery Status</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="battery">
        <div id="charge"></div>
        <div id="charge-level"></div>
      </div>
      <div id="charging-time"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we need to style and position these elements. To do this, we use CSS. Now copy the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Mono", monospace;
}
.container {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#battery {
  box-sizing: content-box;
  height: 7.8em;
  width: 17.5em;
  border: 0.6em solid #246aed;
  margin: auto;
  border-radius: 0.6em;
  position: relative;
  display: grid;
  place-items: center;
}
#battery:before {
  position: absolute;
  content: "";
  height: 5em;
  width: 1.1em;
  background-color: #246aed;
  margin: auto;
  top: 0;
  bottom: 0;
  right: -1.6em;
  border-radius: 0 0.3em 0.3em 0;
}
#charge {
  position: absolute;
  height: 6.5em;
  width: 16.25em;
  background-color: #246aed;
  top: 0.6em;
  left: 0.6em;
}
#charge-level {
  position: absolute;
  font-size: 3em;
  font-weight: 500;
}
#charging-time {
  text-align: center;
  font-size: 1.7em;
  margin-top: 1.4em;
}
.active {
  animation: charge-animation 3s infinite linear;
}
@keyframes charge-animation {
  0% {
    width: 0;
  }
  100% {
    width: 16.25em;
  }
}

Javascript:

We finally add functionality to this code. To add logic, we use Javascript. Once again, copy the code provided to you below and paste it into your script file.

const chargeLevel = document.getElementById("charge-level");
const charge = document.getElementById("charge");
const chargingTimeRef = document.getElementById("charging-time");

window.onload = () => {
  //For browsers that don't support the battery status API
  if (!navigator.getBattery) {
    alert("Battery Status Api Is Not Supported In Your Browser");
    return false;
  }
};

navigator.getBattery().then((battery) => {
  function updateAllBatteryInfo() {
    updateChargingInfo();
    updateLevelInfo();
  }
  updateAllBatteryInfo();

  //When the charging status changes
  battery.addEventListener("chargingchange", () => {
    updateAllBatteryInfo();
  });

  //When the Battery Levvel Changes
  battery.addEventListener("levelchange", () => {
    updateAllBatteryInfo();
  });

  function updateChargingInfo() {
    if (battery.charging) {
      charge.classList.add("active");
      chargingTimeRef.innerText = "";
    } else {
      charge.classList.remove("active");

      //Display time left to discharge only when it is a integer value i.e not infinity
      if (parseInt(battery.dischargingTime)) {
        let hr = parseInt(battery.dischargingTime / 3600);
        let min = parseInt(battery.dischargingTime / 60 - hr * 60);
        chargingTimeRef.innerText = `${hr}hr ${min}mins remaining`;
      }
    }
  }

  //Updating battery level
  function updateLevelInfo() {
    let batteryLevel = `${parseInt(battery.level * 100)}%`;
    charge.style.width = batteryLevel;
    chargeLevel.textContent = batteryLevel;
  }
});

That’s it for this tutorial. If you have any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you, so feel free to drop your queries and suggestions in the comments below.
Happy Coding!!

📁 Download Source Code : 
https://www.codingartistweb.com

#html #css #javascript

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

code savvy

code savvy

1629473371

Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript

 

Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) 📁

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline

 

#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial