Simple Web App

This is a thick-client solution; all elements fit in one dynamic HTML page. The purpose is for a user to select several items from one list and apply a single method selected from a second list. When the user clicks “Submit,?? the input elements disappear or are covered by an animating “Processing?? window. After a few seconds, the “Processing?? window closes and reveals the “Output?? pane. The “Output?? pane shows the user the result of his selections. You will use dummy data pulled from a MySQL database to populate the lists and generate the output. ## Deliverables **Analyze** **Description** This is a thick-client solution; all elements fit in one dynamic HTML page. The purpose is for a user to select several items from one list and apply a single method selected from a second list. When the user clicks “Submit,?? the input elements disappear or are covered by an animating “Processing?? window. After a few seconds, the “Processing?? window closes and reveals the “Output?? pane. The “Output?? pane shows the user the result of his selections. **Flow** Start --> Input item(s) and Methods? --> Processing... --> Output **Features** Feature 1 - Input Item(s) and Method Description: This feature presents 2 lists and 2 buttons. The user must be able to select between 1 and n “Items?? from list 1. The user must be able to select exactly 1 “Method?? from list 2. The “Reset?? button clears the selections in Javascript without reloading the page. The “Submit?? button captures the selections and sends them to the server using AJAX (XMLHTTPRequest). Functionality: * User must be able to select 1 or more items from the “Items?? list. * User must be able to select exactly 1 “method?? from “Methods?? list. * User must be able to clear the form by pressing the “Reset?? button. * User must be able to send the selections to the server by pressing the “Submit?? button. * The “Items?? list must be dynamically populated by reading the “Items?? table in the MySQL database. * The “Methods?? list must be dynamically populated by reading the “Methods?? table in the MySQL database. Feature 2 - Processing Description: This is an intermediate feature that displays for 3 to 5 seconds after Feature 1’s “Submit?? button is pressed. This feature displays an updating animation. When this feature has completed, this feature is hidden and the “Output?? feature displays. * Feature displays for 3-5 seconds. * Feature animates from “Processing .?? to “Processing . . “ to “Processing . . .?? and back, continuously until 3-5 seconds is complete. Animation should be quick. - When the time has expired, the Output feature is loaded. Feature 3 - Output Description: This feature displays the output of the web app. For each “Item?? selected in Feature 1 there shall be a corresponding “Card?? displayed in the Output feature. These must be arranged in an obvious and easily-accessible manner. Please avoid clutter where possible. Each “Card?? on the Output feature must be clearly labeled with the name of the Item from Feature 1 that it is associated with. Each “Card?? must display 10 distinct double-precision values in the range [0, 100], arranged in rows; these values must be pulled from the database. Nothing should be hard-coded. **Deliverables** * 1 HTML file containing the functionality described above * All Javascript libraries used in the project * 1 SQL file to reconstruct the database used for development * The project files for the development environment used, if any. * The source code used to generate any HTML, PHP, Javascript, XML, or SQL. * Any CSS stylesheets used. - Any XML schemas used **Compatibility Requirements ** * Must use Javascript. * Must be compatible with MySQL Distribution 5.0 * May use PHP. If PHP is used, it must be compatible with PHP 5.2.1 * Must use dynamic HTML * May use Google Web Toolkit **Style Requirements** * Each page element must be customizable using CSS. * Use a default CSS stylesheet for development. **Additional Requirements ** * Nothing should be hard-coded. All elements must be derived from MySQL table entries.