Description
This assignment is about using Ajax to fetch data in text, HTML, XML, and JSON formats.
Every 10 years, the Social Security Administration provides data about the 1000 most popular boy and girl names for children born in the US for each gender, at https://www.ssa.gov/OACT/babynames/ . Your task for this assignment is to write JavaScript code for a web page to display the baby names, popularity rankings, and meanings. We will provide you with the HTML (names.html) code to use. Turn in the following files: • names.js, the JavaScript code for your Baby Names web page’s behavior • names.css, the CSS styles for your web page’s appearance • names.html, the Baby Names web page (you don’t need to modify it, but you can if you like) You are allowed to modify names.html but are not required to do so. You can change the page’s general appearance, so long as it meets the requirements in this spec. We encourage you to be creative and have fun. This program uses Ajax to fetch data from the Webster server. Ajax can only connect to a web server from a page located on that same server. This means that you must upload your page to Webster to test it. If you try to fetch data from Webster while viewing the page from your local hard drive, the Ajax request will fail. Additional required features for CSE majors (B and D sections) are found in a separate spec on the class web site. Non-CSE majors (A and C sections) do not need to complete any such features.
Data: Your program reads data from a web service at https://webster.cs.washington.edu/cse154/babynames.php . You may assume that all data sent to your program from babynames.php is valid and follows the formats below. This web service accepts four different types of queries, specified using a query string with a parameter named type. Each type of query produces output in text, HTML, XML, or JSON format. (You can test queries by typing in their URLs in your web browser’s address bar and seeing the result.) If you submit an invalid query, such as one missing a necessary parameter, your request will return an HTTP error code of 400 (Invalid Request) rather than the default 200.
1. list: The first query type is list, which outputs plain text containing all baby names on file in a plain text format, with each on its own line. The following query would return the results below (abbreviated): https://webster.cs.washington.edu/cse154/babynames.php?type=list Aaden Aaliyah Aaron … The provided web service generally returns the names in alphabetical order, but your code should not rely on this. Just display the names in whatever order the service returns them, and don’t make assumptions about the order. 2. meaning: The second query type is meaning, which outputs information about that baby name’s meaning in HTML format as a web page fragment. In addition to the always-required type query parameter, the meaning query requires a second parameter named name. The following query returns the results below: https://webster.cs.washington.edu/cse154/babynames.php?type=meaning&name=morgan <div 4. celebs: The fourth query type is celebs, which outputs JSON data about actors who have the same first name as the given baby name. The celebs query requires two additional parameters named name and gender. The overall JSON data object contains a single field named actors, which is an array of matching celebrities (they come from the actors table of the imdb database). If no actors match, the array will be empty ([]). Each matching actor is a nested object with three fields: strings called firstName and lastName representing the actor’s name, and filmCount representing the number of films in which the actor has appeared. The following query would return the results below (abbreviated): https://webster.cs.washington.edu/cse154/babynames.php?type=celebs&name=morgan&gender=m { “actors”: [ {“firstName”: “Morgan”, “lastName”: “Alling”, “filmCount”: 6}, {“firstName”: “Morgan”, “lastName”: “Andersson”, “filmCount”: 11}, …, {“firstName”: “Morgan”, “lastName”: “Lund”, “filmCount”: 7} ] }
Appearance and Behavior: All style or appearance aspects not mentioned below are subject to the preference of the web browser. The screenshots in this document were taken in Firefox on Windows, which may differ from your system. The font for the page body (including form controls such as text boxes and buttons) is 12pt Georgia, with a fallback of the default serif font on the system. Heading fonts are proportional to this. The HTML page given to you shows a heading of “First Name:” followed by a select element with id of allnames. When the page loads, the box is empty and disabled. Using Ajax, the page should fetch the list of all names from the web service as described previously, fill itself with an option for each name, and then enable itself. The rest of the page is inside of a large div with the id of resultsarea. Initially this div is hidden, but when the user clicks Search after selecting a name from the select box, you should make this area appear. (You can make an area of the page appear/disappear by setting the .style.display property on its HTML DOM object.) Nothing should happen and no data should be fetched if the user selects the initial blank “(choose a name)” option in the list. Nothing should happen when the user chooses a name from the select box; wait until they click the Search button to search. You may assume that the user doesn’t click Search again until the current search is done downloading.
Meanings: The next section of the page has the heading “Origin/Meaning:”. It is initially blank. When the user chooses a name and clicks Search, that name’s meaning data should be fetched using Ajax and injected into the page into the paragraph with id of meaning. The meaning has a q (quote) element that should appear in italic.
Rankings: The next section of the page has the heading “Popularity:”. It is initially blank. When the user chooses a name and clicks Search, that name’s ranking information should be fetched using Ajax and injected into the page into this area. Specifically, there is an HTML table with the id of graph in this area, initially empty:
The ranking bars are drawn as divs inside each table cell td of the second row of the table. Each ranking bar uses a pinkish background color of #FFBBBB. The bar’s width is exactly 50px. Its height should be one fourth as many pixels as the “inverse ranking” for that decade. The inverse ranking is defined to be 1000 minus the ranking. For example, a ranking of 880 would lead to a bar with a height of 30 because one fourth of (1000 – 880), or 120, is 30. (Division is exact in JavaScript; 13/4 is 3.25. Round down using parseInt.) The overall height of each td cell in the second row of the graph table is 250px. The bottoms of the bars are aligned vertically; achieve this by setting the td table cells to have a vertical-align of bottom. If the given name was not in the top 999 rankings for that decade, its rank in the XML will be 0. You should handle this special case by drawing the ranking bar div with a height of 0 pixels tall. Within each ranking bar appears the ranking number for that decade. The numbers appear in bold text at the top of the bar, horizontally centered within the bar. If the ranking is very popular (1 through 10 inclusive), the ranking number should appear in red. Some less popular rankings (around 900 and up, or 0) have numbers that drop below the bottom of the graph; this is expected and you don’t need to treat this as a special case. Some name/gender combinations (such as Aaliyah/male) in the overall list do not have any ranking data. In such a case, the babynames.php query will return an error code of 410. You should handle this case by displaying a message indicating that there was no ranking data for the chosen name. There is already a div in the page with the id of norankdata that contains such a message, but it is hidden by default, so you must show it in such cases.Celebs: The next section of the page has the heading “Celebrities with This First Name:”. It is initially blank. When the user chooses a name and clicks Search, that name’s celebrity information should be fetched using Ajax and injected into the page into this area. There is an HTML bulleted list (ul) with the id of celebs, initially empty:
-
- Subsequent Searches: The user can use the page to make multiple searches. When making a search, any data from a previous name should be cleared from the screen. You can remove all HTML content inside an area of the page by setting its innerHTML to an empty string. For example, to clear out the div with the id of example: document.getElementById(“example”).innerHTML = “”; // clear out any child elements Be careful to test your page with several searches in a row. For example, if one search has no ranking data (such as Aaliyah/male), you will have shown the grapherror message. But on the next search, you should hide this message.
-
- Loading Feedback: In each section of the page where data is shown, there is a small div with an animated “loading” GIF image that should be displayed while the data is being fetched from the server. For example: