<section>
<?= t_head("Attach Unobtrusive Event Handler", "5–10") ?>
<p>Download the following skeleton:</p>
<p class="resource"><a href="minilab6.html">minilab6.html</a></p>
<p>It contains the following elements:</p>
<ul>
<li>a text-input element</li>
<li>a button to click on</li>
</ul>
<p>You will use these elements to create a countdown timer.</p>
<ol>
<li>
<p>First create your <samp>minilab6.js</samp> file and ensure it is linked properly by placing <strong>only</strong> an <code>alert</code> statement at the <strong>top of the file</strong>.</p>
<p class="important note">If the <code>alert</code> statement doesn’t execute when you refresh the page, your JavaScript file is not being properly loaded.</p>
</li>
<!-- <li>Give the two UI controls <code>id</code>s.</li> -->
<li>Add a <code>.ready()</code> event handler to your JavaScript file to be run when the page is ready. From within it, attach a <code>.click()</code> event handler to the <code>begin</code> button.</li>
<li>Make your event handler function <code>alert</code> a test message.</li>
</ol>
</section>
<section>
<?= t_head("Count Down By One", "5–10") ?>
<p>Now make your click event handler fetch, change, and replace the value in the text input area.</p>
<ol>
<li>Get whatever value was entered into the text input area, and parse it as an integer. (You can assume it will parse validly.)</li>
<li>Decrement that value by one, and put it back into the text field.</li>
<li>Move this process of counting down by one into a separate function (called, for example, <code>countDownByOne</code>) and call it from your click event handler.</li>
</ol>
</section>
<section>
<?= t_head("Count Down Continuously", "5") ?>
<p>Now set up an interval timer (using <code>setInterval</code>) to call your <code>countDownByOne</code> function every second (= 1000 ms).</p>
</section>
<section>
<?= t_head("Stop at Zero", "5–10") ?>
<p>Currently your countdown timer does not stop, and will continue to count down even when it reaches negative numbers. Modify your code so that you can stop the interval timer from continuing when it reaches zero.</p>
<ul>
<li>Save the unique identifier returned by <code>setInterval</code> in a global variable.</li>
<li>In your <code>countDownByOne</code> function, test to see whether you should continue counting down, and if not, clear the interval timer to prevent it from calling <code>countDownByOne</code> again.</li>
</ul>
</section>
<section>
<?= t_head("Inject Rects", "5–10") ?>
<p>Modify your <code>countDownByOne</code> function to create a new rectangle every time it’s called, and inject it at a random location on the screen.</p>
<ul>
<li>Since each rect is 50 pixels square, the range of <code>top</code> will be 0 to <code>window.innerHeight - 50</code>; the range of <code>left</code> will be 0 to <code>window.innerWidth - 50</code>.</li>
<li>Make each rect have a random background color.</li>
<li>Make each rect remove itself when clicked.</li>
</ul>
</section>
<footer>
<p>If you’ve finished everything, good job! Try modifying your code so that the rate at which it counts down is variable.</p>
</footer>