Animation

[jugglinmike]

Now make the Mole respond in a slightly more interesting way.

• mole.js
  • Update the Mole's element to be initially invisible
  • Define an instance method on the Mole named show that makes the
    mole appear
  • Update the Mole's "click" event handler to hide the Mole again
• main.js
  • Call show on the Mole instance after you've inserted its element
    into the DOM

The Mole class now needs a custom function (sometimes called a "method").
Remember: a class is a "template" or "mold" for creating objects. This
means that we can attach the show method to the Mole class, and all the
moles we create will share it.

But I don't want to just give you the solution, so I'll update the "Car" class
from earlier:

function Car() {
  this.wheels = 4;
}

// The `Car` class has a property named "prototype". Anything we attach to that
// object will be defined on the `Car` instances
Car.prototype.beep = function() {
  // Inside an "instance method" like this one, `this` refers to the car
  // instance
  console.log('I am a car! I have ' + this.wheels + ' wheels! Beep beep!');
};

// Later, when we've created a `Car` instance...
var thirdCar = new Car();

// It has a "beep" method that we can call!
thirdCar.beep();