,

Lab :

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.

Valid HTML5 Valid CSS

Basic lab instructions

Today's lab

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 funny styling.

The HTML page pimpmytext.html contains a basic HTML shell and page header. This skeleton already links to a CSS file pimpmytext.css that defines all the styles you need. You do not have to write any CSS code today.

You will write a JavaScript file pimpmytext.js that will manipulate the text.

Download the HTML file below (right-click, Save Target As...) to get started:

Exercise : Create UI Elements (~15 min)

(See example screenshot on next slide.)

The first task is to expand pimpmytext.html by adding UI controls. Add HTML code for the following:

Exercise , output

Your page should look like this:

expected output

Exercise : JavaScript alert (~5 min)

Now you'll write a bit of JavaScript testing code that pops up an alert box. This is just a test to make sure that your browser is running your JavaScript file, before we move on to tougher exercises.

hello world

Exercise : Hello World Button (~10 min)

Now let's set up a very basic JS event handler. Modify your JS code and HTML so that the "Hello, world!" alert message won't pop up until the user clicks the "Bigger Pimpin" button.

hello world

Exercise : Bigger Pimpin' Button (~15 min)

(See example screenshot on next slide.)

Modify your JS code so that when the user clicks "Bigger Pimpin'!", the text in the text area will get larger.

Exercise , output

The text should look like this after the button is clicked:

expected output

Exercise : Bling Checkbox (~15 min)

(See example screenshot on next slide.)

Add an event handler so that when the user checks "Bling", the text area will receive some styles.

Exercise , output

Your page should look like this when the box is checked:

expected output

Exercise : Snoopify (~10 min)

(See example screenshot on next slide.)

Snoop Dogg

Exercise , output

Your text should look like this when the button is clicked:

expected output

Exercise : Font Timer (~10-15 min)

Exercise : (h4x0rz only): More Gangsta

If you finish all previous exercises, try adding any of the following:

If you finish them all...

If you finish all the exercises, you can add any other content or code (or bling!) you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Great work!