How do I put a warning/message on a specific number of a counter?

Question

I am using a system in my website that identify the amount of battery the user have in his phone, the system is "battery-api".

I would like to insert a warning when the battery is over 10% (for example) like, "Hey, you need to charge your phone, you can always use our products..."

it's possible?

Answer 1

You can achieve the functionality using the Battery Status API. The below code is a slightly modified version of the Example on this page.

navigator.getBattery().then(function(battery) {

  battery.addEventListener('levelchange', function(){
    updateLevelInfo();
  });

  function updateLevelInfo(){
    var percentage = battery.level * 100;
    if(percentage < 10){ // Show message };
  }

});

I recommend checking the browser compatibility however if it's satisfactory.