Post
Ask Question

Basic Calculator Using Cordova

Introduction

This article explains how to create your own hybrid app. We will create a simple basic calculator using Cordova (Phone Gap) and jQuery Mobile.
 
Hybrid Apps

Hybrid Apps are like native apps that run on the device and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container and leverage the device's browser engine (but not the browser) to render the HTML and process the JavaScript locally. A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as the accelerometer, camera and local storage.

Cordova
 
Previously named PhoneGap, this is an open source platform for building native mobile applications using HTML, CSS and JavaScript.

jQuery Mobile
 
jQuery Mobile is a cross-platform mobile framework designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3, jQuery and the jQuery UI into one framework that is not only robust, but maintainable and organized. 
 
Procedure to install Cordova in your system:
  1. To create any application in Cordova first of all you must install Node.Js. Install Node.Js from here: NodeJs.
  2. After installing Node.Js you must install the git client. Install the git client from git client.
  3. After installing the git client open "Node.Js Command Prompt", and install Cordova using the following command:
    1. npm install -g cordova  
    Node: The code above is used to install Cordova in the Windows operating system, if you want to install Cordova in Mac OS X or Linux then use the following link:
    Install Cordova
Step-by-step Create a Hybrid App using Cordova:
  1. To create a Hybrid App using Cordova open a Node.Js Command Prompt.
  2. Go to the specific drive and directory where you want to create the Hybrid App.
  3. Now use the following command to create a new Cordova Project:

    "cordova create BasicCalculator com.sourabh.BasicCalculator BasicCalculator "



    Here

    1. The first argument BasicCalculator specifies a directory to be generated for our project.
    2. The second argument com.sourabh.BasicCalculator provides your project with a reverse domain-style identifier. This argument is optional, but only if you also omit the third argument.
      Why do we provide the second identifier like this?
      Because Packages are typically named using the following convention:
      [org/com].[company].[product].[component]

    3. The third argument BasicCalculator provides the application's display title.

  4. After running the above command a project folder will be created.
  5. Now go to the project directory using the following command:

    cd BasicCalculator
  6. Before you can build the project, you need to specify a set of target platforms. Your ability to run these commands depend on whether your machine supports each SDK and whether you have already installed each SDK.

    To add a different platform use the following command:

    For Windows Phone 8:
    1. cordova platform add wp8  
    For Windows:
    1. cordova platform add windows  
    For Amazon-FireOS:
    1. cordova platform add amazon-fireos  
    For BB10:
    1. cordova platform add blackberry10  
    For Android:
    1. cordova platform add android  
    For FireFoxOS:
    1. cordova platform add firefoxos  
  7. Now open the project directory and go to the www folder and open index.html (../BasicCalculator/www/index.html) and also open ../BasicCalculator/www/css/index.css in any editor.

  8. Now modify index.css 
    1. body {  
    2.     -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */  
    3.     -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */  
    4.     -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */  
    5. }  
  9. Now in index.html add jQuery Mobile Plugin:

    • jquery.mobile-1.4.0.min.css
    • jquery-1.11.0.min.js
    • jquery.mobile-1.4.0.min.js
    • Note: Download jQuery Mobile from here : jQuery Mobile Plugin

  10. jQuery Mobile provides a navigation framework that allows multiple screens to be embedded in a single HTML web page.


    And a single web page containing the following 3 things:
    • Header
    • Main Page (Content)
    • Footer
  11. Let's create the first page for the Main Menu:
    1. <div data-role="page" id="Home">  
    2.             <div data-role="header" data-position="fixed">  
    3.                 <h1>Main Menu</h1>  
    4.             </div>  
    5.   
    6.             <div role="main" class="ui-content" id="home-content">  
    7.                 <table width="100%">  
    8.                     <tr>  
    9.                         <td width="50%" style="text-align:center">  
    10.                             <a href="#Calculator" data-transition="slide" style="text-decoration:none;color:#000000">  
    11.                                 <img src="img/Calculator.png" width="70px" height="70px"/><br/>  
    12.                                 Calculator  
    13.                             </a>  
    14.                         </td>  
    15.                         <td width="50%" style="text-align:center">  
    16.                             <a href="#About" data-transition="slide" style="text-decoration:none;color:#000000">  
    17.                                 <img src="img/About.png" width="70px" height="70px"/><br/>  
    18.                                 About  
    19.                             </a>  
    20.                         </td>  
    21.                     </tr>  
    22.                 </table>  
    23.             </div>  
    24.         </div>  
  12. The second page Basic Calculator:
    1. <div data-role="page" id="Calculator">  
    2.             <div data-role="header" data-position="fixed">  
    3.                 <h1>Calculator</h1>  
    4.                 <a href="#Home" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>  
    5.             </div>  
    6.   
    7.             <div role="main" class="ui-content" id="home-content">  
    8.                 <label for="tb1">1st Number</label><input type="number" id="tb1" placeholder="Enter 1st Number"/>  
    9.                 <label for="tb2">2nd Number</label><input type="number" id="tb2" placeholder="Enter 2nd Number"/>  
    10.                 <label id="Answer" for="Answer"></label>  
    11.                 <button id="Add" onclick="Add()"> ADD </button>   
    12.                 <button id="SUB" onclick="Sub()"> SUB </button>   
    13.                 <button id="MULTIPLICATION" onclick="Multi()"> MULTIPLICATION </button>   
    14.                 <button id="DIVISION" onclick="Div()"> DIVISION </button>  
    15.             </div>  
    16.         </div>  
  13. The third page About:
    1. <div data-role="page" id="About">  
    2.             <div data-role="header" data-position="fixed">  
    3.                 <h1>About Calculator</h1>  
    4.                 <a href="#Home" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>  
    5.             </div>  
    6.   
    7.             <div role="main" class="ui-content" id="home-content">  
    8.                 <h3>This calculator is designed by Sourabh Somani.<br/><br/>  
    9.                     <address>  
    10.                         [email protected]<br/>  
    11.                     </address>  
    12.                 </h3>  
    13.             </div>  
    14.         </div>  
  14. Let's write JavaScript code for the Addition, Subtraction, Multiplication and Division:
    1. <script type="text/javascript">  
    2.         function Add(){  
    3.                 var number1=document.getElementById("tb1").value;  
    4.                 var number2=document.getElementById("tb2").value;  
    5.                 document.getElementById("Answer").innerHTML="Addition: "+(Number(number1)+Number(number2));  
    6.         }  
    7.         function Sub(){  
    8.                 var number1=document.getElementById("tb1").value;  
    9.                 var number2=document.getElementById("tb2").value;  
    10.                 document.getElementById("Answer").innerHTML="Subtraction: "+(Number(number1)-Number(number2));  
    11.         }  
    12.         function Multi(){  
    13.                 var number1=document.getElementById("tb1").value;  
    14.                 var number2=document.getElementById("tb2").value;  
    15.                 document.getElementById("Answer").innerHTML="Multiplication:"+(Number(number1)*Number(number2));  
    16.         }  
    17.         function Div(){  
    18.                 var number1=document.getElementById("tb1").value;  
    19.                 var number2=document.getElementById("tb2").value;  
    20.                 document.getElementById("Answer").innerHTML="Division:"+(Number(number1)/Number(number2));  
    21.         }  
    22.     </script>  

  15. The complete code is as the following:
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <meta name="format-detection" content="telephone=no" />  
    6.         <meta name="msapplication-tap-highlight" content="no" />  
    7.         <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
    8.         <link rel="stylesheet" type="text/css" href="css/index.css" />  
    9.           
    10.         <link rel="stylesheet" href="lib/jquery-mobile/css/jquery.mobile-1.4.0.min.css" />  
    11.         <script type="text/javascript" src="lib/jquery-mobile/js/jquery-1.11.0.min.js"></script>  
    12.         <script type="text/javascript" src="lib/jquery-mobile/js/jquery.mobile-1.4.0.min.js"></script>  
    13.         <script type="text/javascript" src="js/index.js"></script>  
    14.         <script type="text/javascript">  
    15.         function Add(){  
    16.                 var number1=document.getElementById("tb1").value;  
    17.                 var number2=document.getElementById("tb2").value;  
    18.                 document.getElementById("Answer").innerHTML="Addition: "+(Number(number1)+Number(number2));  
    19.         }  
    20.         function Sub(){  
    21.                 var number1=document.getElementById("tb1").value;  
    22.                 var number2=document.getElementById("tb2").value;  
    23.                 document.getElementById("Answer").innerHTML="Subtraction: "+(Number(number1)-Number(number2));  
    24.         }  
    25.         function Multi(){  
    26.                 var number1=document.getElementById("tb1").value;  
    27.                 var number2=document.getElementById("tb2").value;  
    28.                 document.getElementById("Answer").innerHTML="Multiplication:"+(Number(number1)*Number(number2));  
    29.         }  
    30.         function Div(){  
    31.                 var number1=document.getElementById("tb1").value;  
    32.                 var number2=document.getElementById("tb2").value;  
    33.                 document.getElementById("Answer").innerHTML="Division:"+(Number(number1)/Number(number2));  
    34.         }  
    35.     </script>  
    36.         <title>Basic Calculator By Sourabh Somani</title>  
    37.     </head>  
    38.     <body>  
    39.         <div data-role="page" id="Home">  
    40.             <div data-role="header" data-position="fixed">  
    41.                 <h1>Main Menu</h1>  
    42.             </div>  
    43.   
    44.             <div role="main" class="ui-content" id="home-content">  
    45.                 <table width="100%">  
    46.                     <tr>  
    47.                         <td width="50%" style="text-align:center">  
    48.                             <a href="#Calculator" data-transition="slide" style="text-decoration:none;color:#000000">  
    49.                                 <img src="img/Calculator.png" width="70px" height="70px"/><br/>  
    50.                                 Calculator  
    51.                             </a>  
    52.                         </td>  
    53.                         <td width="50%" style="text-align:center">  
    54.                             <a href="#About" data-transition="slide" style="text-decoration:none;color:#000000">  
    55.                                 <img src="img/About.png" width="70px" height="70px"/><br/>  
    56.                                 About  
    57.                             </a>  
    58.                         </td>  
    59.                     </tr>  
    60.                 </table>  
    61.             </div>  
    62.         </div>  
    63.           
    64.         <div data-role="page" id="About">  
    65.             <div data-role="header" data-position="fixed">  
    66.                 <h1>About Calculator</h1>  
    67.                 <a href="#Home" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>  
    68.             </div>  
    69.   
    70.             <div role="main" class="ui-content" id="home-content">  
    71.                 <h3>This calculator is designed by Sourabh Somani.<br/><br/>  
    72.                     <address>  
    73.                         [email protected]<br/>  
    74.                     </address>  
    75.                 </h3>  
    76.             </div>  
    77.         </div>  
    78.           
    79.         <div data-role="page" id="Calculator">  
    80.             <div data-role="header" data-position="fixed">  
    81.                 <h1>Calculator</h1>  
    82.                 <a href="#Home" data-transition="slide" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left">Back</a>  
    83.             </div>  
    84.   
    85.             <div role="main" class="ui-content" id="home-content">  
    86.                 <label for="tb1">1st Number</label><input type="number" id="tb1" placeholder="Enter 1st Number"/>  
    87.                 <label for="tb2">2nd Number</label><input type="number" id="tb2" placeholder="Enter 2nd Number"/>  
    88.                 <label id="Answer" for="Answer"></label>  
    89.                 <button id="Add" onclick="Add()"> ADD </button>   
    90.                 <button id="SUB" onclick="Sub()"> SUB </button>   
    91.                 <button id="MULTIPLICATION" onclick="Multi()"> MULTIPLICATION </button>   
    92.                 <button id="DIVISION" onclick="Div()"> DIVISION </button>  
    93.             </div>  
    94.         </div>  
    95.           
    96.         <script type="text/javascript" src="cordova.js"></script>  
    97.     </body>  
    98. </html>  
  16. Build Application

    I am building this application for an Android phone only. To build the application use the following command and run this command in the Node.Js command prompt:
    1. C:\BasicCalculator>cordova build android
  17. To run this in an emulator use the following command:
    1. C:\BasicCalculator>cordova emulate android  
Output
  1. Main Menu Page



  2. Calculator Page









  3. About Page


 


Similar Articles