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"> ...

Get CoffeeScript Application Development now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.