Question: please do this problem ASAP. I'm stuck with this whole problem. This assignment will be used to test your knowledge of JavaScript, Local Storage, jQuery

please do this problem ASAP. I'm stuck with this whole problem.

assignment will be used to test your knowledge of JavaScript, Local Storage,

jQuery Selectors and Actions, and simple ISON retrieval. 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 6 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

This assignment will be used to test your knowledge of JavaScript, Local Storage, jQuery Selectors and Actions, and simple ISON retrieval. 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 6 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 your UserName.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 31 0 o 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 Sdocument.ready call o include an AJAX call to retrieve the Al-JSON.jton file included in your data folder (S.getJSON) Declare variables your choice of variable names) for all data within the JSON file NOTE: declare variables above document.ready Save your JSON data into declared variables Use the populated variables to save data to Local Storage Hint: Can use variable names as KEYs for Local Storage Create a Class for Zoo animals to include: o Animal ID / number data type - Your choice of ID Animal Name / string data type - Ex. Elephant, Giraffe, etc. Animal Classification / string data type - Ex. Mammal, Bird, Reptile, etc. Animal Image Link/string data type - Ex. elephant.jpg (name included in images folder) Populate an array (hard-coded-your choice of array name) with at least 6 zoo animals based on the Class in the $(document).ready function with at least 3 Animal Classifications (2 animals per classification) 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 from Your Home Country Name and home country MUST be pulled from variables loaded from JSON Template Literal MUST be used to build output string. Include an anchor tag on Your Full Name that will take the user to a new page (see details for new page below) MUST include some formatting for 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 Do not use header tags since they include too much spacing: Just include a font-size for area Content section - Will consist of 2 areas side-by-side on the page. You can use CSS Grid for the layout or other formatting of your choice Content section - Will consist of 2 areas side-by-side on the page. You can use CSS Grid for the layout or other formatting of your choice. Data (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 MUST USE jQuery to display output and for locating output areas Using a for/of loop, display the zoo animal data from the array in your js file in separate paragraph tags including the Animal Classification as a class attribute for the paragraph Ex. <p>all data with image displayed on either side</p> Remember, the image should be small (ex. width="25") Must use Template Literals to build output Include a header line above the list for context CSS for the Data area: Create a class to use for this entire area that includes (at the very least): A background colour o Center all data o Make all text small-cap formatting Include css for each classification so lines are a different colour based on Classification o Buttons area (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. MUST USE jQuery to call functions and locate output areas Include a button that will use jQuery to toggle a new Class formatting for the entire data list area displayed in the left panel including changing all text to italic and underlined (think toggleClass). Make sure the button text states clearly what the button is doing. Include a button that will use jQuery to toggle a new Class formatting that will add/remove a border to all paragraphs in the left panel that contain the text "Mammal" (or another classification if you do not have any Mammal classifications). MUST use jQuery contains query. Your choice of border style and colour. Make sure the button text states clearly what the button is doing. Include a button that will change the background colour of all paragraphs whose class attribute is equal to one of your Classifications except Mammal (ex. Bird, Reptile, etc.). MUST use jQuery attribute query and.css() option for css (will not toggle) Make sure the button text states clearly what the button is doing Footer section - Displays on load using jQuery (Hint: Include in S(document).ready(function() Include a button that will change the background colour of all paragraphs whose class attribute is equal to one of your Classifications except Mammal (ex. Bird, Reptile, etc.). MUST use jQuery attribute query and.css() option for CSS (will not toggle) Make sure the button text states clearly what the button is doing. Footer section - Displays on load using jQuery (Hint: Include in S(document).ready(function() {});) o My Login: Your Login Name / My ID: Your ID / My Program: Your Program - CITE 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 CITE is a link to a new page showing where you got your images NOTE: Wikimedia.org is a good place to find images MUST include some formatting for 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 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 -> 44->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 bi 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 program name in an h4 tag with descriptive text Include your home country in an h5 tag with descriptive text Add your image (included in the images folder) . Must use jQuery Css formatting to change the colour for each header line (unique for each line) Include a background colour for the entire page and center all lines on the page All this can be done in the head tag [<style></style>) for this page or create a separate CSS file. o Include your name in an h1 tag using descriptive text (ex. My name is...) o include your student number in an h2 tag with descriptive text o Include your login name in an h3 tag with descriptive text 0 Include your program name in an h4 tag with descriptive text o Include your home country in an h5 tag with descriptive text Add your image (included in the images folder) o Must use jQuery CSS formatting to change the colour for each header line (unique for each line) Include a background colour for the entire page and center all lines on the page All this can be done in the head tag (<style></style>) 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)

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock blur-text-image

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!

Can you please provide me the whole code 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...

Please post all files including HTML,CSS and javascript. I need it tomorrow. Thank you. This assignment will be used to test your knowledge of JavaScript, Local Storage and jQuery Selectors and...

Assignment #1 (10%) This assignment will be used to test your knowledge of JavaScript, Local Storage, jQuery Selectors and Actions, and simple JSON retrieval. Follow all details carefully and be sure...

Lecture Notes DL MGT 5100 - Distribution Management Spring 2017 1.0. Day one, Monday, Monday, 9 Jan 17 1.1. Reading Assignments: Chapters 1 and 2 1.1.1. I intend to follow the book so as to provide a...

I have to create a program in C and I can't figure it out. The program has to read a source file. Please help. /******************************************************************** PROJECT: Glossary...

Please answer correctly for guranteed upvoting!! Last time it was incorrectly answered SYST24444 Assignment \#1 Assignment \#1 (10\%) This assignment will be used to test your knowledge of native...

Please read the 10 pages of the article and answer the question: What should be BYD's objectives for the next years? What are the priority actions to achieve those objectives? IVEy | Publishing CEIBS...

\fThis is an electronic version of the print textbook. Due to electronic rights restrictions, some third party content may be suppressed. Editorial review has deemed that any suppressed content does...

The Kluckhohn-Strodtbeck framework does investigate whether people do what?

How will you communicate your vision of the Center to the general public on a local and/or national and/or international level? Be specific yet imaginative. Remember: Innovation= Creativity +...

You bought a stock one year ago for $ 4 8 . 5 7 4 8 . 5 7 per share and sold it today for $ 5 7 . 3 3 5 7 . 3 3 per share. It paid a $ 1 . 8 3 1 . 8 3 per share dividend today. If you assume that the...

helpme, please. Ximelagatran is an anticoagulant that has been studied extensively to replace Warfarin. deturmine the total hydrolessis product of this molecule

What are the Variable columns settings available in the Mining Models Tab?

What does the Mining Content Viewer in Visual Studio show in terms of Probabilities?

How are continuous variables normally handled in Decision Tree Algorithms?