<section>
<?= t_head("Load Skeleton File", "5") ?>
<p>Download the following skeleton:</p>
<p class="resource"><a href="minilab7.html">minilab7.html</a></p>
<p>It contains a div absolutely positioned in the center of the screen. You’ll be making this div “run away” from the cursor whenever the mouse hovers over it.</p>
<p>Create a JavaScript file, <samp>minilab7.js</samp>, and ensure it’s properly attached.</p>
</section>
<section>
<?= t_head("Run Away!", "10–15") ?>
<p>Make the div change its <code>top</code> and <code>left</code> properties to random locations on the screen when the mouse hovers over it.</p>
<p class="note">You can get the width and height of the window using <code>window.innerWidth</code> and <code>window.innerHeight</code> respectively.</p>
</section>
<section>
<?= t_head("Animate Transition", "10–15") ?>
<p>Now make the div animate any changes to its <code>left</code> and <code>top</code> properties. Use the CSS3 <code>transform</code> property.</p>
<p>Create and attach your <samp>minilab7.css</samp> file. Ensure it’s properly attached by setting something obvious before proceeding.</p>
<p>You’ll want to make the transition slow enough that it’s possible to “catch” the div by clicking on it.</p>
<p class="note important">Remember to use the proper browser prefix for your browser!</p>
</section>
<section>
<?= t_head("Caught!", "10") ?>
<p>Now attach a click handler to the div which causes a class of <code>caught</code> to be attached to <samp>catchme</samp>. In your CSS, make this class cause it to rotate more than two full turns (> 720°). Then make it animate that rotation.</p>
</section>
<footer>
<p>If you’ve finished everything, good job! Try experimenting with keyboard events in text input elements.</p>
</footer>