Description
Objective
This assignment will help you learn and practice interactive DOM programming. Please do
this assignment on your own and submit only your own work. Gaining experience with
JavaScript and the web takes a lot of personal practice and working on these problems
yourself will help build your skill.
We will be creating a web application for exploring country data. This web app allows the
user to dynamically alter the page at runtime by choosing between various menu options:
Doing so allows the user to see a list of country data based on population, area, language,
etc.
Setup
Begin by downloading the assignment Zip file and setting up the necessary dependencies:
cd assignment4
npm install
This will download and save all the necessary files to a folder named node_modules/ in the
current directory. It will also allow you to run a number of scripts, including:
2
1. npm start – this will start a local webserver on http://localhost:5000 which you can
use to run and debug your web app.
2. npm run eslint – this will run eslint and tell you about any warnings or errors in
your code. You should have no warnings/errors before you submit your assignment.
3. npm run prettier – this will run pretter.io on your source code and automatically
reformat it correctly.
4. npm run prepare-submission – this will create your final submission.zip file to be
handed in, see more details below on submitting.
Instructions
You are asked to complete the code for the web app in the src/ folder. The program is broken
up into multiple files, and you need to work on the following files, and in the following order:
1. src/util.js has methods for working with the country data
2. src/ui.js has methods for working with the country data and DOM
3. src/index.js has our app’s main entry point, and handles event listeners
Each file is focused on a particular aspect of the program, and you will complete the program
by using all of the Objects and methods together.
Read the comments above each function and write your code in the empty function bodies to
implement the behaviours described in the comments. Your goal is to make it possible to
click on any of the menu items and have the table’s contents update to show the requested
data.
The table takes the following form:
• Flag – an with the flag for the country. All flag images are dynamically loaded
from https://www.countryflags.io/ and you will write code in ui.js to generate the
appropriate URLs
• Code – a string with the country’s 2-letter ISO country code
• Country/Dep. Name – a string with the name of the country. This will either be in
English, or one of the provided languages.
• Continent – a string with the continent for this country
• Area (Km2) – a number with the area in square km, formatted for the chosen language
• Population – a number with the population of the country, formatted for the chosen
language
• Capital – a string with the name of the country’s capital
All country data comes from the file src/js/countries-data.js (see this file for format details).
Finally, make sure you update `src/index.html` and `src/honesty.html` with your name and
information in the footer and other relevant sections.
3
Use the browser Developer Tools to debug your code. See
https://developers.google.com/web/tools/chrome-devtools and
https://developer.mozilla.org/en-US/docs/Tools for information on how to use the developer
tools for your browser. For example, you can call all of your functions directly in the Console
to test that they are working as you expect, set breakpoints in the Sources/Debugger tab to
inspect and step through code, etc. If you have questions on how to do any of this, ask your
professor.
NOTE: when developing web apps it is highly advisable to disable your browser cache while
the dev tools are open. See https://nicholasbering.ca/tools/2016/10/09/devtools-disablecaching/ for instructions on doing this.
Submission
When you have completed your assignment, you need to prepare your submission. To do so,
use the npm command:
npm run prepare-submission
This will do a number of things automatically for you:
1. Run prettier on your assignment code, formatting it
2. Create a directory called submission/
3. Run eslint on your code and save the result to submission/eslint.log
4. Create submission.zip from the contents of submission/*
You can upload and submit the submission.zip to Blackboard.
