Description
This assignment is about using Ajax to fetch data in text, XML, and JSON formats.
When you Google “weather” you will see some information much like the screenshots above. Multiple places keep track of weather data like this including OpenWeatherMap. OpenWeatherMap provides data in both XML and JSON formats. Your task for this assignment is to write JavaScript code for a web page to display this weather data similarly to how Google does. We will provide you with the HTML (weather.html) and CSS (weather.css) code to use. Turn in the following files: • weather.js, the JavaScript code for your weather web page’s behavior • weather.css, the CSS styles for your web page’s appearance (you don’t need to modify it, but you can if you like) • weather.html, the weather web page (you don’t need to modify it, but you can if you like) You are allowed to modify weather.html and weather.css 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. Data: Your program reads data from a web service at https://webster.cs.washington.edu/cse154/weather.php . You may assume that all data sent to your program from weather.php is valid and follows the formats below. This web service accepts three different types of queries, specified using a query string with a parameter named mode. Each type of query produces output in text, 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 mode is cities, which outputs plain text containing all city 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/weather.php?mode=cities Abidjan Accra Adana … 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. current day: The second query mode is oneday, which outputs information about the weather for the current day in XML format. In addition to the always-required mode query parameter, the oneday query requires a second parameter named city. The following query returns the results below (abbreviated): https://webster.cs.washington.edu/cse154/weather.php?mode=oneday&city=seattle Appearance and Behavior: All style or appearance aspects not mentioned in the provided CSS file are subject to the preference of the web browser. The screenshots in this document were taken in Chrome on Windows, which may differ from your system. The HTML page given to you shows a heading of “City Name:” followed by an input element with id of citiesinput. This is followed by a datalist with an id of cities. When the page loads, the box is empty and disabled. Using Ajax, the page should fetch the list of all cities from the web service as described previously, fill the datalist with an option for each name, and then enable input. More information about datalists can be found on the homework page of the web site. 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 typing a name in the input 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 when the user types a name into the input 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. City data: When the user chooses a city and clicks Search, that city’s information should be fetched using Ajax and injected into the page into the resultsarea. Specifically, the city name, the date and the description of the weather should be each in their own paragraphs inserted into the location div. The city name should have the capitalization it has in the XML and a class of title. The current temperature should come next followed by ℉ inserted into the currentTemp div. The date should be the current time. You can get this by printing the result of Date().
Precipitation data: There is an HTML table with the id of graph, initially empty:
If there is an error with any Ajax request, hide all of the loading areas on the page. (The provided weather .php web service delays itself by 1-2 seconds to help you test your loading behavior. If you want to test other delays, pass an optional parameter delay to the service for the number of seconds you want it to pause before returning its data.) Error Handling: If an error occurs during any Ajax request, other than the expected HTTP 410 error when a name’s ranking is not found, your program should show a descriptive error message about what went wrong. For full credit, your error message should not be an alert; it must be injected into the HTML page. The exact format of the error message is up to you, but it should at least include some descriptive error text about what went wrong. You can inject any error messages into the provided HTML page into the div with id of errors:
