Note: This will be a pair programming activity. Select one computer to work on, and an initial driver and navigator.
You're about to write a lot of AJAX-backed JavaScript – using jQuery – that will complete our little Cat Rescue app.
Make use of the fantastic and altruistic https://ga-cat-rescue.herokuapp.com/api/cats. Your task is to use your JS skills to list out all the cats in our database and get our form working so we can add more.
- Implement a jQuery AJAX client for a simple REST service
- Build an application that uses AJAX to update a client
- Use form submission and AJAX to interact with an API on the web.
You'll find the same starter code you had in the last lesson in the starter-code
folder. It's a basic index and some styling, along with an empty js/jquery.app.js
.
Note: If you are having trouble getting started, look back at your work on the jQuery MadLib Lab.
Note: Remember what the
event.preventDefault();
line does? If not, check it out on Google. It is vital in this lab.
- Make a list of existing cats appear underneath the form.
- Make the form work (i.e. it will add a cat, and you can verify the cat was added by refreshing).
- Get your app to add to the list of cats without refreshing the page, using the information from the newly created cat.