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 jQuery, 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 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 You MUST include jquery.js in this folder 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 any images for the assignment A folder to hold your 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 Check your JSON file in jsonlint.com to make sure it is still valid after making your changes Download the a2images.zip file and unzip all images into the images folder Script setup (yourUserName.js) and start-up: Setup your $document.ready statement (jQuery) and include all declarations and scripts below o Declare variables (your choice of variable names) and retrieve personal information from JSON file o Save to all personal variables to Local Storage o Create a Class for Categories data (see JSON file) / ex. class Category {} o Populate an array (your choice of name) based on the Category Class using the data in the JSON file o Save the Category array to Local Storage (Remember: arrays MUST be stringified before saving) o Create a Class for BookDetail (see JSON file) / ex. class Books{} o Populate an array (your choice of name) based on the Books Class using the data in the JSON file o Save the BookDetail array to Local Storage (Remember: arrays MUST be stringified before saving)

The layout of this site is for portrait view ONLY: Header section o Displays on load using jQuery (multiple lines) o Line 1: SYST24444 / Assignment #2 / Winter 2022 o Line 2: Your Full Name / Your StudentID o Include a horizontal line (

---

) below header line Personal information MUST be pulled from variables populated from the JSON file Template Literal MUST be used to build output string o MUST include some formatting for header area (your choice) using jQuery CSS (either multiple .css() or create a CSS class and use .addClass() ) 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 using jQuery (multiple lines) o Line 1: Include a horizontal line (

---

) above footer line o Line 2: My Sheridan User Name: Your UserName o Line 3: My Program: Your Program Name Personal information MUST be pulled from variables populated from the JSON file Template Literal MUST be used to build output string. o MUST include some formatting for footer area (your choice) using jQuery CSS (either multiple .css() or create a CSS class and use .addClass() ) 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 Portrait view ONLY Include a heading (your choice of wording and formatting) to let the user know to select a category to see more information All Categories should be listed vertically (in a list) from Categories array and include: A link to your 2nd page; You will also need to include a unique ID for each link created (see class exercise) o This can be a button that includes an anchor tag or an anchor tag that is formatted to look like a button o Cannot just have simple anchor tags with no formatting The logo image displayed BELOW each link with a border; make sure the images are not too large so scrolling is minimal NOTE: You may have to include both in a container such as a

tag to help with formatting; NOTE: If an outside container is used such as a paragraph, include the unique ID on the container tag instead of the anchor tag Template Literal MUST be used to build output string Remember: Mobile layout and scrolling will be used in grading; o When a Category is selected, save the unique ID for the selection in local storage so it can be used on the 2nd page

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 List section o Link to a separate .js file (your choice of name) in o Link to separate .css file (your choice of name) in - optional On document load (in $(document).ready(function(){});) o Declare variables needed for local storage retrieval o Retrieve all data saved to local storage including: your personal data the category array (Remember, you must parse back to array format) the book detail array (Remember, your must parse back to array format) the unique ID of the category selected by the user o Create header and footer EXACTLY the same as on the main page (output and formatting) o Display a header tag (ex.

) that displays a line showing the user what Category was chosen (ex. Books from the Java Category); Format this header (your choice) where Java from the example would be pulled from the Category array based on the user's choice (NOT hard coded). o Display ALL books from the category selected in the List area of the page (between header and footer) Layout and formatting will be large part of grading for this page. It is your decision how to

display and layout the data in a mobile format Each item should include a label/description preceding data describing what the data is (ex. Title: ) or include in a sentence format NOTE: All data MUST be pulled from book detail array based on the Category chosen except the longDescription unless you include the code for the Bonus Mark below The \"thumbnailUrl\" must be used to open the image based on the included URL in a new tab Bonus Point: Make the \"longDescription\" a toggle click event so it is not shown on page load but the user can click and toggle open/close the description This page can include minimal scrolling but not too much See next page for Grading Rubric and Notes...

Grading View: I will be using the Chrome Toggle Device Bar for Samsung Galaxy S8+ in Portrait 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

Check list: Must be in a mobile layout and designed with minimal scrolling and minimal white space / -2 marks if not mobile Classes MUST be used where indicated Template Literal MUST be used where indicated JS concepts MUST be used where indicated jQuery concepts MUST be used where indicated Formatting MUST be included where indicated