Project 2

Goal: Create a webpage to look up information for cities around the world.

Input Script: https://facweb.cdm.depaul.edu/sjost/cities.js
You can access this script directly from the URL. You don't need to download it.

Examples: KidsTextArea1 KidsTextArea2

Create a webpage with these controls:

Part 1
- Textfield and label for country.
- Textfield and label for subcountry (state, province, region, etc.)
- Button with caption Show Cities. When clicked, it outputs the cities in the given the country and subcountry.
- Textarea and label to show all the cities for a given country and subcountry.
  You can create a textarea with scrollbars like this:
```
<textarea id="taOutput" style="overflow-y:scroll; 
          resize: none"></textarea>
```
Part 2:
- Textfield and label for city.
- Button with caption Show Country/Subcountry. When clicked, it shows country and subcountry given the city.
- Textarea and label to show each country and subcountry that contains the city.
Note: instead of using textareas to display the output for each part, you can use paragraphs instead, something like this:
```
<p id="paraOutput"></p>
```
Grading Breakdown: Functionality: 65%; Layout and Styles (CSS): 15%; Source Code Comments 10%; Indentation 5%; Submitted Properly: 5%.

Goal: Modify Project 2a so that the JSON string is uploaded from the user's harddrive instead of accessing from an online script.
Relevant Example: FileUpload
Use your Project 2b code as is or modify it as you wish.
Here are the steps that we discussed in class on October 17 for modifying your Project 2a submission to obtain your Project 2b submission:
1. Delete this line in your HTML file:
```
<script src="cities.js"></script>
```
2. Make sure that the file you download to your harddrive is a true JSON file with file extension .json, not the JavaScript script that you used for Project 2a. Here are both files:
  cities.js (don't use) world-cities.json (use).
3. Copy the readSingle event listener from the FileUpload example into your script.js file. Include the line
```
var contents;
```
  that immediately before the function.
4. Make sure that the contents variable matches the global variables that you use in the rest of your code for the JSON.parse method calls.
5. Copy the code from the init method in the FileUpload Example that creates the file upload object (input element with type="file").
Before running your Project 2b, download world-cities.json to your hardrive.
Grading Breakdown: Functionality: 60%; Layout and Styles (CSS): 15%; Source Code Comments in HTML, CSS, and JavaScript Files: 10%; Headers with Name, Project Number, and Submit Date: 5%; Zipfile named properly: 5%; URL submitted in comment: 5%.