ANSWER SHOULD BE UNIQUE AND NOT COPY FROM ALREADY POSTED FROM CHEG Mobile website (Note Create a new folder to hold all your files folders) You will need to include index html Links Link to jquery js Link to your js script file Link to your stylesheet file Updates Be sure you have a viewport META tag Include your login name student number in the tags A folder to hold other HTML pages (ex pages) A folder to hold stylesheet(s) (ex css) Your main stylesheet MUST be called yourUserName css (ex doej 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 2nd page of this assignment) A folder to hold your script files (ex js or scripts) You MUST include jquery js in this folder and link to this file in index html Your main script file MUST be called yourLoginName js (ex doej js) and must be linked in index html It is your choice what to name the js file for the 2nd page A folder to hold your images for the assignment (ex images) A folder to hold your JSON file (ex data) Download the JSON file from SLATE and include in this folder Update and include your personal information in the JSON file where indicated Script setup (yourLoginName js) and start up Setup your $document ready statement (jQuery) NOTE Class declarations and variables should be declared above outside the $document ready call Include an AJAX call to retrieve the A1 JSON json file included in your data folder ($ getJSON) Save individual data to Local Storage (should be populated from JSON file) NOTE Because of the asynchronous nature of loading, you will need to save your personal data to Local Storage and then retrieve into your variables outside of the getJSON file Declare variables (your choice of variable names) and populate from Local Storage Include a variable for each data item in local storage populated from JSON file NOTE declare variables above $document ready Create a Class for Program Term data Term number Will hold a number Example 1 for Term 1) Term Program name Term name Will hold string data showing your program abbreviation and the term name Example CP for Term 1 Populate an array (hard coded your choice of array name) with 4 Program Term entries based on the Class be sure to populate within the $document ready function Example Term number 1 Term Name CP for Term One CP Computer Programming SE Software Engineering ISE for Information Systems Engineering SDNE for Software Development and Network Engineering) Create a Class for course codes (ex 1 PROG 10082 image name) Term number data type (ex 1, 2, 3, 4) Course Type string data type (ex PROG, SYST, TELE, COMM, SYST, DBAS, INFO) Course Code string data type (ex 10082, 10049, 13167, etc ) Image (file name from the images folder) that represents the Course (ex ) Populate an array (hard coded your choice of array name) with at least 3 course codes based on the Class for each of the first 4 terms of your program (3 for each term 12 in all if using minimum number You can include all courses if you want) Ex Term 1 Course Type PROG Course Code 10082 Image java png The layout of this site will include the following Header section Displays on load using jQuery (Hint Include in $(document) ready(function() ) ) SYST24444 Assignment 1 for Your Full Name Your Student Number Name and number MUST be pulled from variables loaded from JSON Local Storage Template Literal MUST be used to build output string MUST include some formatting for the header area (your choice) so you can include the formatting on the tag or create a section or div with a unique ID for formatting and include header information inside Content section Will consist of 2 areas side by side on the page (order is your choice) You can use CSS Grid for the layout or other formatting of your choice Output area to list courses (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 4 buttons horizontally across area to be used to display term courses (button text your choice ex Term 1) Give each button a unique ID so jQuery can be used to call the click event Create an empty section or div with a unique id and a class for CSS formatting this is the area where Term information will display based on specific button selected Change font family and color Create click events for each individual button using jQuery that will call a separate function and pass in the term selected (ex Term 1 button will pass in 1 as the argument) The function will use the passed in term argument to display the correct header from the Program Term array (Example CP for Term One) Under the header, a list of paragraphs will be created to list courses for the Term selected only with data coming from the array created Format Course TypeCode Image On start up, call this function passing in 1 so the first term classes will display on site load NOTE Images should be small (think icon size) You can use the width attribute in the tag NOTE You MUST use Template Literal to build the output and For Of loop MUST be used CSS for this entire area Add a background colour and center all data Button Link area (right panel) Make the entire area a section or a div and give it a unique ID This will make it easier to use in the Grid Area and for formatting Include a button that will use jQuery to toggle a new Class formatting for the list in the left panel (think toggleClass ) Make sure the button text states clearly what the button is doing Change the font family and color (noticeably different from original CSS) on click Include a button that when clicked will highlight any item in the term list that includes PROG Make sure the button text states clearly what the button is doing NOTE Highlight can be doing by simply changing the background and text colors Include an anchor tag that displays your personal image plus text to tell the user to click to go to the 2nd page CSS for the Button area Round the edges of the image within the anchor tag (border radius) Add a background colour and center all data Footer section Displays on load using jQuery (Hint Include in $(document) ready(function() ) ) Login Your Login Name Campus Your Campus Program Your Program All personal data MUST be pulled from the variables populated from JSON Local Storage Template Literal MUST be used to build output string Labels before data MUST be included MUST include some formatting for the footer area (your choice) so you can include the formatting on the tag used or create a section or div with a unique ID for formatting and include footer information inside 2nd page Script setup and start up On document load (you will need a separate js file for this page that includes a $(document) ready(function() ) ) Declare variables to hold all your personal information (saved in local storage) Pull all your personal data from local storage into the declared variables Display all your personal data in decreasing header tags (h1 h2 h3 h4 h5) You can create the header tags in the HTML and then populate in the js file OR you can build the header lines completely in the js file Template Literal MUST be used to build output Include your name in an h1 tag using descriptive text (ex My name is ) Include your student number in an h2 tag with descriptive text Include your login name in an h3 tag with descriptive text Include your campus name in an h4 tag with descriptive text Include your program name in an h5 tag with descriptive text Add your image (included in the images folder) Must use jQuery CSS formatting to include at least 2 formats for each header line Hints color, font style, text decoration, font variant, font family, font variant, etc Include a background colour for the entire page and center all lines on the page All this can be done in the head tag () for this page or create a separate CSS file Try using a radial gradient for a nice background colour Include a Back Button that will return to the first page (your choice of where and how it looks)

Question

ANSWER SHOULD BE UNIQUE AND NOT COPY FROM ALREADY POSTED FROM CHEG Mobile website (Note  Create a new folder to hold all your files folders)  You will need to include  index html Links  Link to jquery js Link to your js script file Link to your stylesheet file Updates  Be sure you have a viewport META tag Include your login name student number in the tags A folder to hold other HTML pages (ex  pages) A folder to hold stylesheet(s) (ex  css) Your main stylesheet MUST be called yourUserName css (ex  doej 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 2nd page of this assignment)  A folder to hold your script files (ex  js or scripts) You MUST include jquery js in this folder and link to this file in index html Your main script file MUST be called yourLoginName js (ex  doej js) and must be linked in index html It is your choice what to name the  js file for the 2nd page A folder to hold your images for the assignment (ex  images) A folder to hold your JSON file (ex  data)   Download the JSON file from SLATE and include in this folder Update and include your personal information in the JSON file where indicated Script setup (yourLoginName js) and start up  Setup your $document ready statement (jQuery) NOTE  Class declarations and variables should be declared above outside the $document ready call Include an AJAX call to retrieve the A1 JSON json file included in your data folder ($ getJSON) Save individual data to Local Storage (should be populated from JSON file) NOTE  Because of the asynchronous nature of loading, you will need to save your personal data to Local Storage and then retrieve into your variables outside of the  getJSON file Declare variables (your choice of variable names) and populate from Local Storage  Include a variable for each data item in local storage populated from JSON file NOTE  declare variables above $document ready Create a Class for Program Term data Term number Will hold a number Example  1 for Term 1) Term Program name Term name Will hold string data showing your program abbreviation and the term name Example  CP for Term 1 Populate an array (hard coded your choice of array name) with 4 Program Term entries based on the Class  be sure to populate within the $document ready function Example  Term number  1 Term Name  CP for Term One CP Computer Programming  SE Software Engineering  ISE for Information Systems Engineering  SDNE for Software Development and Network Engineering) Create a Class for course codes (ex  1   PROG   10082   image name)  Term   number data type (ex  1, 2, 3, 4) Course Type   string data type (ex  PROG, SYST, TELE, COMM, SYST, DBAS, INFO) Course Code   string data type (ex  10082, 10049, 13167, etc ) Image (file name from the images folder) that represents the Course (ex ) Populate an array (hard coded your choice of array name) with at least 3 course codes based on the Class for each of the first 4 terms of your program (3 for each term  12 in all if using minimum number  You can include all courses if you want)  Ex  Term  1 Course Type  PROG Course Code  10082 Image  java png The layout of this site will include the following  Header section   Displays on load using jQuery (Hint  Include in $(document) ready(function()   )  ) SYST24444 Assignment  1 for Your Full Name   Your Student Number Name and number MUST be pulled from variables loaded from JSON Local Storage Template Literal MUST be used to build output string  MUST include some formatting for the header area (your choice) so you can include the formatting on the tag or create a section or div with a unique ID for formatting and include header information inside Content section   Will consist of 2 areas side by side on the page (order is your choice)  You can use CSS Grid for the layout or other formatting of your choice  Output area to list courses (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 4 buttons horizontally across area to be used to display term courses (button text your choice  ex  Term 1) Give each button a unique ID so jQuery can be used to call the click event Create an empty section or div with a unique id and a class for CSS formatting  this is the area where Term information will display based on specific button selected Change font family and color Create click events for each individual button using jQuery that will call a separate function and pass in the term selected (ex  Term 1 button will pass in 1 as the argument) The function will use the passed in term argument to display the correct header from the Program Term array (Example  CP for Term One) Under the header, a list of paragraphs will be created to list courses for the Term selected only with data coming from the array created Format  Course  TypeCode Image On start up, call this function passing in  1  so the first term classes will display on site load NOTE  Images should be small (think icon size)  You can use the width attribute in the tag NOTE  You MUST use Template Literal to build the output and For Of loop MUST be used CSS for this entire area  Add a background colour and center all data Button Link area (right panel)   Make the entire area a section or a div and give it a unique ID  This will make it easier to use in the Grid Area and for formatting  Include a button that will use jQuery to toggle a new Class formatting for the list in the left panel (think toggleClass )  Make sure the button text states clearly what the button is doing  Change the font family and color (noticeably different from original CSS) on click Include a button that when clicked will highlight any item in the term list that includes PROG Make sure the button text states clearly what the button is doing  NOTE  Highlight can be doing by simply changing the background and text colors Include an anchor tag that displays your personal image plus text to tell the user to click to go to the 2nd page  CSS for the Button area  Round the edges of the image within the anchor tag (border radius) Add a background colour and center all data Footer section   Displays on load using jQuery (Hint  Include in $(document) ready(function()   )  ) Login  Your Login Name   Campus  Your Campus   Program  Your Program All personal data MUST be pulled from the variables populated from JSON Local Storage  Template Literal MUST be used to build output string  Labels before data MUST be included MUST include some formatting for the footer area (your choice) so you can include the formatting on the tag used or create a section or div with a unique ID for formatting and include footer information inside 2nd page Script setup and start up  On document load (you will need a separate  js file for this page that includes a $(document) ready(function()  )  ) Declare variables to hold all your personal information (saved in local storage) Pull all your personal data from local storage into the declared variables Display all your personal data in decreasing header tags (h1    h2    h3   h4   h5) You can create the header tags in the HTML and then populate in the  js file OR you can build the header lines completely in the  js file Template Literal MUST be used to build output Include your name in an h1 tag using descriptive text (ex  My name is    ) Include your student number in an h2 tag with descriptive text Include your login name in an h3 tag with descriptive text Include your campus name in an h4 tag with descriptive text Include your program name in an h5 tag with descriptive text Add your image (included in the images folder) Must use jQuery CSS formatting to include at least 2 formats for each header line Hints  color, font style, text decoration, font variant, font family, font variant, etc  Include a background colour for the entire page and center all lines on the page All this can be done in the head tag () for this page or create a separate CSS file  Try using a radial gradient for a nice background colour Include a Back Button that will return to the first page (your choice of where and how it looks)

SolutionInn · Accepted Answer

The Answer is in the image, click to view ...

Question: ANSWER SHOULD BE UNIQUE AND NOT COPY FROM ALREADY POSTED FROM CHEG Mobile website (Note: Create a new folder to hold all your files/folders). You