JSFiddle - React, Tailwind, and code Playground

by abdennour

HTML

<h1>
BATTERY STATUS
</h1>
<h2 class="console">
  Detecting Battery Charging %...
</h2>

JavaScript

navigator.getBattery().then((battery) => {
    
    console.ui( battery.level * 100 , '%') ;
    
    battery.ondischargingtimechange = (event) => { 
       console.dir(event.target)
       console.ui(`Discharging : `, event.target.level * 100 , '%') 
    };

    battery.onchargingtimechange = (event) => { 
      console.dir(event.target)
       console.ui(`Charging : `, event.target.level * 100 , '%') ;
    };
});


console.ui = (...args) => {
  document.querySelector('.console').innerHTML = args.join('');
}