Question: Create a mobile web site

(Create a new folder to hold all files/folders) /

This mobile assignment... Create a mobile web site (Create a new folder to hold all files/folders) / This mobile assignment will need to be formatted for both landscape and portrait views. index.html should be the only file in the main folder; create sub-folders for all other files (ex. css folder for CSS files, images folder that holds all images, etc.) Be sure to include the jquery.js file in your js or scripts folder along with your own .js file Be sure to include the viewport setting in your index.html

Enter YOUR NAME in the tags AND your name and student number in a comment at the top of the index.html Header area that includes Assignment #2 / Your Name / Your Student Number; This header must be on both pages Footer line that includes Your Login Name / Your Campus; this header must be on both pages. Content area on the main page: Build a list of planets pulled from this JSON file using AJAX to retrieve the file: A2_planets.json. Download this file and include in your site folder in a separate sub-folder Download the Planets.zip file and include all images in your images folder. On load of site, use a Class statement with a Constructor to save all the planet information from the JSON file into an array.

You can build an unordered list of links or create a display of planet images in anchor tags for user selection or a layout of your choice. Be sure to give each planet choice a unique id based on it's index in the JSON file. When the user selects a planet, save all the information in the array built from JSON file along with the user's selection into local storage then display the individual page (see below) This main page should fit both a portrait and landscape view (make changes to view accordingly) Content on the individual page (a separate page) will include the following: When page loads, retrieve the array built from JSON file and the user's selection from local storage

. Use this information to display ALL the information about the planet. Use the planet image as the background (cover entire background - no repeating) for the individual page based on user's selection Be sure to use labeling, formatting, mobile layout, etc. //JSON file

{ "solarSystem": { "planets": [ { "planetName" : "Mercury", "planetColor" : "Orange", "planetRadiusKM" : 2340, "distInMillionsKM" : { "fromSun" : 57.91, "fromEarth" : 91.69 }, "image" : "mercury-icon.png" }, { "planetName" : "Venus", "planetColor" : "White", "planetRadiusKM" : 6100, "distInMillionsKM" : { "fromSun" : 108.21, "fromEarth" : 41.39 }, "image" : "venus-icon.png" }, { "planetName" : "Earth", "planetColor" : "Blue", "planetRadiusKM" : 6371, "distInMillionsKM" : { "fromSun" : 149.60, "fromEarth" :0 }, "image" : "earth-icon.png" }, { "planetName" : "Mars", "planetColor" : "Red", "planetRadiusKM" : 3324, "distInMillionsKM" : { "fromSun" : 227.9, "fromEarth" : 78.3 }, "image" : "mars-icon.png" }, { "planetName" : "Jupiter", "planetColor" : "Yellow", "planetRadiusKM" : 69750, "distInMillionsKM" : { "fromSun" : 778.3, "fromEarth" : 628.7 }, "image" : "jupiter-icon.png" }, { "planetName" : "Saturn", "planetColor" : "Yellow", "planetRadiusKM" : 58170, "distInMillionsKM" : { "fromSun" : 1428, "fromEarth" : 1278.4 }, "image" : "saturn-icon.png" }, { "planetName" : "Uranus", "planetColor" : "Yellow", "planetRadiusKM" : 23750, "distInMillionsKM" : { "fromSun" : 2872, "fromEarth" : 2722.4 }, "image" : "uranus-icon.png" }, { "planetName" : "Neptune", "planetColor" : "Purple", "planetRadiusKM" : 22400, "distInMillionsKM" : { "fromSun" : 4498, "fromEarth" : 4348.4 }, "image" : "neptune-icon.png" } ] } }