Congratulations!
(Well...maybe.)
You have just been hired by Web 'R Us.
They want to have a simple palette picker
webapp implemented primarily client-side
that they could then bundle with the various webapps they build.
Your boss found Parke's Colour Picker,
which is in the Creative Commons.
A live version is at
-
Parke's Colour Picker
Download the relevant files
—
colourPicker.html ,
cp.css ,
&
cp.js
—
from there.
As your very first job,
she asks you to take Parke's Colour Picker
and extend it to make it a palette picker.
Design and implement your palette picker for the following.
-
When the user taps (clicks) the colour square
—
the large square of solid colour
that displays the current colour
—
add a palette square
(if there is still room).
The palette square should be coloured
with the current colour,
and have the RGB code for the colour written
on top of it
—
like the colour square.
-
Allow up to eight palette squares.
(Just do not add any more, once there are eight.)
-
Do the layout something like in the sketch-up above.
-
Make it so when the user taps
a palette square,
it sets the current colour to the palette's colour.
-
Put a small button under each palette square with an “X”.
If the user taps the “X”,
remove that palette square.
Or,
if you decide to be fancy,
draw a small box with an “X”
in the lower right corner of the palette square.
When the user taps within that “X box ”,
remove that palette square.
-
Make it so the palette squares are “remembered”
—
that is,
if the browser returns later,
the palette from last time should be displayed.
You can use cookies for this.
You may make changes
to the content of the HTML, JS, and CSS files
that you inherited from
Parke's Colour Picker.
Note that canvas is HTML5.
Not all the kinks have been ironed out yet.
A canvas requires a
width and height for now,
like with an img .
These cannot be set by CSS style alone.
|