SYST24444 Mobile Web Assignment #2
1
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 <title> tags
A folder to hold other HTML pages (ex. pages)
A folder to hold stylesheet(s) (ex. css)
o Your main stylesheet MUST be called yourUserName.css (ex. doej.css)
o It is your choice what to name any other stylesheets
A folder to hold your script files (ex. js or scripts)
o Your main script file MUST be called yourUserName.js (ex. doej.js)
o It is your choice what to name the .js file for the 2nd page
A folder to hold images for the assignment
A folder to hold your local JSON file (ex. data)
JSON File Update:
Download A2-JSON.json and place in your in your data folder (or folder you named to hold JSON data)
Edit the JSON file and include your personal information where indicated
Update the Authors to include 4 authors (at least one dead one) and their image links (do not include any
special characters) example: {“authorName” : “Jane Austen”, “picture” : “janeAusten.jpg”}
Check your JSON file in jsonlint.com to make sure it is still valid after making your changes (optional)
Find and Include images included in JSON file in your images folder (Wikimedia Commons is one place to look)
Script setup (yourUserName.js) and start-up:
On Load:
o Create a Class for your Personal information from the JSON file
o Create a Class to use for creating an array of Authors from the JSON file
o Use a Fetch call to retrieve the local JSON file
o Declare a variable based on your Personal Class (your choice of variable name) and populate using
personal information from JSON file
o Declare a variable as a new Array() and populate using the Author Class from the JSON file
o Declare a variable for the Reference link and populate from the JSON file
o Declare a variable that will be used to hold the array index once the user selects an author
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 <h1> 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 <h1> 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
2nd 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 <head> – optional
o Link to separate .css file (your choice of name) in <head> – 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
See next page for Grading Rubric and Notes…
SYST24444 Mobile Web Assignment #2
4
Grading View:
I will be using the Chrome Toggle Device Bar for Samsung Galaxy S20 Ultra in Landscape mode ONLY when
grading your site
REMEMBER, this must be in a mobile layout; too much scrolling or whitespace will reduce your mark
Submission Details for SLATE Drop Box:
ZIP your entire site folder; name of zip should be yourUserName.zip
Publish your site to cPanel and include the URL DIRECTLY to your site in the Comment section of the Drop Box
Some things to remember:
o DO NOT wait until the last minute to complete this assignment; debugging and formatting can take time
as can publishing
o DO NOT change the site on cPanel once you have submitted and the Drop Box closes. I will run a JS
Script to see when the last time the cPanel link was updated. If past the Due Date, late marks will apply
even if submitted on time in the SLATE Drop Box
o You can submit as many times as you need to until the Drop Box closes. I will grade the last one
o You have 3 days after the Due Date to submit with 10% off per day. After 3 days, the assignment will no
longer be accepted
o NOT PUBLISHING results in 5 marks off automatically
o Each assignment MUST be done individually. I will be checking the HTML and Script for copying; see the
Academic Procedure for Evaluations in SLATE / Module 01
Grading rubric:

Check list:
Must be in a mobile layout and designed with minimal scrolling and minimal white space / -2 marks off
Classes MUST be used where indicated
Template Literal MUST be used where indicated
Native JavaScript concepts MUST be used where indicated
Formatting MUST be included where indicated
See next page for Sample Output…
SYST24444 Mobile Web Assignment #2
5