Displaying the status of the device battery levels

Progression in capabilities and processing power means we can do much more with our mobile devices including multitasking and background processes. This often means we end up using more battery power to fuel our applications.

How to do it...

In this recipe, we will build an application to display the connection details and the current power capacity of the device battery:

1. Firstly, create a new PhoneGap project named batterystatus by running the following:

   phonegap create batterystatus com.myapp.batterystatus batterystatus
   

2. Add a devices platform. You can choose to use Android, iOS, or both using the following command:

   cordova platform add ios
   cordova platform add android
   

3. We will use a battery-status plugin:

   cordova plugin add org.apache.cordova.battery-status
   

4. Open www/index.html and let's clean up unnecessary elements. We'll also manipulate the DOM elements, so include a reference to the xui.js file within the head tag.

5. We will be calling the...