Question
THIS IS NOT TO BE DONE IN PYTHON JUST JAVASCRIPT AND HTML SYST24444 Mobile Web Assignment #2 Assignment #2 (10%) This assignment will be used
THIS IS NOT TO BE DONE IN PYTHON JUST JAVASCRIPT AND HTML
SYST24444 Mobile Web Assignment #2 Assignment #2 (10%) This assignment will be used to further test your knowledge of native JavaScript and Local Storage plus using native JavaScript to retrieve and display JSON data. Follow all details carefully and be sure to follow instructions for submitting your work. Create a mobile web site (Note: Create a new folder to hold all your files/folders). You will need to include: index.html o All necessary links for your JS file, and your CSS file o Updates: Be sure you have a viewport META tag Include your student number-first name in the
The layout of this site is for landscape view ONLY: Header section o Displays on load (multiple lines) o Line 1: Assignment #2 / Winter 2023 o Line 2: Name, ID, Login, and Program from JSON data with preceding labels for all fields Personal information MUST be pulled from JSON data Template Literal MUST be used to build output string o MUST include some formatting for header area (your choice) using JavaScript CSS (either multiple .css() or create a CSS class) o Note: Be sure to use an appropriate font size so header lines do not take up too much of the mobile space (for example, do not use
unless you reformat to a smaller font size) Footer section o Displays on load the Reference link from the JSON file o MUST include some formatting for footer area (your choice) using JavaScript CSS (either multiple .css() or create a CSS class) o Note: Be sure to use an appropriate font size so header and footer lines do not take up too much of the mobile space (for example, do not use unless you reformat to a smaller font size) Content section displayed BETWEEN header and footer: o Landscape view ONLY Include an instructions line (your choice of wording and formatting) to let the user know to select an author from the list to see more information Display the Author data (both name and picture) in a list (ex. Buttons, anchor tags, etc) Formatting will be a large part of the marks...no scrolling but also no large amounts of whitespace Include a click event on your list items that calls a function passing in the index number of the data in the array When an author is selected, save to local storage: Index of the array item chosen Author array Personal variable Reference variable Proceed to next page 2 nd page / Script setup and start-up: HTML should include (your choice of setup and formatting): o Back button (link back to main page...your choice of location and formatting) o Header section o Footer section o Data section that includes 2 sections side-by-side (ex. grid-area) o Link to a separate .js file (your choice of name) in - optional o Link to separate .css file (your choice of name) in - optional On Load: o Declare variables needed for local storage retrieval o Retrieve all local storage saved including: Personal data Author array Index of author chosen Reference link o You will be calling the API: https://openlibrary.org/developers/api Select the Authors API Use the documentation to include a Fetch call for the Author chosen by the user Hint: Pull the authors name from the array using the index and use template literal to build the url similar to what we did with the Weather API in class Use the [0] element ONLY of the JSON file retrieved for the author data to display o Create header and footer EXACTLY the same as on the main page (output and formatting) using the data retrieved from local storage Marks will be deducted if a Fetch call is used to retrieve the local JSON file for displaying data for the header/footer and not the local storage data o For Data section: Include picture of Author chosen in left panel from the array and index Include the following data from the API JSON with preceding labels Author Name: Birth Date: Death Date: (this will show undefined if the author is not dead) Top Work: Format output so no scrolling and also no large amount of whitespace
JSON FILE>>>
{
"SheridanData" : {
"FullName" : "Enter YOUR full name here",
"StudentID" : "Enter YOUR student number here",
"UserName" : "Enter YOUR student login here",
"Program" : "Enter YOUR program name here"
},
"Authors" : [
{"authorName" : "", "picture" : ""},
{"authorName" : "", "picture" : ""},
{"authorName" : "", "picture" : "" },
{"authorName" : "", "picture" : ""}
],
"Reference" : "https://openlibrary.org/developers/api"
}
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started