//MAKE: 2.02 Skill-builder: Color changer

Resources

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:


Background color:

Saving your work

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

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