Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Suggested practice exercises CHAPTER 3 133

document.getElementById('btn'+i)

.addEventListener('click', numberClick, false);

}

txtInput = document.getElementById('txtInput');

txtResult = document.getElementById('txtResult');

document.getElementById('btnPlus')

.addEventListener('click', plusClick, false);

document.getElementById('btnMinus')

.addEventListener('click', minusClick, false);

document.getElementById('btnClearEntry')

.addEventListener('click', clearEntry, false);

document.getElementById('btnClear').addEventListener('click', clear, false);

clear();

}

43. Press F5 to run the test, which should pass.
    Now that all tests pass, you are almost ready to run the application, but you need to
    add code to the default.html file to call the initialize function when the page is loaded.


44. Open the default.html file and add the following inline script block to the bottom of
    the element:
    


45. In the Solution Explorer window, set the default.html file as the startup file by right-
    clicking the default.html file. Click Set As Start Page.


46. Press F5 to start debugging. Try clicking the number buttons to enter a number and
    try the plus and minus buttons, while observing the results. Try clicking the clear entry
    button after you enter a number. Try clicking the clear button to see the input and
    result clear.

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 objects and events by adding more functionality to the

calculator. You might consider adding multiplication and division.

■■Exercise 2 Learn more about QUnit and TDD by adding more tests, and then add the

code to make the tests pass.

■■Exercise 3 Learn more about event bubbling by adding a <div> element that

encompasses the buttons, and then add a click event to the <div> element so that all

click events bubble to the <div> element.