Birdspotter Client

Your bird-counting web service is fully operational. To make it usable, you want to create a client that is easy for your spotters to use. Each species will have a button for incrementing the count. There will also be a card for adding a new species. You mock up the following prototype in raw HTML and CSS:

Now it's time to build the real client, which must get its data from the web service. For the rest of these example code to work, you must run the bird-counting web service on your local machine out of port 5000. Reload this page once it's started up.

In a script, you make an initial call to fetch to grab all the species that have been spotted so far:

Pop up this page in its own window and examine the results in your browser's console. If you just started up the web service, you don't see any species because none have been added. Your next step is to allow the user to add a new species. You write a function addSpecies that grabs the species name from the text input, percent-encodes it, and issues a POST request when the add button is clicked:

Pop up this page in its own window and examine the results in your browser's console when you add a new species. What happens when you try to add the same species twice?

Try adding code to clear out the text input on a successful addition.

Once a species has been added, you wish to add a button to make the count easy to increment on future spottings. You add an addCard function that generates a button element and prepends it to the list of cards:

When the viewer clicks a card, you want to issue a PATCH request and update the count on the card, so you add a callback:

Try adding a species and clicking on its card. Does it increment the tally? Try adding a second second species. Do they both correctly increment?

The client is able to add and increment species. That's good progress. There remain a number of tasks to complete before deploying the client, however:

• There's no way to delete a species. Maybe you don't need that feature. If not, perhaps it shouldn't have an endpoint in the web service.
• You aren't showing any visible error messages. If a fetch fails because of a connection issue or because the request wasn't valid, the viewer has no idea what happened. The client needs some sort of message box or notification system for communicating these errors.
• The client doesn't acknowledge that other clients might exist. Cards are only added to a client when the client itself adds them. If a different spotter adds them, they don't automatically appear. A client's counts are similarly only updated when a species is incremented locally. You consider looking into web sockets to support live updates.

You promise to fix these issues tomorrow.