The project required the creation of a simple two-tier web application that enabled a client session to be opened that allowed for client-server communication
The particular website I created involves having students fillout a survey about a Disney Channel television show (phineas and ferb)
The data is not initially visible. Please select "view data" to open the relevant tables
A server will run that maintains the data delivered by the client in a JSON format
The server returns the entire dataset to the client upon request
Data can be added or removed from the dataset by either submitting data using the HTML form or by entering the UserID and clicking delete in the appropriate fields
The server maintains several derived fields that are displayed in the "Avg Phineas And Ferb Knowledge" meter and the accumulated majors table
Additionally, a UserID is attached to the data by the server before being integrated into the database
CSS selectors for the img, body, and main elements were implemented
the .majorCont, .checkmark, and several other classes were used for specific styling of main elements
the div[id="data"] was used to demonstrate use of ID selectors
Flex box was used for the majority of main elements
Google Font's Roboto was implemented for all text content
CSS for the site was primarily defined in css/style.css
JS code was implemented in the index.htlm and server.imporved.js files
The site deploys a single page app to both submit and view the data transmitted to the server.
For the design requirements:
Zhang:
they did not have any significant problems with the functional design of the site. They did note that the aesthetics left something to be desired and that it was overall bland.
Based on Zhang's feedback, I would significantly overhaul the CSS of the page to provide a more modern feel or at least a less in-complete feel
Nguyen:
Once again, they did not have any issues navigating the site. They mentioned that more graphics to represent the data would be more helpful for visualizing the results. Additionally, they enjoyed the Doofenshmirtz easter egg embedded in the site. They made similiar comments as Zhang about the apparent lack of aesthetic appeal
Based on this feedback, the overall visual design is definitely not complete and needs to be re-evaluated. I'm glad to know that the easter egg was noticed and enjoyable without being too obnoxious.
The HTML form holds the necessary input fields and controls to select and submit the data
The data is displayed in table that is generated by the JS script associated with the page (see the function: displayData)
The index.htlm was vaildated at https://validator.w3.org/#validate_by_upload