Making first PhoneGap App

In our previous section, we learned how we can create a new PhoneGap project and how we can preview it either in a desktop browser or on a mobile app. In this section, we will learn about how we can create our first PhoneGap app. These are the following steps used to create a PhoneGap App:

1) Create a new PhoneGap project

In our first step, we will create a new PhoneGap project. We will name it My First App and will give a unique ID also, i.e., com.javatpoint.My_First_App in my case.

When we run this on the desktop browser or on the PhoneGap Developer app, we will see a blank screen.

2) Open index.html file

After creating a PhoneGap project, we will go to the directory where we saved this project. We will open the folder of our project that contains many other folders like hooks, platforms, plugins, and www. We will open the www folder that contains the index.html file. We will open this file in our preferred editor to code.

3) Start Coding

Now, we will update this file and start our coding.

Note: We are creating a dog age calculator. You can create your own code or can copy the following code into your html file.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
         // adding title
        <title>Dog Years Calculator</title>
        <script>
         //creating window function to initialize the application
        window.onload=function()
        {
            document.getElementById('btnCalc').addEventListener('click', calcAge);
        }
        //creating calcAge function to calculate the age of dog
        function calcAge(e)
        {
	//fetching age
            var age = document.getElementById('dogAge').value;
            age = age *7;
            var result = "In dog years, your dog is: " + age;
          //  console.log(result);
         //alert(result);
            document.getElementById('result').innerHTML = result;
        }
        </script>
    </head>
    <body>
	<script type="text/javascript" src="cordova.js"></script>
	//add heading
<h1>Dog Years Calculator</h1>
	//add lable
<label for="dogAge">Dog Age in Human Years:</label>
	//add input field
<input id="dogAge" type="number" />
	//add button
<button id="btnCalc">Calculate</button>
        	//add a field for result 
<div id="result"></div>
    </body>
</html>

We will save this file and go to the PhoneGap Developer App. We will connect Desktop Application with PhoneGap Developer App and run applications on the server.