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.
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:
(See example screenshot on next slide.)
The first task is to expand pimpmytext.html
by adding UI controls. Add HTML code for the following:
form
tag on your page.Your page should look like this:
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.
pimpmytext.js
.
alert("Hello, world!");
script
tag.
alert
message?
script
tag syntax or ask a TA for help.
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.
alert
into a function.
onclick
handler attribute to the "Bigger Pimpin'" button that calls your new function.
alert
?
onclick
tag syntax and function, or ask a TA for help.(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.
id
attribute so your JS code can talk to it.
document.getElementById("elementID").style.propertyName = "value";
backgroundColor
.The text should look like this after the button is clicked:
(See example screenshot on next slide.)
Add an event handler so that when the user checks "Bling", the text area will receive some styles.
onchange
on the checkbox that calls a function that pops up an alert
.
checked
property. (Give it an id
.)
text-decoration
property)
text-decoration
property)
Your page should look like this when the box is checked:
(See example screenshot on next slide.)
value
property of the text area.
"."
.
split
and join
. For example, to replace spaces with underscores:
var str = "How are you?" var parts = str.split(" "); // ["How", "are", "you?"] str = parts.join("_"); // "How_are_you?"
Your text should look like this when the button is clicked:
.style.fontSize
property won't have a value, so just use a default of 12pt.
parseInt
function to help you solve this.
setInterval
function. The timer should call the function you just wrote.
If you finish all previous exercises, try adding any of the following:
https://webster.cs.washington.edu/images/pimpmytext/hundred-dollar-bill.jpg
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!