as the result should be showing like this:

this is an assignment in which you need to pull the information from the countries.json file to js function.

I only need the code for 2nd page. Just submitting all the information on the assignment just to see the idea to help you with which step need to do.

Please don't take the question back without an answer need this ASAP. emergency assignment submitting.

Thank you

Assignment \#2 (10\%) This assignment will be used to test your knowledge of JavaScript, Local Storage and JSON retrieval from server using API calls. Follow all details carefully and be sure to follow instructions for submitting your work. Create a mobile web site with the following structure: index.html - Be sure you have a viewport META tag - Include your login name-student number in the title > tags A folder called pages - Inside the pages folder, create a page called country.html A folder to hold 2 stylesheets (the folder name can be css) - The main stylesheet should be named yourUserName.css (ex: doejane.css) and it should be referenced in the index.html - Create a second style sheet for the second page. The name of this stylesheet can be any name that you decide A folder to hold the script files (example: scripts) - a script file in this folder and it must be named as yourLoginName.js (example: doejane.js). This file must be referenced in the index.html - Create a second script file for the country.html page and it can be named as per your choice A folder to hold your JSON file (Ex: data) / included in the A2.zip Instructions for your main .js file and index.html Include an onload event to the > tag of the index.html Create a div with a class called "gridArea" Create a section with a class called "pick" - Create an Heading with a title "Select a Country to see the details - Create a dropdown using the select tag with an id of "selectBox" after the heading - Add an option called "Select a Country" Create a section with an id of "country-info" - Add a H2 "Country Information" Create a function called loadCountries() in your main .js file - Call this function in the onLoad event of the body of index.html - The loadCountries() function should use the fetch API to retrieve the list of countries from the countries.json file from the data folder provided - Loop through the results and add the options to the dropdown list by appending the options to the innerHTML of the select - Set the name of the option to the name property from the JSON result - Set the value of the option to the code property from the JSON result - The name of the countries returned from the server will be displayed as options in the selectBox Create a function called showCountryinfo() in the main .js file - Call this function in the onchange event of the dropdown list with the id of selectBox - When this function is executed it should navigate to the next page which will be under the pages folder - For example: location.assign('//pages/country.html?code=CAN'); - The code is a query string variable. In the above example, code is 'CAN'. the value of code should change based on the name of the country selected. If the United States was selected, code has to be USA. The layout of this site will include the following: Header section - Displays on load - Fall 2022 Assignment \#2 Footer section - Displays on load - My Login: Your Login Name / My ID: Your ID / My Program: Your Program 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. Dropdown(left panel) - Make the entire area a section or a div and give it a unique ID (pick). This will make it easier for use in the Grid Area and for formatting. The dropdown box will be populated with data from countries.json by the loadCountries() function which gets executed by the body onload event. CSS for the dropdown area: - Create a class called pick - Set A background colour - Set the border-radius - Set a padding Country Info area (right panel) Make the entire area a section or a div and give it a unique ID (country-info). This will make it easier for use in the Grid Area and for formatting. - Set a background colour - Set the border colour - Set a border radius Script setup and start-up: - In the body onload call a javascript function called "loadCountry( ) " - Add a button called Go Back. When this button is clicked, it should go back to the index.html page - Include an h1 tag with the text "Country Information" - Include an img tag with the src = "" and id="country-flag" - Include your login name in an h3 tag with descriptive text - Include a p tag with a text "Capital:" and define a span tag inside with an id of "capital" - Include a p tag with a text "Population:" and define a span tag inside with an id of "population" The loadCountry() function should be defined in a JS file that is referenced by the country.html - Get the countryCode from the URL by looking for the query parameter called "code" - Make a fetch API call to the following endpoint URL - Example: var api='https://restcountries.com/v2/alpha?codes=' + countryCode; - Note: in the above example, countryCode was the code that was retrieved from Url query string with a parameter called code - When the Fetch API call has successfully completed and returned the JSON Set the src property of the img to the flags.png of the result - Set the innerHTML of the "capital" span to the capital property in the result Set the innerHTML of the "population" span to the population property in the result Design Mocks for Reference Only (index.html) Fall 2022 Assignment \#2 Grading View: - I will be using the Chrome Toggle Device Bar for Galaxy S20 Ultra in Landscape mode when viewing your site - REMEMBER, this must be in a mobile layout; too much scrolling or whitespace will reduce your mark