Include a very brief summary of your project here. Be sure to include the CSS positioning technique you used, and any required instructions to use your application.
This application is used to store and manage data for food items. Items, along with their quantities, categories (fruit, vegetables, etc.), and expiration dates can be added to and removed from the data set. I used a CSS grid to display the data table. Instructions on how to enter and remove data are listed in the application itself.
- Tech Achievement 1: Through updates from the server whenever the client adds or removes a food, the client can see the resulting data at all times. As a result, both the form entry and results can be viewed in a single-page application.
- Design Achievement 1: I tested my user interface with another student in the class. I asked them to add a few specific foods, such as an "apple" of the category "fruit" with quantity 3, and expiration date a week from today. I also asked them to add a few more items of their choosing, and then remove all of the items. We used the think-aloud protocol to communicate how we were working with the application. Here are the results:
- Last name: Pai
- This student mentioned that typing the date manually in the form yyyy-mm-dd was annoying, and that perhaps a button could be used to set a date that is some number of weeks or days away. They also mentioned that the table view did not have clear borders.
- They mentioned that the percent of category quantity field was interesting, and could be applied in other ways to produce statistical data for things like diet management or sales.
- I have since updated the table to have more clear borders and background contrast. With more time, I would also add a button to set dates a certain number of weeks and days away, in addition to the manual date entry system.