Time for action – using the Compass API

Execute the following steps:

1. Open the command-line tool, create a new PhoneGap project named compass, and add the platforms you want to target for this example.

2. Add the Compass API plugin using the following command:

   $ cordova plugin add cordova-plugin-device-orientation
   

3. Go to the www folder and open the index.html file. The three div tags are used to handle the compass arrows and the background:

   <section id="compass">
       <div id="compassbg"></div>
       <div id="north"></div>
       <div id="arrow"></div>
   </section>

4. Go to the css folder, open the index.css file, and define the rules needed to have a separate background for each element of the compass:

   #compassbg {
       background-image: url(../img/Compass.png);
   }
   #north {
       background-image: url(../img/arrow_direction.png);
   }
   
   #arrow {
       background-image: url(../img/arrow_beta.png);
   }
   
   #compass, #arrow, #north, #compassbg  {
       background-repeat: no-repeat...