Upvoting guranteed for correct answer!!

SYST24444 Assignment \#1 Assignment \#1 (10\%) 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 Be sure you have a viewport META tag Include your login name-student number in the ctitle> tags A folder to hold other HTML pages (ex. pages or other) A folder to hold stylesheet(s) (ex. css) Your main stylesheet MUST be called yourUserName.css (ex. doejane.css) and must be linked in the index.html file. It is your choice what to name any other stylesheets (for example, you may have a separate stylesheet for the 2ns page of this assignment). A folder to hold your script files (ex. js or scripts) Your main script file MUST be called yourLoginName.js (ex. doejane.js) and must be linked in index.html It is your choice what to name the ,js file for the 2nd page if you use a separate file A folder to hold any images needed for the assignment. (Your image plus those included in A1-ZIP) A folder to hold your JSON file (ex. data) / Included in the A1-zlP Update and include your personal information in the ISON file where indicated Script setup (yourtoginName.js) and start-up: Include an onload in your A1-JSON.json file included in your data folder The layout of initial page will include the following: Header section - Displays on load - 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 IS can be used Footer section - Displays on load Anchor tag formatted to look like a button that will SAVE all RECIPE data AND CITE data from the USON file to local storage then proceed to a new page (Optionally, you can save the entire JSON file) 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). 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 ISON file name; include an ID for later formatting - Make sure you use relative referencing correctly so image displays when published - Hint: include the tags for help with placement - Template Literal MUST be used to build output HTML. 1 - 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 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 150N; 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 1S0N file The layout of 2nd page will include the following: Script setup and start-up: Retrieve all data (Recipe and CiTE or entire ISON file based on how you saved) from local storage NO7E: If you retrieve the JSON file ogoin for this page and do not use local storage exclusively, marks will be deducted Include a Back Button that will return to the farst page (vour choice of where and how it looks) Header section - Displays on load Winter 2023/Assignment w1/ Recipes - MuST include some formatting for header area (your choice), CSS or IS can be used Footer section - Displays on lead CiTt information from Local Storage as an anchor tag that opens site in a new tab MUST include some formatting for footer area (your choice); CSS or IS can be used Left Panel Create 3 buttons from Local Storage Recipe data that includes the Recipe Name as button text Each button will also call a function passing in the index number (0,1,2); MUSI use a forjof loop Format buttons Do NOT include a separate function for each button Right Panel When a button is clicked, display all recipe data for the button chosen based on the index number passed as the argument Ingredients must be in an unordered list NOTE: Remember, intages must display when published so review relotive reference for displaying imoges on a web site CVCTAAAA A-Rinnmant H1