SYST24444 Assignment #1 This assignment will be used to test your knowledge of native JavaScript, Local Storage and simple JSON retrieval. Follow all details carefully and be sure to follow instructions for submitting your work. NOTE: jQuery MUST not be used Create a mobile web site (Note: Create a new folder to hold all your files/folders). You will need to include: index.html o Be sure you have a viewport META tag o Include your login name-student number in the

tag to call a function for start-up o Include a call to retrieve the A1-JSON.json file included in your data folder The layout of initial page will include the following: Header section Displays on load o Winter 2023 / Assignment #1 for Your Full Name Name MUST be pulled from JSON Template Literal MUST be used to build output string. MUST include some formatting for header area (your choice); CSS or JS can be used Footer section Displays on load o Anchor tag formatted to look like a button that will SAVE all RECIPE data AND CITE data from the JSON file to local storage then proceed to a new page (Optionally, you can save the entire JSON file) o MUST include some formatting for footer area (your choice); CSS or JS can be used Content section Will consist of 2 areas side-by-side on the page. (Ex. you can use CSS Grids). o Left Panel Make the entire area a section or a div and give it a unique ID. This will make it easer for use in the Grid Area and for formatting. Include your picture from JSON file name; include an ID for later formatting Make sure you use relative referencing correctly so image displays when published Hint: Include the tag within

tags for help with placement Template Literal MUST be used to build output HTML.

Add 2 buttons under the image: Button (include formatting) that will change the CSS class of your picture Button (include formatting) that will remove CSS called by first button Add a CSS Class in your .css file called .yourusename border-radius of 50px border of thick solid colour (colour of your choice) box shadow on any corner of colour of your choice (at least 10px offset and blur) When change button is clicked, your image will be changed to use the new formatting based on your CSS class When the remove button is clicked, remove the formatting based on your CSS class o Right Panel Make the entire area a section or a div and give it a unique ID. This will make it easer for use in the Grid Area and for formatting. Display ALL personal information from JSON; your choice of layout but all information MUST include descriptive labels Template Literal MUST be used to build output HTML. All data MUST come from the JSON file The layout of 2nd page will include the following: Script setup and start-up: o Retrieve all data (Recipe and CITE or entire JSON file based on how you saved) from local storage o NOTE: If you retrieve the JSON file again for this page and do not use local storage exclusively, marks will be deducted o Include a Back Button that will return to the first page (your choice of where and how it looks) o Header section Displays on load o Winter 2023 / Assignment #1 / Recipes MUST include some formatting for header area (your choice); CSS or JS can be used Footer section Displays on load o CITE information from Local Storage as an anchor tag that opens site in a new tab o MUST include some formatting for footer area (your choice); CSS or JS can be used Left Panel o Create 3 buttons from Local Storage Recipe data that includes the Recipe Name as button text o Each button will also call a function passing in the index number (0, 1, 2); MUST use a for/of loop o Format buttons o Do NOT include a separate function for each button Right Panel o When a button is clicked, display all recipe data for the button chosen based on the index number passed as the argument o Ingredients must be in an unordered list o NOTE: Remember, images must display when published so review relative reference for displaying images on a web site

THE JOSN File:>>>>

{

"Winter2023" : {

"myFullName" : "Enter YOUR FULL Name HERE",

"sheridanID" : "Enter YOUR Sheridan Student number HERE",

"sheridanLogin" : "Enter YOUR Sheridan Login Name HERE",

"sheridanProgram" : "Enter YOUR Sheridan Program HERE",

"sheridanCampus" : "Enter YOUR Sheridan Home Campus HERE",

"myPersonalImg" : "Enter the file name of YOUR image file"

},

"Cite" : "https://tasty.co/compilation/44-easy-3-ingredient-recipes",

"Recipe": [

{

"recipeName" : "Peanut Butter Cookies",

"ingredients" : ["1 cup peanut butter", "1/2 cup sugar", "1 egg"],

"directions" : "Mix all; Roll into balls; Bake 8-10 minutes",

"calories" : 81,

"picture" : "cookies.png"

},

{

"recipeName" : "Apple Crisp Skillets",

"ingredients" : ["1 cup spice cake mix", "3 TBSP unsalted butter", "2 apples, sliced"],

"directions" : "Mix cake mix and butter until crumbly; Arrange apple slices in skillet; Sprinkle cake mixture; Back 20 minutes",

"calories" : 621,

"picture" : "appleSkillet.png"

},

{

"recipeName" : "Cloud Bread",

"ingredients" : ["3 eggs, separated;", "1/8 tsp cream of tartar", "3 TBSP Cream Cheese"],

"directions" : "Add cream of tartar to egg whites and whip to peaks; Add cream cheese into egg yolks and mix; Fold egg whites and yolks together; Drop onto tray and spread into circles; Back 30 minutes",

"calories" : 153,

"picture" : "cloudBread.png"

}

]

}

Sample screen shots (for reference only)