<section id="introduction">
<h3>Introduction</h3>
<p>Today you’ll write a page where the user can type text into a box, and by clicking on UI controls, the user can “pimp out” the text by giving it fun styling.</p>
</section>
<section>
<?= t_head("Load JavaScript File", "5") ?>
<p>Download the following skeleton file:</p>
<p class="resource"><a href="pimpmytext.html">pimpmytext.html</a></p>
<p>This skeleton contains a basic HTML shell and page header. It already links to a CSS file <samp>pimpmytext.css</samp> that defines all the styles you need. (You do not have to write any CSS code today.)</p>
<p>First create your <samp>pimpmytext.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. Ask a friend or your TA for help!</p>
</section>
<section>
<?= t_head("Create UI Elements", "5–10") ?>
<figure class="example">
<a href="images/output1.png">
<img src="images/output1.png" alt="Output with UI controls added" />
<figcaption>Your page should look like this when you are done.</figcaption>
</a>
</figure>
<p>First you’ll add some UI controls to <samp>pimpmytext.html</samp>.</p>
<p>The skeleton file contains some new HTML tags we haven’t seen yet in lecture: <code>fieldset</code> and <code>legend</code>. These are for grouping together and labeling a set of form controls.</p>
<p>You’ll put your new UI elements inside the two <code>fieldset</code> elements on the page. Add HTML code for the following:</p>
<ul>
<li>
<p>A field for users to enter large amounts of text on multiple lines.</p>
<ul>
<li>It should be 4 rows by 30 columns in size.</li>
<li>Put this inside the first <code>fieldset</code>.</li>
</ul>
</li>
<li>
<p>Inside the second <code>fieldset</code> labeled “Pimpification," add the following controls:</p>
<ul>
<li>A button labeled <samp>Bigger Pimpin’!</samp></li>
<li>A checkbox labeled <samp>Bling</samp></li>
</ul>
</li>
</ul>
</section>
<section>
<?= t_head("Attach Event Handler", "5") ?>
<p>Now, attach an <code>onclick</code> event handler to the Bigger Pimpin’ button:</p>
<ol>
<li>Create a new function in your JavaScript file, and make the <code>onclick</code> event handler call that function.</li>
<li>Make your function <code>alert</code> a simple message such as “<samp>Hello World!</samp>”.</li>
</ol>
</section>
<section>
<?= t_head("Bigger Pimpin’ Button", "5–10") ?>
<figure class="example" style="margin-top: -3em">
<a href="images/output2.png">
<img src="images/output2.png" alt="Output after exercise 1" />
<figcaption>Your page should look like this after the Bigger Pimpin’ button is clicked.</figcaption>
</a>
</figure>
<p>Modify your event handler function so that when the user clicks “Bigger Pimpin’!”, the text in the text area will get larger.</p>
<p>Instead of <code>alert</code>ing, your function should now change the font size of the text area to be <code>24pt</code>.</p>
</section>
<section>
<?= t_head("Bling Checkbox", "10–15") ?>
<figure class="example" style="margin-top: 5em;">
<a href="images/output3.png">
<img src="images/output3.png" alt="Output with the Bling checkbox selected" />
<figcaption>Your page should look like this when the Bling checkbox is selected (and after the Bigger Pimpin’ button is clicked). The green text should blink in Firefox.</figcaption>
</a>
</figure>
<p>Add an event handler so that when the user checks “Bling”, the text area will receive some styles.</p>
<ol>
<li>Add an <code>onchange</code> event handler on the checkbox. Make this calls a function that pops up an <code>alert</code> to verify that it works.</li>
<li>
<p>Modify your new function to set the text area’s font weight to <strong>bold</strong>.</p>
<ul>
<li>You can see if a checkbox is checked by examining its <code>checked</code> property. (To examine the checkbox, give it an <code>id</code> and fetch it as a JavaScript object using <code>document.getElementById()</code>.)</li>
<li>When the box is unchecked, the font weight should go back to normal.</li>
</ul>
</li>
<li>
<p>Once the bold part works, add the following styles to the text when the box is checked:</p>
<ul>
<li>change its color to green</li>
<li>underline the text (this is the CSS <code>text-decoration</code> property)</li>
<li>make the text blink (this is <em>also</em> the CSS <code>text-decoration</code> property)</li>
</ul>
</li>
</ol>
</section>
<section>
<?= t_head("Snoopify", "10", array('extra' => true)) ?>
<figure class="example" style="margin-top: -2em;">
<a href="images/output4.png">
<img src="images/output4.png" alt="Output after Snoopify button clicked" />
<figcaption>Your page should look like this after the Snoopify button is clicked.</figcaption>
</a>
</figure>
<ol>
<li>Add a new button to the Pimpification fieldset with the label “Snoopify” that, when clicked, converts the text in the text area to ALL CAPS.</li>
<li>
<p>Modify your button so that it also adds a suffix of “<code style="white-space: nowrap">-izzle</code>” to the last word of each sentence.</p>
<ul>
<li>Let’s consider a sentence to be a string of text that ends with a period character, “<code>.</code>”.</li>
<li>
<p>Use the String/array methods <code>split</code> and <code>join</code>. For example, to replace spaces with underscores:</p>
<pre><code>var str = "How are you?";
var parts = str.split(" "); // ["How", "are", "you?"]
str = parts.join("_"); // "How_are_you?"</code></pre>
</li>
</ul>
</li>
</ol>
</section>
<section>
<?= t_head("More Gangsta: Advanced Tweaks", "10–15", array('extra' => true)) ?>
<p>If you finish all previous exercises, try adding any of the following:</p>
<ul>
<li>
<p>When “Bling” is checked, also set the page to have a background image:</p>
<p class="resource"><samp><a href="http://info343.ischool.uw.edu/labs/3/hundred-dollar-bill.jpg">http://info343.ischool.uw.edu/labs/3/hundred-dollar-bill.jpg</a></samp></p>
</li>
<li>
<p>Add an “Igpay Atinlay” button that converts the text to Pig Latin. The rules:</p>
<ol>
<li>Words beginning in a consonant (or consonant cluster) have that consonant (or consonant cluster) moved to the end and <em>-ay</em> tacked on following.</li>
<li>Words beginning in a vowel simply have <em>-ay</em> tacked on the end.</li>
</ol>
</li>
<li>
<p>Add a “Malkovitch” button that causes words of ≥ 5 characters in length to be replaced with the word “Malkovich”.</p>
<p>(Inspired by <a class="popup" href="http://lfw.org/jminc/index.html">Malkovitch Mediator</a> by Ka-Ping Yee, in turn by the film <a href="http://www.youtube.com/watch?v=Q6Fuxkinhug">Being John Malkovitch</a>)</p>
</li>
</ul>
</section>
<footer>
<p>If you’ve finished everything, good job! Explore pimping your page with even more drastic style changes.</p>
</footer>