Kaelin Panneton https://a2-kpanneton1.glitch.me/
This project shows a hold system for a library using a single HTML form and Javascript scripts. The user will input their name, email address, the title and author of the book they want to check out, along with the date for the day they submit the form. It will then print a message with their data to show that it has been received and added to the database, along with assigning them a number in the hold queue, which is priority assigned based on the earliest date. It uses various CSS styling elements on the header, table, and table outputs, such as highlighting when you scroll over which hold you would like to select from the database. There are CSS selectors for elements. IDs, and classes present. The table and other elements are positioned using a css inline-grid which maintains the elements positioning on the page. The font for the website's copy text is the Merriweather font from the Google Fonts website. Included is a server that hosts the webpage that sends and receives data from the server. For this webpage, the derived field is the queue system for placing a hold on a book, which is based on the data inputted by the user and the dates of other holds in the queue. I had problems assigning IDs to each row in the array, so I did it so each row will have a different identifier using Math.random().
- Tech Achievement 1: I created a single-page app that both provides a form for users to submit data and always shows the current state of the server-side data. When the user places a hold on a book it will display back to them the information they inputted, along with other holds that are currently in the system.
- Design Achievement 1: I conducted an evaluation with Kaley Du. Some problems they had with my design was that it could all be bigger to make it easier to read, which I think is a good note for accessability of the site. They liked the font I used and the overall design. They liked how everything is together and well organized. A comment they made that surprised me was that they liked how I used the Date format to display a calendar that pops up when you click it, which was a property of the HTML form I made. Another comment that surprised me was that they said the way they select which one to remove seems ambiguous, which I agree with now. Based on their feedback, I changed some of the display elements, mainly the size of the font and the table to make it eaiser to read. If I had more time, I would also try to improve how the user has to select one from the list and then click the remove button, perhaps make it clear that it is what needs to be done.
- Design Achievement 2: I conducted an evaluation with Serena Mower. Overall, they liked the design of the website such as the color scheme and table layout they thought was easy to understand. Some problems they had with my design was that it was a bit unclear how to remove a hold. Another problem they had with the design is that the queue system seemed a bit unclear in what it was doing to determine that, which is a problem with how the IDs are being stored in the database and was something I struggled with in my webpage design. A comment they made that surprised me was that they suggested there may be a way to have the date automatically filled using code, which I think may increase the user friendliness. Based on their feedback, I would change the way the ids for each row and hold are determined, maybe creating a seperate index for all the organized dates and creating a new array each time instead of modifying the existing one. Additionally, I would add a title at the top of the data input table in order to get rid of the awkward looking square underneath the input fields.