Description

WEB222 Assignment4–DOM Manipulation

Grade value: 5% of your final course grade

Objective

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/Blackboardand unpack the zip file. In this assignment, you’ll 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 flags folder. And your tasks are to update JavaScript code in themyscript.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

You should not change the given files assignment4.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 document’s 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.

You must not use the DOM/NodeinnerHTML 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.

When running your web app on a browser, no errors should occur on the browser web console.

DETAILED INSTRUCTIONS

The Country Listitem

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

Update the text of the “subtitle” (<h4 id=”subtitle”>List of Countries and Dependencies</h4>) to “List of Countries and Dependencies” on the page.

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.

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

TheBy Population, “> 100,000,000” item

Complete the following tasks once the item is clicked:

Update the text of the “subtitle” to “List of Countries and Dependencies – Population greater than 100 million” on the page.

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

TheBy Population, “1 ~ 2 million” item

Complete the following tasks once the item is clicked:

Update the text of the “subtitle” to “List of Countries and Dependencies – Population between 1 and 2 million” on the page.

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.

TheBy Area & Continent, “1 million km2 , Americas” item

Complete the following tasks once the item is clicked:

Update the text of the “subtitle” to “List of Countries and Dependencies – Area greater than 1 million Km2, Americas” on the page.

Populate the HTML table with the data including countries whose area is
greater than 1 million km2 ,and the countries are in Americas.The results should be as the screenshot below. Click the screenshot to see the full-screen image.

TheBy Area & Continent, “All size, Asia” item

Complete the following tasks once the item is clicked:

Update the text of the “subtitle” to “List of Countries and Dependencies – All countries in Asia” on the page.

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

TheLanguage, ?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:

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.

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 full-screen image.

.

The “Honesty” page– honesty.html

Update the footer of each page with your full name.

Assignment submission

Important note

Using the DOM/Node innerHTML property to add images to the DOM or populate HTML tables will result in 100% penalty for the grade of your assignment.