Browse DevX
Sign up for e-mail newsletters from DevX


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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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:

<html> <head> <title>Web Safe Color Palette App</title> <style> body,td { font: 10pt Tahoma, Arial, Helvetica, sans-serif; } td { cursor: pointer; cursor: hand; } #colorTable { position:absolute; top:0; left:0; width:350; } #controls { position:absolute; top:5; left:360; width:350; } #testArea { position:absolute; top:70; left:360; width:400; padding: 5px; } </style> </head> <body> </body> </html>

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:

<u> <div id="colorTable"> <script type="text/javascript"> document.write(createTable()); </script> </div> <div id="controls"> <table cellspacing="5" cellspacing="5"> <tr> <td> <input type="radio" name="colorControl" checked="true" value="fore" onClick="colorToSet='fore';"> Set Foreground Color</input> </td> <td><input type="radio" name="colorControl" value="back" onClick="colorToSet='back';"> Set Background Color</input> </td> </tr> <tr> <td id="foreground">Foreground: 000000</td> <td id="background">Background: ffffff</td> </tr> </table> </div> <div id="testArea"> <p>Lorem ipsum dolor... (get the complete placeholder text from the code download)</p> </div> </u>

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