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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial