WEB222-Assignment 4 Solved

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, 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 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 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.  

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 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.

 

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 km2, 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 km2, and the countries are in Americas. 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.

.