Practise DOM/JavaScript coding, dynamically adding image and populating HTML table using DOM (rather than innerHTML property), and updating the text in HTML element using the innerHTML property.

Specifications

To begin, download assign4-template.zip file from My.Seneca/Blackboard and unpack the zip file. In this assignment, youll build up a front-end web app which queries data from a given array of Country objects, named countries, and show the results on a web page using HTML DOM API. The array of Country objects is provided in the js/a4-country-data.js file and all countries flag images are stored under the flages folder. And your tasks are to update JavaScript code in the myscript.js file according to the instructions below.

Open the assignment4.html file in a browser, a 2-level menu will show up on the page,

Your tasks are that when the menu items are clicked, appropriate country data should be populated into the HTML table as specified.

BASIC REQUIREMENTS

1. You should not change the given files html, a4-country-data.js or image files under flags folder. The myscript.js and honesty.html are the two files that you are allowed to update. Note: you should create event handlers to the menu items (the assignment4.html documents unorder list <li id=menu_??> items) using JavaScript code inside the myscript.js file. When one of these items is clicked, a corresponding function should be called to change the subtitle and populate the country table.
2. You must not use the DOM/Node innerHTML property to populate HTML tables, including adding images. However, using innerHTML property to update the text of the subtitle (<h4 id=subtitle>List of Countries and Dependencies</h4>) on the page is appropriate.
3. When running you web app on a browser, no errors should occur on the browser web console.

DETAILED INSTRUCTIONS

The Country List item

When the Country List item is clicked, the web page assignment4.html will be (re)loaded into the browser. Complete the following tasks upon the page is loaded:

1. Update the text of the subtitle (<h4 id=subtitle>List of Countries and Dependencies</h4>) to List of Countries and Dependencies on the page.
2. Populate the HTML table with the data including all countries. The results should be as the screenshot below. Click the screenshot to see the full-screen image.

3. Note: the flag images are provided under the flags The flag image of each country has the file name which is same as the code of the country, e.g. Canadas ccTLD (country code / top-level domain) is CA, and Canadas flag image is named ca.png under the flags folder.

The By Population, > 100,000,000 item

Complete the following tasks once the item is clicked:

1. Update the text of the subtitle to List of Countries and Dependencies Population greater than 100 million on the page.
2. Populate the HTML table with the data including countries whose population is greater than 100 million. The results should be as the screenshot below. Click the screenshot to see the full-screen image.

The By Population, 1 ~ 2 million item

Complete the following tasks once the item is clicked:

1. Update the text of the subtitle to List of Countries and Dependencies Population between 1 and 2 million on the page.
2. Populate the HTML table with the data including countries whose population is between 1 and 2 million. The results should be as the screenshot below. Click the screenshot to see the full-screen image.

The By Area & Continent, 1 million km², Americas item

Complete the following tasks once the item is clicked:

1. Update the text of the subtitle to List of Countries and Dependencies Area greater than 1 million Km2, Americas on the page.
2. Populate the HTML table with the data including countries whose area is greater than 1 million km², and the countries are in The results should be as the screenshot below. Click the screenshot to see the full-screen image.

The By Area & Continent, All size, Asia item

Complete the following tasks once the item is clicked:

1. Update the text of the subtitle to List of Countries and Dependencies All countries in Asia on the page.
2. Populate the HTML table with the data including all Asia countries. The results should be as the screenshot below. Click the screenshot to see the full-screen image.

The Language, English item

Same as the Country List item

The Language, ? item

Select and implement only one language from Arabic, Chinese, French, Hindi, Korean, Japanese, and Russian. Complete the following tasks once the item is clicked:

1. Update the text of the subtitle to fit selected language on the page, e.g. List of Countries and Dependencies Country / Dep. Name in Chinese () if Chinese is selected.
2. Populate the HTML table with the data including all countries, and show the

Country/Dep. Name in the selected language. The results, e.g. (Chinese)

selected, should be as the screenshot below. Click the screenshot to see the fullscreen image.

.