Count down dialog

[jugglinmike]

The beginning is a little abrupt, isn't it? The spec calls for a "countdown"
screen to give the user a chance to prepare themselves after clicking "begin".
Let's build that.

• director.js

  • Define a method called countdown on the Director prototype

  • In the countdown method, set the innerHTML of the el to contain
    (at least) the following markup:

    'Game beginning in '

    Feel free to embellish with extra markup and style!

  • Grab that span element (just like you did with the <button> element
    in the previous exercise) and store it in a variable called countdownEl.

  • Define a local variable called timeLeft and initialize it to be the
    number of seconds the timer should start at.

  • Define an update function inside the countDown method (yup, a
    function inside a method). This should do the following:

    1. Decrement (decrease by 1) the timeLeft variable

    2. If the timeLeft variable is 0, call the Director's start method
       and return.

    3. Update the innerHTML of the countdownEl to:

       `timeLeft + ' second(s)'

    4. Use setTimeout to call update again in 1 second (remember,
       setTimeout expects millisecond values!)

That last part is a little tricky--the update method calls itself! In
programming, we say that a function that calls itself is "recursive".

Anyway, the timer is okay, but the whole "second(s)" thing is a little cheap.
Can you update it so that it says "Game beginning in 2 seconds" and then "Game
beginning in 1 second"?