Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Suggested practice exercises CHAPTER 6 307

equal($('#txtInput').val(), expected, 'Expected value: ' + expected +

' Actual value: ' + $('#txtInput').val());

});

31. Modify the Clear Entry Test to use jQuery. Run the test to see it pass.
    Your code should look like the following.
    test("Clear Entry Test", function () {
    expect(1);
    $('#txtInput').val('10');
    $('#btnClearEntry').triggerHandler('click');
    var expected = '0';
    equal($('#txtInput').val(), expected, 'Expected value: ' + expected +
    ' Actual value: ' + $('#txtInput').val());
    });


32. Modify the Clear Test to use jQuery. Run the test to see it pass.
    Your code should look like the following.
    test("Clear Test", function () {
    expect(2);
    $('#txtInput').val('10');
    $('#txtResult').val('20');
    $('#btnClear').triggerHandler('click');
    var expected = '0';
    equal($('#txtInput').val(), expected, 'Expected value: ' + expected +
    ' Actual value: ' + $('#txtInput').val());
    equal($('#txtResult').val(), expected, 'Expected value: ' + expected +
    ' Actual value: ' + $('#txtResult').val());
    });
    At this point, you should be able to run all the tests, and they should all pass.


33. Right-click the default.html file and choose Set As Start Page. To see that your calcula-
    tor still works, press F5 to start debugging the application.


34. Try entering data and clicking the plus and minus signs.
    You might need to refresh your screen, but the calculator should be working.

Suggested practice exercises

The following additional exercises are designed to give you more opportunities to practice

what you’ve learned and to help you successfully master the lessons presented in this chapter.

■■Exercise 1 Learn more about JavaScript objects by adding more features to the cal-

culator that you created in the practice exercise.

■■Exercise 2 Learn more about jQuery by exploring the jQuery site at

http://jQuery.com.