<section id="introduction">
<h3>Introduction</h3>
<figure>
<a href="output/lab6_output.png">
<img src="output/lab6_output.png" alt="Screenshot of Pet-It" />
<figcaption>Pet-It™.</figcaption>
</a>
</figure>
<p>This lab practices Ajax using jQuery. For it we will write a page “Pet-It” that loads and displays information about breeds of cats and dogs using Ajax.</p>
</section>
<section>
<?= t_head('Download Files', 5) ?>
<p>The HTML and CSS are already written; start from the following skeleton files:</p>
<p class="resource"><a href="pet-it.html">pet-it.html</a></p>
<p class="resource"><a href="pet-it.js">pet-it.js</a></p>
<p>You will add the JavaScript event-handling and Ajax code. All ancillary files (images, HTML snippets, etc.) are in the following ZIP archive:</p>
<p class="resource"><a href="pet-it.zip">pet-it.zip</a></p>
<p>Downlaod these and keep them in the same directory as your <samp>pet-it.html</samp> and <samp>pet-it.js</samp> files.</p>
</section>
<section>
<?= t_head('Load Lists of Breeds', '10–15') ?>
<p>First, make it so that when the user selects “Dog” or “Cat,” a bulleted list of all breeds for that species is shown.</p>
<p>Lists of breeds are stored in the files named <samp>dogs.txt</samp> and <samp>cats.txt</samp>. Load these files from the server using the jQuery <code>$.ajax()</code> function (or equivalent) to make Ajax requests.</p>
<p>Note that the “Dog” and “Cat” radio buttons each have a useful <code>id</code>.</p>
<p>Process these files as you did in Mini-lab 10. You can use the built-in <code>.split()</code> function of strings to split on newlines:</p>
<pre><code>var <var>array</var> = <var>string</var>.split("\\n");</code></pre>
<p>Then iterate over the elements of the array and create <code>li</code> elements to add to the <code>ul</code> already inside the <code>#breeds</code> aside.</p>
<p>Don’t forget to clear the list first! Otherwise you’ll add to the previous list.</p>
</section>
<section>
<?= t_head('Show First Breed Info', '15–20') ?>
<p>Now when the user selects “Dog” or “Cat,” modify your code so that the image and info about the first breed are also shown.</p>
<p>Each breed has an HTML and JPG file inside the <samp>breeds</samp> folder; for example, Chow Chow has <samp>breeds/chow_chow.html</samp> and <samp>breeds/chow_chow.jpg</samp>.</p>
<p>In order to get the filename, you should use the string’s <a href="http://www.w3schools.com/jsref/jsref_tolowercase.asp"><code>.toLowerCase()</code></a> and <a href="http://www.w3schools.com/jsref/jsref_replace.asp"><code>.replace()</code></a> methods to convert the breed name to lowercase and replace spaces with underscores.</p>
<p>You do not need to remove the image and add another; simply update the <code>src</code> and <code>alt</code> attributes of <code>#pet</code>. Each HTML snippet should be injected directly into the <code>description</code> div.</p>
</section>
<section>
<?= t_head('Advance to Next Breed', '15−20') ?>
<p>Now make your page advance to the next breed when the user clicks “Next”. Also, highlight the current breed in the list of breeds by giving its list item the class <code>selected</code>. If the user reaches the last breed and clicks Next, wrap around to the start.</p>
<p>To do this you should add a global variable containing a list of breeds, and another to keep track of the current index in that list.</p>
<p>Don’t forget to “wrap around” to the beginning!</p>
</section>
<section>
<?= t_head('More Features', '10–15', array('extra' => true)) ?>
<!-- <figure class="example" style="margin-top: 4em">
<img src="output/lab5_navigation_link.png" alt="The rightward navigation link" />
<figcaption>The rightward navigation link.</figcaption>
</figure> -->
<p>If you finish all of the previous features, make it so that you can click any breed in the list to jump to info about that breed. Or make a “Previous” area (much like “Next”) that allows the user to go back to the last breed.</p>
</section>
<footer>
<p>If you’ve finished everything, good job!</p>
</footer>