Skip to content

Prep 9: Events, Asynchronicity and Later Gator

Textbook Reading

  • Web
    • 2.3 Uniform Resource Locators
    • 2.4 Hypertext Transfer Protocol
  • HTML/CSS
    • 7.1 Older Approaches to CSS Layout
  • JS
    • 10.3.0 Asynchronous Coding with JavaScript
    • 10.3.1 Fetching Data from a Web API
    • MDN: Working with JSON

🕐🐊 - Later Gator

We’ve begun the work of beginning event driven programming (a form of asynchronous programming) by adding event listeners such that certain code is invoked when other actions happened. Now we take it a step farther and start to build a bridge toward:

  1. Making HTTP Requests (and receiving their responses)
  2. Comparing and contrasting 3 different approaches to asynchronicity:
    1. Callbacks
    2. Promises
    3. async/await

Provided code

  1. Start by accepting the github classroom link form your instructor.
  2. There are several files in the repo github classroom creates for you for this assignment. You will do all of your work in main.js.

  3. The provided index.html already includes later.js and main.js, so when writing your code in main.js, you can rely on the following provided functions (which are already finished, and provided by later.js):

    You aren’t expected to read or understand later.js at this time

    Of course, you’re welcome to explore the source code, but for this activity, completely understanding the implementation of the 2 provided functions is out of scope, you simply need to use them.

    later(targetQuery, callback)
    finds a valediction that is appropriate for a targetQuery. It has two parameters:
    targetQuery
    to whom you’d like to offer an appropriate valediction (if it is a substring of a known target, the corresponding valediction will be provided, otherwise a random one will be selected)
    e.g. Hippos
    callback
    function that you want later to call with the valediction result when it’s ready. this function will be called with the following argument:
    result
    an object with the keys: target: to whom the result is intended to go valediction: what to say to the target
    options(callback, query)
    finds all known valediction targets or those that include the substring specified in query, if it’s provided. It has two parameters:
    callback
    function that you want options to call with the known valediction targets, when they’re ready. This function will be called with the following argument:
    keys
    an array of known valediction targets
    query
    a constraint on which valediction targets to include. Only those of which query is a substring will be included.

Part 1

Make a little web app that

  • has 2 user interface elements (these are actually provided):
    • a text <input> element
    • an <output> element
  • has a simple interaction of updating the <output> when the user presses enter on the <input>

See Part 1 in action 🎬 or continue down for specific steps:

Later Gator Part 1 Demo

  1. find the TODO items guiding you to the areas to start editing for Part 1.
  2. Update the event listener such that when the text input has focus and the user presses Enter:
    1. the text they’ve entered is used to search for a possible valediction
      1. use the provided later function
    2. that found valediction is displayed in the output element
      1. complete the setOutput function and use that.

Part 2

See Part 2 in action 🎬 to quickly understand the changes (instead of directly showing a message, show possible matches and then show the message when one is selected):

Later Gator Part 2 Demo

  1. Create a function called makeOptions :
    1. it has 1 parameter, an array of strings
    2. it removes any existing children of #available-targets
    3. for each string s in the parameter, it creates a list item and adds it to the #available-targets. This list item has 1 child element:
      1. a <button> with that string s as its content
  2. Modify the code you have for Part 1 such that the user’s input is no longer used immediately to search for a single result, but instead is used to find several possible valediction targets.
    1. use the provided options function.
  3. These matching targets are displayed as buttons
    1. use the makeOptions function you wrote
    2. when one of the buttons is clicked, the valediction target displayed on the button is used to query for the corresponding valediction (similar to what you had in Part 1, use the provided later function)
  4. finally this valediction is displayed in the output element (use your setOutput function).

Submit

Push your changes back to your github classroom repo and submit the main.js file to the corresponding gradescope submission.