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.
[login to view URL] 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 [login to view URL] file in your js or scripts folder along with your own .js file
Be sure to include the viewport setting in your [login to view URL]
Enter YOUR NAME in the <title> tags AND your name and student number in a comment at the top of the [login to view URL]
Header area that includes Project #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 [login to view URL] 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.
How I will be grading exercise...
I will be using Chrome's Toggle Device Bar for iPhone 6/7/8 in Landscape AND Portrait mode
Remember, this is a mobile site so formatting and layout should reflect this; too much scrolling or whitespace will reduce your mark.
You will be using Media Queries to format both Portrait and Landscape views.
Bu iş için 4 freelancer ortalamada $19 teklif veriyor