Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Practice exercises CHAPTER 9 411

return hours + ':' + (minutes < 10? '0' + minutes : minutes);

}

27. Add code that executes when the document is ready.
    This code will subscribe to the click event of the btnShowMessage button and call the
    displayTimeAsync function, as follows.
    $(document).ready(function () {
    $('#btnShowMessage').click(displayTimeAsync);
    });


28. Press F5 to run the application. Click the Show Message button.
    You should see the animated cover that fades in, and then you should see the message
    window slide down from the top of the screen. The final screen is shown in Figure 9-2.

FIGURE 9-2 he screen after the animation stopsT

Notice that although the Show Message button is still visible, you can’t click it now

because the cover is over the button. Furthermore, the OK button isn’t programmed

to close the message window. When you click the OK button, the message window

should slide back up and disappear, and the cover should fade out. The Show Message

button should be clickable.

29. Stop running the application.


30. Add a hideMessageContentAsync function. In the function, add code to slide the mes-
    sageContent element up to the top of the screen. Assign the created promise to a new
    promise variable and add code to hide the messageBox element. Add code to return
    the promise, as follows.
    function hideMessageContentAsync(message) {
    var promise = $('#messageContent').slideUp(milliseconds).promise();
    promise.done(function () { $('#messageBox').hide(); });
    return promise;
    }