Jacquelyn Lopez

Glitch Link: https://a2-jlopez-codes.glitch.me

Art Museum Appointment Website

I created a museum website where you can make appointments to visit the museum. In this application a user can enter their Student ID #, their name, and the date/time of their appointment visiting day. After they submit their appointment, it will show up in the table right below. Other than adding an appointment to the table, they can also modify and delete their appointments. To edit their appointment, they have to click the "edit" button and it will show up in the form where they originally submitted their appointment. Once it is edited, hitting the submit button will update the table. To delete an appointment, all you have to do is click the delete button.

---

HTML:

• Added a HTML form for users to sign up for appointments
• The "results page" is really just the table displaying the data from the server.
• Page validates

---

For the CSS rules I added:

• javascript animation of a blinking color background
• fonts
• italics
• design shapes like circles
• headers
• paragraph
• images
• lists
• links
• buttons
• table / table header / table cells

---

CSS: Element selectors

• headers
• paragraphs
• title
• selector lists

ID selectors:

• Created a title selector to align left

Class selectors: I created multiple class selectors to add:

• circles
• colors to buttons and other designs
• blinking background

---

JavaScript:

• Create a server to fetch data from the form
• The data is displayed in a table where the user can see
• Programmed multiple buttons to submit/edit/delete form

---

Technical Achievements

• Tech Achievement:
• Created a single page website
• Added a form for users to submit data
• Data from the form is always displayed and shows the current state of server-side data
• You can submit/modify/delete a form
• A client that updates its data display

Design/Evaluation Achievements

Using the "think-aloud protocol" I asked my users to submit, edit, and delete an appointment. The following are the results:

• First User:

1. Sorpol
2. This user had trouble modifying their appointment date. They didn't realize it popped up again where you insert information.
3. Some comments they made was to implement a pop-up that says you have either successfully submitted or deleted an appointment. They said this would make it more clear for the user. They also commented that maybe limited the time and dates on the calendar drop down will make it a more realistic experience because museums have limited times and dates.
4. I would definetly add a pop up screen because i think it will be clear for the user to know when they have submitted or deleted an appointment. I would also make the modify element different. I would make it a seperate box rather than just editing it where you originally make the appointment.

• Second User:

1. Gopalan
2. This user had trouble modifying their appointment. They were also confused about the directions and what to do.
3. Some comments they made was there was no clear instructions on what to do. I was shocked by this because my overall goal of this website was to create a "real" experience of what booking an appointment at museum will look like. I can agree the website requires a little bit more of reading and it's not straight-forward.
4. I would probably make the website more straightforward. And as previously stated from the first user. I will make the modifying button more simpler.