Browse DevX
Sign up for e-mail newsletters from DevX


Build a Web-safe Color Palette Application-2 : Page 2

Create a Web-safe Palette
This solution has two goals—displaying the Web-safe palette and making it interactive. Displaying the palette is easy; you use some nested loops and a simple array to build a table whose cells each represent a different entry in the palette. A pair of radio buttons on the page lets users choose whether they're selecting a foreground or a background color. Finally, to make the display interactive, you can connect the onClick event for each colored cell in the table to a function that applies the selected color to either the foreground or background color of a separate display—based on the currently selected radio button. Simple event handlers for the radio buttons maintain the foreground/background value, and a "dummy" <div> tag holds content so users can see the effect of their chosen colors immediately.

To get started, open up your favorite text editor and add the following code:

   <title>Web Safe Color Palette App</title>
   body,td {
      font: 10pt Tahoma, Arial, Helvetica, sans-serif;
   td {
      cursor: pointer;
      cursor: hand;
   #colorTable {
   #controls {
   #testArea {
      padding: 5px;

The CSS Rules shown above position elements on the page. Next, create three <div> tags to hold the color table, the radio button controls, and a test area where the color effects appear. Because each of the <td> cells will be clickable, the td rule turns the standard cursor into the hand cursor when users move the mouse over a table cell. Note that the rules don't specify any colors—users will determine the colors in the testArea by clicking on the cells in the palette.

Add the following between the <body> tags:

<div id="colorTable">
   <script type="text/javascript">

<div id="controls">
   <table cellspacing="5" cellspacing="5">
           <input type="radio" 
           checked="true" value="fore" 
           Set Foreground Color</input>
         <td><input type="radio" name="colorControl" 
           value="back" onClick="colorToSet='back';">
           Set Background Color</input>
         <td id="foreground">Foreground: 000000</td>
         <td id="background">Background: ffffff</td>

<div id="testArea">
   <p>Lorem ipsum dolor... (get the complete 
   placeholder text from the code download)</p>

The colorTable <div>'s content will be generated by a function called createTable(). Also note that the controls <div> possesses two radio buttons—one to set the foreground color and one to set the background color. Each radio button has an onClick event that sets the value of a flag—colorToSet—in the script to either "fore" or "back". The function that displays the selected colors in the testArea <div> will check this flag to see which property to change. The controls <div> also contains labels that display the current color values of the foreground and background properties of the testArea. Initially, these values are set to black text (#000000) on a white (#ffffff) background. Finally, the testArea <div> contains some placeholder text so users can see how the colors interact.

Thanks for your registration, follow us on our social networks to keep up-to-date