COUNTRY NAMES

• To practice Forms and Arrays.
• To review HTML, CSS, and basic JavaScript.

For this project you will implement a webpage that displays the names of the 50 most populated countries in the world. The user can select a color and a font with which to display the country names. They also have the ability to filter the names by length. Finally, the user can filter the country names by choosing to exclude countries containing any combination of the letters 'N', 'A', or 'O'.

---

Here is a demonstration page that illustrates what your webpage should look like and how it will work.

Below is a screenshot of the program, for your reference:

---

To begin this project, please download the following zip file. It contains the files Project5.html, Project5.js, and Project5.css. For this project you must completely separate your HTML, Javascript, and CSS into these three files, respectively. Note that the file Project5.js already contains code that declares an array of country names (to save you from typing in 50 country names!)

This project requires a significant amount of time. Please start working on the project early. Office hours get busy during the few days before the project is due, and you may not get the help you need if you wait too long. As always, we will not grant project extensions due to technical problems on your end.

• There is a function called "indexOf" that can be used to locate a particular character within a string. Examples:
  • If s is the string "abcdefg", then the expression

    s.indexOf("d")

    would return 3 because the character "d" can be found at position 3 in the String. (Don't forget that we start counting with 0.)
  • If s is the string "abcabc", then the expression

    s.indexOf("c")

    would return 2 because the first occcurence of "c" is at position 2.
  • If s is the string "abcdefg", then the expression

    s.indexOf("z")

    would return -1 because the character "z" is not found anywhere in the string.
• I suggest writing a function with the prototype shown below. The parameter originalList represents an array of strings. This function will return a new array containing all of the strings from the original list that have a length between min and max.

  function filterByLength(originalList, min, max)

• I suggest writing a function with the prototype shown below. The parameter originalList represents an array of strings, and the parameter letter represents a string with just one character, like "A". This function will return a new array containing all of the strings from the original list that do not contain the letter specified.

  function filterByLetter(originalList, letter)

Radio Buttons for Colors

• Have the program begin with the radio button for "Black" already selected.
• The color selected applies only to the list of country names (not to any of the controls).
• The color for the country names should change immediately when the user selects one of the radio buttons
• The radio buttons must work cooperatively, so that at all times exactly one radio button is selected.

List Box for Fonts

• The font selected applies only to the list of country names (not to any of the controls).
• The font for the country names should change immediately when the user selects one of the options from the menu.
• The fonts that you should use are Arial, Times New Roman, and Courier New.

Text Boxes for Length Filtering

• Note that the minimum length and maximum length boxes must initially contain the values 0 and 20 respectively.
• Typing into these boxes does NOT immediately change the list of country names. The list will be updated to reflect the selected length restriction when the user clicks the update button.

Checkboxes for Letter Exclusion Filters

• Each of the checkboxes represents a filter that will exclude names from the list that contain a particular letter.
• Each checkbox takes effect immediately when it is selected
• Each checkbox ceases to take effect immediately when it is de-selected
• Checkboxes must be applied together in any combination. For example, if the user has selected "no A's" and also "no N's" then the names that are displayed should contain neither A's nor N's.

General

• The min/max length boxes and the checkboxes for exclusions must work together. In other words, these are filters that can be applied simultaneously, and in any combination. For example, if the range of lengths is specified as 6 to 8, and the checkboxes for "exclude N" and "exclude A" are selected, then the program will show all countries whose names have lengths between 6 and 8 and do not contain any N's or A's.
• You must use the Label tag for all controls other than the listbox.
• Your HTML file should not contain any style rules or Javascript. Put the style rules in the file called Project5.css, and put your Javacript in the file Project5.js.
• Your webpage must look exactly like the screenshot above, and must behave as illustrated by the demonstration page.
• Elements must be aligned in the exact same way we have them. In particular, both the country names and the controls should be centered horizontally within the browser. Also note that there is some spacing between the controls. Finally, please notice that the tops of the controls are all aligned with each other.
• The background color for the whole page must be grey.
• Both your html and your CSS must validate according to these validators:
  • HTML validator: http://validator.w3.org/#validate-by-upload
  • CSS validator: http://jigsaw.w3.org/css-validator/#validate_by_upload
• You must use proper indentation.
• Be sure to test your project with the Chrome browser -- that is how we will test it.
• You may not use any authoring tool (Dreamweaver, Frontpage, etc.) that generates the HTML for you.
• You must implement this project by yourself.
• DO NOT POST YOUR SOLUTION TO THIS PROJECT ON ANY WEB SERVER.

To submit your project, follow these steps:

1. Create a zip file called p5.zip that includes the following files:
   • Project5.html
   • Project5.css
   • Project5.js
2. Upload the zip file using the submit server available at: https://submit.cs.umd.edu/. Make sure you select the submit server entry (Project #5) that corresponds to this project.
3. After submitting your project, make sure you download from the submit server the submitted file and verify that what you have submitted is correct. Important: you must uncompress (extract) what you download from the submit server, otherwise it may not be rendered correctly. We will not accept projects sent via e-mail.

Please make sure you read the academic integrity section of the syllabus so you understand what is permissible in our projects. We want to remind you that we check your project against other students' projects and any case of academic dishonesty will be referred to the University's Office of Student Conduct.

Web Accessibility