Create a Real Time Battery Status Indicator with HTML, CSS & JavaScript using the Battery Status API

In this tutorial we are going to create a battery status indicator using HTML CSS, JavaScript and as well as the browsers' Battery Status API. With the help of the Battery Status API, we will be able to detect the battery charge level, battery charging status and battery discharge time and then display some of the result on the page using DOM manipulation in JavaScript. This tutorial is inspired by the DEV Challenge taking place on the dev.to blog website. Time Stamp for Create a Real Time Battery Status Indicator with HTML, CSS & JavaScript using the Battery Status API: Introduction - 00:00 UI Design - 03:40 Instantiating the Get Battery Method - 08:38 Setting up the event listeners - 11:14 DOM Manipulation - 12:18 Source Code: https://github.com/desoga10/web-battery-api MDN DOCS on the Battery Status API: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API Support the channel: https://www.buymeacoffee.com/thecodeangle Join my telegram community: https://t.me/thecodeangle For more resources on Web Development: https://thecodeangle.com/​​​ Follow Me on Twitter: https://twitter.com/thecodeangle​​​​​