Time for action – handling device orientation with JavaScript

Execute the following steps:

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

2. Install the plugin to your project:

   $ phonegap plugin add cordova-plugin-device-motion
   

3. Go to the www folder, open the index.html file, and add div with the #orientation ID inside the main div of the app beneath #deviceready:

   <div class="app">
       <h1>Apache Cordova</h1>
       <div id="deviceready">
           ......
       </div>
       <div id="orientation">
       </div>
   </div>

4. Go to the css folder and define two new rules inside the index.css file to give a border and a bigger font size to div and its content. You can even add the CSS styles directly to the head section of your HTML page:

   #orientation{
   
       width: 230px;
       border: 1px solid rgb(10, 1, 1);
   
   }
   
   #orientation p{
       font-size: 36px;
       font-weight: bold;
      ...