CSC245 - Web Technologies and Programming Homework Assignment 5: Baby Names
This assignment tests your understanding of fetching data from files and web services using Ajax requests. You must match in appearance and behavior the following web page:
Background Information:
Every 10 years, the Social Security Administration provides data about the 1000 most popular boy and girl names for children born in the US, at http://www.ssa.gov/OACT/babynames/ . Your task for this assignment is to write the JavaScript code for a web page to display the baby names, popularity rankings, and meanings.
You do not need to submit any HTML or CSS file. You will be provided with the HTML (names.html) and CSS (names.css) code to use. Turn in only the following file:
◦ names.js, the JavaScript code for your Baby Names web page
Data: Your program will get its data from a web service located at the following URL: https://cs.berry.edu/webdev/scripts/labs/babynames/babynames.php
This web service has three “modes,” each of which provides a different type of data. Specify which type of data you want from it by changing a query parameter named type. Each query returns either plain text or JSON as its output. If you make a malformed request, such as one missing a necessary parameter, the service will respond with an HTTP error code of 400 rather than the default 200. If you request data for a name the server doesn't have data for, the service will respond with an error code of 404. (Hint: You can test queries by typing the URL of the web service, along with the appropriate query string parameters, in your web browser's address bar and seeing the result. You can also use the Network tab of your browser inspector to view the response details of an Ajax request.)
Modes: 1. list: The first type of query is list, which returns plain text containing all baby names on file, with each on its own line. The following query would return the results below (shortened by ...): https://cs.berry.edu/webdev/scripts/labs/babynames/babynames.php?type=list
Aaliyah Aaron Abagail ... (Order of the names is not particularly important, but you should use the names in the order provided, which you can assume will be alphabetical.)
2. rank: The second type of query is rank, which requires a second parameter called name and returns an XML document containing the provided baby name's popularity rank for each decade from 1900 to 2000. The overall XML document tag is called
The ranking value will be between 1 (popular) and 999 (unpopular), or 0. A rank of 0 means the name was not in the top 1000. The following query would return the results below: https://cs.berry.edu/webdev/scripts/labs/babynames/babynames.php?type=rank&name=morgan
{ "name" : "Morgan", "ranks" : [ { "year" : "1900", "rank" : 430 } { "year" : "1910", "rank" : 477 } ... { "year" : "2000", "rank" : 25 } ] } Although the web service currently always returns exactly 11 years' worth of data, from 1900 to 2000, your program should not rely on this. Your code should examine the XML to determine the year for each ranking.
3. meaning: The third type of query is meaning, which requires a second parameter called name and returns a plain-text description of the meaning of the provided name. The following query would return the results below: https://cs.berry.edu/webdev/scripts/labs/babynames/babynames.php?type=meaning&name=martin MARTIN m English, French, German From the Roman name Martinus, which was derived from Martis, the genitive case of the name of Roman god MARS. All names returned by list have ranking data, but not all will have meaning data (such as "Mogran"). If the requested name has no meaning associated with it, nothing at all should be displayed in the Origin/Meaning area.
You may assume that all JSON and text data sent to your program is valid and does not contain any errors. (Let me know immediately if something doesn’t seem right.)
Appearance and Behavior:
The HTML page given to you shows a heading followed by a select element with id of babyselect. When the page first loads, the select box will be disabled and contain no baby names. In the background, JavaScript code should fetch the list of names from the web service (described in the “Data” section above), fill the select box with an option element for each name, and then enable it.
Beneath the select box, in the center of the page, is a large 670×250px shaded bar graph section that is initially empty. When a name is selected from the dropdown, JavaScript code should fetch ranking data from the web service (described in the “Data” section above) and populate the graph with bars indicating that name's relative popularity for each year in the data. If a different name had previously been selected, the data for that name will need to be cleared from the graph before the new data is added. If the user selects the dummy "Select a name..." prompt from the list rather than a name, nothing whatsoever should happen.
The bars are positioned absolutely with respect to the overall shaded graph section. Each ranking bar's width is 50px. The height of each bar, in px, is calculated by taking the inverse of its ranking — that is, subtracting its ranking from 1000 — and taking ¼ of that. For example, the ranking of 880 leads to a bar with a height of 30px (one fourth of 1000 − 880). (Note that division is exact in JavaScript — 13 / 4 is 3.25 — so you'll want to round down any height values you compute using Math.floor or parseInt.) The bars' x-coordinates are such that the first bar's left edge is 10px from the left edge of the graph section, and there is 10px of horizontal space between each bar. The first bar's left edge is at x = 10px, the second is at x = 70px, the third at x = 130px, and so on. All bars' y-positions are such that their bottom edges are flush with the bottom edge of the shaded graph area.
Within each ranking bar appears its ranking number. The ranking numbers appear in an 18pt sans-serif font, horizontally centered at the top of the bars. Note that some less popular rankings (around 900 and up) have numbers that drop below the graph region's bottom edge or overlap its black border. You shouldn't attempt to “fix” this; it is the expected behavior.
The provided CSS file contains a class called ranking that contains all necessary CSS styles for these bars — with the exception of the x-position and height, which are unique to each bar. You should create a DOM element for each bar and assign this class to it. The element itself constitutes the bar, and its text content is the ranking.
If the ranking is very popular (1 through 10 inclusive), it should appear in red. There is a class called popular in the provided CSS file that contains the styles necessary for this.
Just above the shaded graph region, directly above each ranking bar, are labels representing the corresponding years. These are vertically positioned 1.5em above the top edge of the shaded graph and centered horizontally within the width of the ranking bar. The provided CSS file contains a class called year that contains all necessary styles for these elements — with the exception of their x-positions, which are unique to each year label.
Underneath the graph area appears a paragraph of text with information about the meaning of the selected name. When a new name is chosen from the select box, that name's meaning information should be loaded from the web service (described in the “Data” section above) and appear in the paragraph with the id of meaning. If no meaning is known to the web service, nothing at all should be displayed in this area.
Error messages: If an error or exception occurs during a list or rank Ajax request, your program should show a descriptive error message about what went wrong. Error handling for a meaning request is a little different: it is expected that meanings will not be found for some names (such as "Mogran"). If a name has no meaning data, an error message should not be shown (and no text should appear in the Meaning/Origin area). However, if there is an exception or a malformed request, an error message should still be shown, as with any other request.
For full credit, your error message should not be an alert; it must be injected into the page as content. The exact format of the message is up to you, but it should at least include the HTTP error code and some descriptive error text.
All other style elements on the page are subject to the preference of the web browser. Extra Feature: A separate specification document on the course web site describes several additional features you can complete to add functionality to your program. You will receive additional points/rewards as described in the other spec document.
Implementation and Grading: Submit your assignment URL to appropriate form on the course web page. All your files for this assignment should be in your Cloud9 workspace by the due date and time so that I can access them for grading. Place them in a subdirectory (folder) named hw5, so that it is possible to navigate to your page by entering a URL such as the following: http://your-workspace-name.c9users.io/hw5/names.html.
Make extra effort to minimize redundant code. Capture common operations as functions to keep code size and complexity from growing. You can reduce your code size by using the this keyword in your event handlers. For reference, my .js file has roughly 140 lines of code, including comments and blank lines.
For full credit, your JavaScript code should pass the provided JSLint tool with no errors. Minimize use of global variables, avoid redundant code, and use functions to organize your code. Some global variables are allowed, but it is not appropriate to declare lots of them; values should be local as much as possible. If a particular constant value is used frequently throughout your code, declare it as a global "constant" variable named IN_UPPER_CASE and use the constant throughout your code.
You should separate content (HTML), presentation (CSS), and behavior (JS). As much as possible, your JS code should use styles and classes from the CSS rather than manually setting each style property in the JS.
For full credit, you must write your code using unobtrusive JavaScript, so that no JavaScript code, onclick handlers, etc. are embedded into the XHTML code.
Your JavaScript code should have adequate commenting. The top of your file should have a descriptive comment header describing the assignment, and each function and complex section of code should be documented.
Format your code similarly to the examples from class. Properly use whitespace and indentation. Use good variable and method names. Avoid lines of code or comments more than 80 characters wide.
Please do not look for JavaScript solutions on the internet. Using or borrowing ideas from such code is a violation of our academic integrity policy and will result in severe penalty especially on this assignment. It defeats the point of learning anything on your own. You can search the Internet as a general reference for JavaScript techniques, but do not look at anything related or similar to the fifteen puzzle.
Please do not place a solution to this assignment online on a publicly accessible web site. Doing so is considered a violation of our course academic integrity policy.
This document adapted from an assignment © Copyright 2009 Marty Stepp / Jessica Miller and licensed under Creative Commons Attribution 2.5 License. CSC245 - Web Technologies and Programming Homework Assignment 5: Baby Names EXTRA FEATURES
The following are four extra features you can optionally complete. If you choose to do any of these extra features, in your file's comment header, indicate which one(s) you did.
Regardless of how many additions you write, the page behavior and appearance should still work as specified. You may not modify the HTML/CSS files; each feature must be done entirely through JavaScript. If you have a different idea for an addition to the program, please ask and I may approve it.
Extra Feature #1. Better Loading Feedback The page as currently described does not give the user very good feedback while it is loading its data, both when initially loading the list of names, and later when a name is chosen and that name's ranking and meaning data must be fetched.
For this feature, add code to do all of the following: ◦ Display a "Loading" message with a throbber image of some sort to indicate that the page is fetching data. You can find good Ajax "Loading" throbbers at http://ajaxload.info/ and other sites found by searching Google. Upload your throbber image to your web space and link to it using an absolute URL. ◦ Disable the select box, and modify the rest of the page visually to indicate certain things are disabled by "graying out" items or putting placeholder text into them. ◦ Change the user's mouse cursor to an hourglass/watch cursor using the CSS cursor property, http://www.w3schools.com/css/pr_class_cursor.asp .
You should make the above changes as soon as you begin fetching data, and they should persist until all Ajax requests have been completed (i.e. not until just the first request comes back). After the last Ajax request comes back, your page should revert to its normal idle state so the user can select a new name — even if any requests were unsuccessful.
To help you test, the babynames.php service can accept an optional query parameter delay, whose value should be an integer for a number of seconds of delay that the server should wait before sending its response. For example, requesting the following URL would retrieve the rankings for the name "Stefanie" after a delay of 10 seconds: https://cs.berry.edu/webdev/scripts/labs/babynames/babynames.php?type=rank&name=stefanie&delay=10
Extra Feature #2. Ability to Compare Multiple Names By default the page displays data about one name at a time. For this feature, add code so that if a second name is chosen, the previous data remains, with the new data superimposed in a different color. This provides a way to compare their relative popularity. Add some kind of "Clear" button/feature so the user can erase previous names.
You can decide details such as what to show in the Origin/Meaning box, and how to show both sets of bars. There is no exact specification of the appearance, so long as both sets of bars can be seen. You can decide what should happen if the user chooses a third name: Does the first go away? Do all 3 show? Etc.
Extra Feature #3. Animation Effects Once the user chooses a baby name, use JQuery (see as a starting point, https://www.w3schools.com/jquery/jquery_animate.asp) to make the bars animate into existence rather than simply appearing immediately on the page. Add at least one other animation effect to the page, such as fading in ranking numbers or shrinking/ growing an element on the page.
Extra Feature #4. Auto-complete Babies’ Names
Use the DOM to remove the select box from the page and replace it with an input text box where the user can type a name. As the user types, use to display any names in the data that start with or contain the partial text entered. The program should fetch rank/meaning data for the name when the user selects it from the auto-complete list and/or clicks a Search button that you inject into the page.
To help you write this feature, there are two additional optional parameters that the babynames.php service can accept when you are performing a list query. First is format, which, if set to html, will output the list of names as a ul list. The other is prefix, indicating an optional beginning to filter on (case insensitive). For example, the following query would output a list of names in HTML that begin with "mar": https://cs.berry.edu/webdev/scripts/labs/babynames/babynames.php?type=list&format=html&prefix=mar
- Mara
- Maranda
- Marc
- Marcel
- Marcelina ...