Assignment 4 – DOM Manipulation

WEB222 Assignment 4 – 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/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 flags 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
2
(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 your 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
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.
4
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.
5
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.
6
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.
7
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 full-screen image.
8
.
The "Honesty" page – honesty.html
▪ Add date and your name in the provided places to complete the honesty declarations.
▪ Update the footer of each page with your full name.
Assignment submission
▪ Compact all your files including all directory structures into a zip file named
assignment4.zip. Submit the zip file to the Blackboard (My.Seneca) before the due
date.
Important note
9
▪ 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.
▪ NO LATE SUBMISSIONS for assignments. Late assignment submissions will not be
accepted and will receive a grade of zero (0).
▪ After the end (11:00pm) of the due date, the assignment submission link on the
Blackboard will no longer available.