Sockets - Kirsten

[kanderson38]

TREK

Congratulations! You're submitting your assignment!

Comprehension Questions

Question	Answer
What does it mean for code to be asynchronous?	It means that part of the code (e.g. a GET request) can start running, and the rest of the program will continue to run while the GET request is still being processed instead of waiting for the request to finish.
Describe a piece of your code that executes asynchronously. How did this affect the way you structured it?	The GET and POST requests are asynchronous; I put any code that needed to wait until the requests were finished before running inside the .then or .catch methods, so that code wouldn't run before it had the necessary response data.
What kind of errors might the API give you? How did you choose to handle them?	The GET requests might return 404 or 500 errors, and the POST requests could return 400 errors along with validation errors if form fields were left blank. I chose to have the 404 or 500 errors displayed as a warning message, and 400 errors were shown the same way along with any validation errors that were sent.
Suppose you needed to routinely find a specific Trip in the list by its ID field. Would it be advantageous to keep the list in order by the id field? Explain why or why not.	It seems like it would be bad practice to depend on the trips being sorted by ID. Even though it might be easy to refer to the trip ID by getting the index of the in which each trip is placed, there is no guarantee that the IDs will be consecutive or be indexed from 0 (they could start at 70, for instance). It's better to use a closure to send along the ID information for each trip when it is clicked.

[droberts-sea]

TREK

What We're Looking For

Feature	Feedback
Core Requirements
Git hygiene	mostly
Comprehension questions	yes
Functionality
Click a button to load and view a list of trips	yes
Clicking the "load" button twice does not cause each trip to display twice	yes
Click a trip to load and view trip details	yes
Clicking a different trip loads different details	yes
Fill out a form to reserve a spot	yes
Errors are reported to the user	yes
Site is clearly laid out and easy to navigate	yes
Under the Hood
Callback functions are not nested more than 2 levels deep	mostly - see inline
Callback functions are given descriptive names	yes
Code is generally well-organized and easy to read	yes
All API calls have both success and error callbacks defined	yes
Optional but recommended: closures are used to keep track of which trip is selected	yes
HTML is semantic	yes
CSS is DRY, uses CSS Grid, Flexbox, and/or Bootstrap	yes
Overall	Excellent job overall! This code is for the most part well-organized and easy to read, and it's clear the learning goals of this assignment were met. I especially appreciate the care you put into error handling. I've left a couple inline comments for you to review below, but in general I am quite happy with this submission. Keep up the hard work!

[droberts-sea]

Looks like your editor is set up to make 4-space tabs in JavaScript. At Ada we recommend 2-spaces, which will be important when you start working on pair projects. Please update this setting.

[droberts-sea]

Good use of a callback here to track the trip ID.

[droberts-sea]

The work being done here is complex enough that it might be worthwhile to break it out into its own function.

[droberts-sea]

Using a hidden HTML field feels like an appropriate way to track the trip ID here.

[droberts-sea]

When reserving a second trip, your site makes two POST requests. To reproduce:

1. Open page
2. Open chrome dev tools to the "Network" tab
3. Click See All Trips
4. Click on the first trip (Cairo to Zanzibar)
5. Make a reservation and submit
6. Click on the second trip (Everest Base Camp Trek)
7. Make a reservation and submit
8. Observe that on submit, 2 POST requests were made to trek API's /reservations endpoint

The reason for this is that you reuse the same reservation form for each trip, but re-attach the submit handler every time you show details for a trip.