Lab 8: Interacting with the Network
In this lab, you will be continuing to learn about how to interact with servers. In part 1, you will be learning how to extract information about browser requests and responses using the developer tools. In part 2, you will have a chance to build the first part of your final project. This will give you a chance to work with multiple different types of operations on APIs
Part 1: Using the Developer Tools' Network Tab
Please use the Network tab in the Developer Tools to answer the following questions. Please check the "Disable cache" box before answering these questions. It should help you get more consistent results.
- When you browse to https://rk0.xyz/courses, how many requests does the page make on its own (before you start interacting with things)?
- What is the domain name of the server(s) where the fonts are located?
- What other domain names are requested?
- When you create a new note on the https://spy-notes.rk0.xyz sample app, what kind of fields does it respond with?
- What server software is being used to handle the note creation request? Hint: Look at the response headers
Part 2: Note Taking Prototype
For this part of the lab, please create a single web page that allows users to take notes using the same API from the final project. A user should be able to:
- Create notes that have at least a title and some content
- Delete notes that they have previously created
- Load the user's currently saved notes and display them when the user loads the page
The user interface can look however you want. You should probably at least have an input element for the note's title, a textarea for the note's content, and some button / element for the user to interact with to save/delete the note. Notes must persist across page refreshes (using the server API below will store them on the server)
You can use the following types of requests to perform the above actions (assuming a user with an ID of abc-123):
- A POST request to this URL creates a new note
- You'll also need to pass the
- This will delete a note given a user ID and a note ID
- Assumes there is already an existing note with an ID of
- You don't need to pass a request body or any headers
- This will fetch all the notes for the given user ID (abc-123)
For all of this to work, you will need to create a user. To do that, you should make the following request:
- No request body is needed
- No headers are needed
To build this user, you can build a small UI for user registration. Alternatively, you can manually make this call and keep track of your user ID.
Since your final project will include mulitple pages, I suggest storing the user ID in the query string of your page. If you are using Live Server, that will look like you requesting
location variable on MDN for an example of how to do that.
I am not too picky about the appearance of your site. I am more concerned that it meets all of the requirements listed above and behaves properly.
The main things I am looking for in this lab are:
- Are the answers to part 1 correct?
- Can users create new notes?
- Can they view them later? Is the data persistent?
- Can they delete their notes?