Create a GitHub repository for your project.

Create a new project structure similar to the one you created for Assignment 1 in the Github repository, create a new HTML5 web page and name it index.html. Create a config.xml file for your project and save it in the same folder as your index.html file.

Use the sample config.xml file in Module 4 as your guide for creating this file. (Note: This file is required by PhoneGap in order to create a mobile app.)

Create a style sheet file and name it Assignment4.css, and save it in the styles folder. Add a link to this file from your web page. Create a JavaScript file and name it Assignment4.js. Save it to the JavaScript folder. Add a link to this file from your web page.

Create a web page that has two HTML content areas. Use the id attribute to create unique identifiers for each area. Generate some content for each content area, including images and text content. Create a footer area with your name and email address.

At the top of the web page use a tag to create a dropdown menu. The menu options should be Show Area 1 and Show Area 2. Arrange the web page so that neither area is visible when the web page is loaded. Upon selecting the appropriate menu item, display the selected area and remove the area that was previously displayed.

Using a style sheet, format the web page so that the input and output areas are clearly defined and the contents are neatly organized. Use the positioning attributes so that the two content areas display in the same place on the web page. The content areas should be 600 pixels in width.

Use the style sheet to make sure that the footer appears immediately below the content areas. Synchronize your GitHub repository with your Github account. Log into PhoneGap and create a new app. Copy the URL to your Github repository on the web and paste it to the PhoneGap app screen. Issue a pull command in PhoneGap to load the code to your application. Build your app and test it on your mobile device.