Adding dynamic behavior to our application
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">
</div>
<script src="setup.js"></script>
</body>
</html>Let's add some...
