O'Reilly logo

CoffeeScript Application Development by Ian Young

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required