Assignment #2CSCI 201 Spring 20194.5% of course grade

TitleWeathermeister Front-End

Topics CoveredJava Classes File I/O Sorting AlgorithmsBasic Java Topics HTML CSSJava Servlets JSP JavaScript

IntroductionThis program will build on the weather program you wrote for assignment 1. You will add a web-based front-end to the application in this assignment, and you will add more back-end functionality to the program in assignment 3.

Data PersistenceFor this assignment, you will continue reading from the same file format as you did in assignment 1. If you were unable to get your assignment 1 completed, or if you want to use a different solution, the solution from the course staff is posted on the Assignments page of the course web site.

The first page in your application should be named index.jsp. When the page loads, your code should read a file named weather.txt from the WebContent directory. Store the data in the session context so you can access it on different pages without needing to read the file again. The file will be formatted the same as in assignment 1, with the addition of the following fields:

- 2nd parameter – state - 3rd parameter – country- 4th parameter – latitude of city- 5th parameter – longitude of city- 6th parameter – sunrise time- 7th parameter – sunset time

city|state|country|latitude|longitude|sunrise|sunset|currentTemperature|dayLow|dayHigh|humidity|pressure|visibility|windSpeed|windDirection|conditionDescription1|conditionDescription2|...|conditionDescriptionN

There could be multiple conditionDescriptions, but there will be at least one. A sample file is provided here and posted on the course web site. I recommend that you create your own

Assignment #2CSCI 201 Spring 2019

test files that are longer, since the file we will use for testing will be different from the sample one provided.

Los Angeles|CA|United States|34.0522|118.2437|6:56 am|5:13 pm|68|54|72|35|29.80| 88.3|8.4|270|sunny|breezy|clearNew York|NY|United States|40.7128|74.0060|7:14 am|5:01 pm|35|23|37|21|28.70|35.3| 7.4|165|cold|snowChicago|IL|United States|41.8781|87.6298|7:11 am|4:53 pm|17|10|30|30|30.01|17.8| 30.3|110|windy|cold|ice|more wind

AssignmentWhen your index.jsp loads, you will read the weather.txt file (which will be hard-coded) from the WebContent directory. If there is any error in the weather.txt file, you should display an error message on the page and not allow the user to proceed. We will not perform any error checking outside of the same errors we checked in the sample files posted on the web site for assignment 1 so do not spend time trying to handle more errors (though you should make sure your program can handle all the errors we tested). You can assume the following data types for each of the fields:

city – Stringstate – Stringcountry – Stringlatitude – double (in degrees with four decimal places)longitude – double (in degrees with four decimal places)sunrise time – String (12-hour time followed by a space and am or pm)sunset time - String (12-hour time followed by a space and am or pm)currentTemperature – int (measured in degrees Fahrenheit)dayLow – int (measured in degrees Fahrenheit)dayHigh – int (measured in degrees Fahrenheit)humidity – int (measured as a percentage)pressure – float (measured in Inch Hg)visibility – float (measured in miles)windspeed – float (measured in miles/hour)windDirection – int (measured in degrees)conditionDescription - String

Once a properly-formatted weather.txt file is parsed, the home page below should be displayed.

Assignment #2CSCI 201 Spring 2019

Figure 1 - Home Page (city search)

Figure 2 - Home Page (latitude/longitude search)Home PageUsers can search either by city name (Figure 1) or by coordinates (Figure 2). Users can switch between both options by using the radio buttons. Clicking the radio button for “Location” should split the search bar into two, one for each value. Clicking on the magnifying glass icon will run the search for the provided query. Alternatively, users can click on the “Display All” button to return a list of all cities without checking the search query.

Assignment #2CSCI 201 Spring 2019

Figure 3 - Search Results Page

Search Results PageCompleting the search or selecting “Display All” will lead the user to the search results page. On the top of the page is a header bar. Clicking on “WeatherMeister” will direct the user back to the Home Page. The user can also use the search bar in the header to run another search. This search bar should replicate the functionality as the search bar in the home page, i.e. should split into two when searching by latitude/longitude.

The search results are displayed in a table, and the user can choose to sort the data with the dropdown menu on the right. Users can sort the table alphabetically and reverse-alphabetically by city name and ascending or descending by the low temperature and the high temperature, as shown in Figure 3.

With the data from the screenshot, for example:● City Name A-Z: Chicago, Los Angeles, New York City.● City Name Z-A: New York City, Los Angeles, Chicago.● Temp. Low ASC: 10 (Chicago), 23 (New York City), 54 (Los Angeles)● Temp. Low DESC: 54 (Los Angeles), 23 (New York City), 10 (Chicago)

○ This is the screenshot shown in Figure 3.● Temp. High ASC: 30 (Chicago), 37 (New York City), 72 (Los Angeles)● Temp. High DESC: 72 (Los Angeles), 37 (New York City), 30 (Chicago)

When “Display All” is clicked from the home page, “All Cities” should be displayed above the table. When a search is selected, nothing should be displayed in that location since the name of the city is shown in the table. If no cities match the search, the table and sort drop down menu

Assignment #2CSCI 201 Spring 2019

should not be displayed, and instead display a message saying that no city matches the search. If only one city is returned, the sort drop down menu should not be displayed.

Clicking each city name should direct the user to the details page for that city. For example, if the user clicks on “Los Angeles,” you should direct the user to the details page for Los Angeles. However, if the user clicks on “54,” you should not redirect the user. In other words, only the city name parameter should redirect the user.

Assignment #2CSCI 201 Spring 2019

Figure 4 - Details Page (with images)

Figure 5 - Details Page (with info)

Details PageClicking on a city directs the user to that city’s respective details page. The top header bar functions the same as the one from the previous page.

Assignment #2CSCI 201 Spring 2019

When the page initially loads, there are eight icons that should be displayed along with a description of what each icon represents (see Figure 4). You can either arrange them into a table for easy styling or do some CSS magic. Clicking on the icon will replace the icon and instead display the information associated with it (Figure 5). Clicking on the displayed information will bring back the image. You can think of this as “flipping” the image.

You can display information in the following format, with an example of what is displayed in parentheses below:

● Location displays State, Country (CA, United States)● Temp Low displays low temperature in Fahrenheit (54 degrees Fahrenheit)● Temp High displays high temperature in Fahrenheit (72 degrees Fahrenheit)● Wind displays wind speed (8.4 miles/hour)● Humidity displays current humidity (35%)● Coordinates displays latitude, longitude (34.05, 118. 24)● Current Temp displays current temperature (68 degrees Fahrenheit)● Sunrise/sunset displays today’s sunrise time, today’s sunset time (7:02 am, 4:51 pm)

Image and Font InformationAll images for this project and the fonts are posted on the Assignments page. The font used for “WeatherMeister” in the top left corner is Savoye LET. The font for everything else comes from the Avenir Next collection.

Assignment #2CSCI 201 Spring 2019

Grading CriteriaThe output must match as close as possible to the screenshots provided above.

File Parsing (0.5%) 0.1% - index.jsp is the name of the first page0.2% - the weather.txt file in the WebContent directory is parsed0.1% - an error message is displayed if the file cannot be parsed0.1% - home page is displayed if file can be parsed

Home Page (0.8%) 0.5% - home page looks like the screenshot0.3% - toggling between city and location changes the form

Search Results Page (1.5%) 0.5% - search results page looks like the screenshot0.2% - displaying all cities shows proper data0.1% - sorting by city name in ascending and descending order works properly0.1% - sorting by high temperature in ascending and descending order works properly0.1% - sorting by low temperature in ascending and descending order works properly0.1% - searching for a specific city shows only that city’s data0.1% - clicking on city name (and not on temperatures) links to details page0.1% - “All Cities” displayed when “Display All” is clicked from home page0.1% - If no city matches search, the table and drop down menu are not shown, but an appropriate message is displayed.0.1% - If only one city matches search, “All Cities” is not shown and drop down menu is not shown.

Details Page (1.3%) 0.5% - details page looks like the screenshot0.8% - clicking each icon “flips” it to display appropriate data (0.1% for each)

Top Search Bar (0.4%)0.1% - top search bar displayed on search results and details pages0.1% - top search bar links to search results page when submitted0.1% - toggling between city and location changes the form0.1% - clicking Weathermeister will take the user back to the home page

Assignment #2CSCI 201 Spring 2019