Resources

• //OUTPUT: Changing text styles
• //INPUT: Text
• //STYLE: Use cut and paste where possible

Saving your work

Use Save as... to save the empty template as "2.02S-ColorChanger-LastName.html" in your Computer Programming 12 directory.

The assignment

Create a page that will change the font and background color according to what the user enters.

1. Use HTML to create an input line and a textarea box
2. Add a button for each one
3. Give each text input an ID
4. Add onclick and onchange functions where appropriate
5. Create two functions:
   1. One that will read a text value and apply that to the type's color on the page
   2. One that will read a text value and apply it page's background color

It should look something like this:

Displaying and reading text input

Text color:
Change text color

Background color:
white
Change background

Extend and expand

Use CSS to style your page. For example, you can use input {width: 30px;} to change the width of a text input line using CSS.

Use input boxes to change other styles, such as font sizes, styles, weights, widths, and borders.

Javascript secret: onchange also works on other input types besides text inputs. Remember this: it may come in handy...