Now that we know how to define functions in CoffeeScript, we can add extra functionality to our application while keeping our code clean, modular, and easy to understand. The first change we will implement is to make the list clickable. When a customer clicks on a pet, they'll see a short description of the animal.
We'll add a container to
index.html to hold the currently selected pet's description:
<!DOCTYPE html> <html> <head> <title>The Pet Shop</title> </head> <body> <h1>Welcome to <span id="owner_name"></span>'s Pet Shop</h1> <p>We have some lovely pets available for the right owner to take home today. Please have a look at our selection.</p> <ul id="available_pets"> </ul> <div id="pet_information"> ...