Skip to content

Prep 7: Flexbox and Intro to Fetching

This is a lighter prep: reading and two short activities: one for CSS Flexbox and one for making HTTP requests with Hoppscotch.

Reading

Flexbox Froggy 🐸

  1. Keep the CSS Flexbox Layout Guide open for reference.

    • Like the Grid guide, this is a handy page to return to whenever you use flexbox.

  2. Complete levels 1–13 of Flexbox Froggy.

    • This is a modified version of the original that can export your progress.
    • You may complete the remaining levels if you want, but only levels 1–13 are required for this prep.

  3. Once completed, open the menu and click “Export Progress”.

    • This will download a flexbox-froggy-progress.json file.

Hoppscotch: Try Requests Without Code

Before writing fetch() code, let’s see requests and responses up close with Hoppscotch, a browser-based API client. We’ll learn how to parse the documentation for an API, find the endpoint and parameters, and send requests to see the responses.

  1. Install the Hoppscotch Browser Extension (Chrome, Firefox, or Edge), then open hoppscotch.io.

    • The extension lets Hoppscotch get around “CORS” restrictions (we’ll talk about this later). If a request gives a “Network Error”, set the Interceptor to “Browser Extension”.
    • Take a look at the interface. You’ll see a selector for the HTTP method, a URL field, tabs for Params, Headers, and Body.
    • All of your requests will need a method and a URL (sometimes parameters, headers, or a body). The docs for each API will tell you what to use.

Docs first, then Hoppscotch

For each request below, read the API’s documentation first. Real-world API work is always: read the docs, find the endpoint, then make the request that the docs describe. Each step tells you what to look for in the docs and where it goes in Hoppscotch.

  1. 🐕 GET: read the dog.ceo docs for a single random image.

    • This documentation is very barebones (perfect for dogs), but it’s an example of some APIs that don’t have a lot of extra explanation.
      • The docs show you the endpoint URL (https://dog.ceo/api/breeds/image/random), and an example response (JSON with a message property containing the image URL).
      • If it’s an API whose sole purpose is to serve data, you’d assume that the method is GET, if the docs don’t say.
    • In the docs, find the endpoint URL and the example response.
    • In Hoppscotch: choose the GET method, paste that endpoint URL into the URL field, and click Send.
    • Compare your response (body, status code, headers) with the example response in the docs. What’s the same? What’s different?
    • Send it again. What changes?
    Solution
    • Method GET, URL https://dog.ceo/api/breeds/image/random.
    • Status 200 OK, and the body is JSON like the docs’ example: {"message": "https://images.dog.ceo/breeds/.../....jpg", "status": "success"}.
    • Only the image URL in message changes between sends. The status and structure stay the same.

  2. 👴 Query parameters: read the agify.io documentation.

    • In the docs, find the parameter (name) and how to send several names at once (name[]).
    • In Hoppscotch: GET https://api.agify.io and, in the Parameters tab, add a name key with your first name as the value. Notice how Hoppscotch adds ?name=... to the URL.
    • Now follow the docs for multiple names: add more parameters (using the key the docs specify). How does the URL change?
    Solution
    • One name: GET https://api.agify.io?name=Ada returns an object like {"count": 20779, "name": "ada", "age": 46}.
    • Several names: add parameters with the key name[] (once per name). The URL becomes https://api.agify.io?name[]=Ada&name[]=Grace, and the response is now an array of objects, one per name.
    • Parameters are joined to the URL after ? as key=value, separated by &.

  3. 📬 POST: open the JSONPlaceholder guide, and navigate to its “Create” tab.

    • This is an example of an API doc that shows you the fetch() code to write. Let’s learn how to read it first, then we’ll try the request in Hoppscotch.
    • In the docs for Create, find the method, the URL, the headers, and the body the request needs (see the fetch example’s method, body, and headers).

    • In Hoppscotch: use the method and URL you found in the docs, then in the Body tab choose application/json and send:

      {"title": "hello", "body": "my first POST", "userId": 1}

    • Check the Headers tab: where is the Content-Type the docs mention?

    • Look at the response. What status code did the server return, and what does that code mean? (Look it up in MDN’s status codes if needed.)
    • Compare the response body to the body you sent. What field is in the response that you didn’t send? Where did it come from?
    • Compare your response to the example output in the docs. Do they match?
    Solution
    • Method POST, URL https://jsonplaceholder.typicode.com/posts, body type application/json with the JSON above.
    • Hoppscotch adds the header Content-Type: application/json for you when you pick that body type (see the Headers tab).
    • Status 201 Created. The response echoes your title, body, and userId plus a new id (101) assigned by the server. (JSONPlaceholder fakes the creation, so the post isn’t really saved.)

  4. 🚨 Errors: the same JSONPlaceholder guide shows how to get one post by id (“Getting a resource”, /posts/1).

    • In Hoppscotch: GET https://jsonplaceholder.typicode.com/posts/1, then change the id to 99999.
    • What status code do you get for the post that doesn’t exist? Use MDN’s status code list to look it up.
    Solution
    • /posts/1 returns 200 OK with a post object. /posts/99999 returns 404 Not Found with an empty object {}.

  5. Open the Generate code option (the </> icon) for one of your requests and choose JavaScript Fetch. Compare the generated code with your request settings. You’ll write code like this in a later prep.

  6. Take a screenshot of Hoppscotch showing your successful POST request and its response.

Submission

Upload your flexbox-froggy-progress.json file and your Hoppscotch screenshot to the corresponding Gradescope assignments.