SYST24444 Mobile Web Assignment #22The layout of this site is for landscape view ONLY:Header sectionoDisplays on load (multiple...












































SYST24444 Mobile Web Assignment #2












2












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















Continued on Next Page...















































SYST24444 Mobile Web Assignment #2












3












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 author’s 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








Feb 19, 2023
SOLUTION.PDF

Get Answer To This Question

Related Questions & Answers

More Questions »

Submit New Assignment

Copy and Paste Your Assignment Here